React와 SpringBoot의 세션 유지를 통한 로그인 여담

React + SpringBoot을 통한 프로젝트 진행중 로그인 구현에서 난관에 부딪혔다. JWT 방식이 아닌 session 기반으로 로그인을 구현하려고하는데 문제가 생겼다.

이전 프로젝트에서는 JSP를 사용했는데, EL표현식을 사용하여 Controller에서 Model에 저장한 정보 또는 session에 저장한 정보에 바로 접근 가능했다. 그래서 유저 이름과 같이 로그인 유지시 고정적으로 필요한 정보는 바로 접근이 가능했다.

하지만 React 프로젝트는 MVC패턴이 아닌 VIEW로만 이뤄져있고, SpringBoot는 REST API로 사용하기 때문에 방식에 변화가 필요했다. 무엇보다 React에서 새로고침이 발생하면 상태값들이 전부 초기화가 된다.

JWT를 썼다면 바로 해결이 되지않았을까

내가 생각한 방법

1. localStorage에 저장
2. Redux에 저장

첫 번째 방법인 localStorage에 저장하는 방법은 JWT에서 토근과 함께 저장하는 방식으로 사용된다. 뭐 문제는 크게 안되겠지만 JWT 배울 때 쓰기 위해 아껴두는 걸로....

두 번째 방법으로 해보려고 한다. Redux에 저장하여 관련 state를 모든 컴포넌트가 사용가능하도록 하는 건데, 문제는 useState 와 마찬가지로 새로고침시 삭제된다. 그래서 방법을 세분화했다.

• 새로고침 시
  1. Redux에 user.logged 라는 상태를 만들어 로그인 여부 체크 (초기값 false)
  2. useEffect 를 사용하여, 컴포넌트 리렌더링 시 user.logged 확인
  3. false 일 경우, 서버에서 접속 세션 로그인 여부 확인
  4. 로그인 관련 정보 response
  5. response 에서 로그인 여부 확인
  6. 로그인 정보가 세션에 있을 시, dispatch 로 redux에 로그인 관련 정보 주입

• 생각한 문제점
  1. redux에서 로그인 상태가 true 여도 서버 세션 접속시간 제한으로 때문에 서버 상 로그인 정보가 사라질 수 있다.
  2. 이럴 경우 클라이언트 상에는 로그인이 되었다고 뜨고, 로그인이 필요한 작업 시 에러가 발생할 수도 있다.
  3. 그래서 로그인이 필요한 작업을 하기 전, 서버 상 로그인 상태만 체크해주는 REST API와 함수를 작성할 필요가 있다.

이게 맞나 싶지만... 우선 이렇게 하기로 했다! 큰 문제는 없었지만 아무래도 리렌더링 시, 매번 서버에서 확인해야하니 부담이 생길 거 같다. JWT 방식을 배우게되면 그때 다시 포스팅하기로..