소분소분

현재 로그인된 사용자의 정보를 전역적으로 사용해야 해서 리덕스 튤킷을 사용했는데 브라우저를 새로고침하는 순간 리덕스 저장소가 초기화되어버리는 문제가 발생했습니다.

리덕스는 전역적으로 상태를 관리할 수 있게 도와주는 도구이지만 JavaScript 함수로 작동하기 때문에 SPA(Single Page Application)에서 사용할 때 특별한 고려 사항이 있습니다.

SPA에서 페이지를 이동할 때, 실제로는 브라우저의 링크로 이동하는 것이 아니라 히스토리 객체를 변경하는 방식을 사용합니다. 이로 인해 직접 주소창을 건드리거나 페이지를 새로고침할 때, 리덕스 스토어는 자바스크립트 메모리에 저장된 상태로 남아 있지 않고 초기값으로 리셋됩니다.

브라우저 새로고침 시 리덕스 저장소가 초기화 되는 것을 막기 위해 `redux-persist`를 사용했습니다.

`redux-persist`는 Redux 애플리케이션에서 상태를 지속적으로 저장하고, 브라우저 새로고침 또는 애플리케이션을 다시 시작할 때 이전 상태를 복원하기 위한 라이브러리입니다. 

이 라이브러리를 사용하면 Redux 스토어의 상태를 로컬 스토리지 또는 다른 영속성 저장소에 저장하고, 필요할 때 다시 불러와서 사용할 수 있습니다. 

`redux-persist`는 아래와 같은 특징이 있어 브라우저 새로고침 시에도 저장소가 초기화되지 않습니다.

1. 데이터 영속성 : Redux 스토어의 상태를 로컬 스토리지, 세션 스토리지 또는 다른 영속성 저장소에 저장하여 브라우저 새로고침 또는 애플리케이션 재시작과 관계없이 상태 데이터가 유지됩니다.
2. 자동 복원 : 이전에 저장한 상태를 로드하여 Redux 스토어에 자동으로 복원하기 때문에 저장소가 초기화되지 않습니다.

상황1) 로그인이 실패했는데 쿠키에 undefined 값이 저장되어 올바른 정보로 로그인 시도해도 로그인할 수 없는 현상이 발생했습니다.

상황2) accessToken이 만료되었을 때, refreshToken 값을 사용해서 새로운 accessToken을 발급했지만 쿠키에는 바로 반영되지 않는 문제가 발생했습니다.

상황3) 로그인 후 브라우저를 닫고 새로 열었을 때 이전에 로그인한 토큰 정보가 남아 있어 페이지가 제대로 동작하지 않는 문제가 발생했습니다.

상황1 원인) redis 에 있는 refreshToken과 클라이언트에서 전달된 refreshToken을 string 값 하나하나 오차없이 완전히 일치했을때만 accessToken 을 발급해주어서 유효성에서 처리되지 못하고 undefined 값이 날아와서 오류가 발생했던 것으로 확인했습니다.

상황2 원인) 이전 accessToken 값을 삭제하지 않고 바로 새로운 accessToken 값을 넣으려고 해서 오류가 발생했던 것으로 확인했습니다.

상황3 원인) 브라우저를 닫을 때 accessToken 값을 지우는 작업을 해주지 않아 발생했던 오류로 확인했습니다.

상황1 해결방법) interceptors.request 에서 accessToken 의 값이 날아올 때 falsy 한 값이면 토큰을 바로 삭제했습니다.

상황2 해결방법) 기존 accessToken 만료되어 서버에서 새로운 accessToken 값을 주었을 때 해당 값으로 변경될 수 있도록 코드를 작성했습니다. 

상황3 해결방법) 토큰 보관소를 쿠키에서 세션스토리지로 변경하였습니다.