[TIL] 23/12/04 React 심화: 개인과제 이슈 모음(인증서비스가 들어간 팬레터함, 새로고침 이슈 등)
강의를 다시 들으면서
하나하나 구현하니 오래 걸리긴하지만.. 하나도 기억이 안났는 걸..?
그래도 조금 많이 이해 완료
큰 이슈는 새로고침 이슈 빼고 모두 구현 완료! 👏
(TIL 쓸 때도 css 연습..ㅋ)
TIL 💡
Big Issue 1) 새로고침 이슈
requirement :
1) 로그인 상태인 경우 홈, 상세, 프로필 화면에만 접근,
로그아웃 상태에서는 로그인 화면에만 접근 할 수 있게 하기.
2) 새로고침시에도 로그인 상태가 유지되도록 로컬스토리지를 이용.
solution for 1) :
로그인을 알 수 있는 state 값에 따라
(예를 들어 isLogin, 혹은 accessToken이 있는지 없는지, 처음에는 전자로 구현했다가 후자로 바꿈)
라우터들을 분기 처리하고
다른 주소가 들어올 때는
로그아웃 상태에서는 "/login"으로,
로그인 상태에서는 "/" (홈)으로 리다이렉팅 하기.
예시 페이지와 동일하게 너무 잘했다. 1) 번은..
그런데 말입니다..
여기서 몇시간 허공에 뿌린 새로고침 딜레마는 뭐냐면,
Issue:
1) redux 전역 state로 분기를 해주면 새로고침 하면 state값이 날아가면서 로그인 상태를 확인 할 수 없게 되어 로그인 화면으로 튕기게 된다.
2) 이를 해결 해 주기 위해 local storage를 반영하라고 했는데.. local storage에 값이 있는지 없는지로 router 분기를 하게 되면 로그인, 로그아웃 등 로그인 상태의 변경사항 발생 시 바로바로 화면에 반영이 안되기 때문에 오히려 새로고침을 해주어야 한다.
Try 1:
local storage에 써준 값을 다시 redux로 채워주는데
useEffect가 발동하기 전까지는 state가 비어있긴하다. 즉 페이지가 왔다갔다 해버림.
어느 타이밍에 채워줘야하느냐? ^.^
(위치도 애매해서 login 에서만 저걸 해주는 중, 로그인 후 화면들은 새로고침 시 문제 있겠네)
useEffect(() => {
const localUser = localStorage.getItem("user");
if (localUser)
dispatch(setLogin(JSON.parse(localUser)));
}, []);
Try 2:
비어있을 때에도 local storage 값을 유지 하도록 reudux initial 값에 local storage의 값을 써준다.
잘되는 줄 알았는데 로그인화면에서 local에 값 없을 때 에러뜨고 못고쳐서 망함.
해설 강의를 보자~~~
solution for 2) :
결국엔 try2 가 방향성은 맞긴 한데, 강의를 보고 확신을 갖고 보니 해결 할 수 있었다.
나의 문제는 현재 accessToken이 있는지 없는지로 로그인 여부를 판단하는것에서 시작한다.
복잡해서 포기해버린 것이나 다름 없다.
1) 처음에는 단순하게 isLogin : true 처럼 boolean 값으로 했었는데,
다른 동료분들과 얘기하다 보니 서버에서 받아온 값을 넣어주는 코드를 깔끔하게 두고 싶어서,
user 객체를 한번에 가져와서 redux와 local storage 에 저장을 해준 것이다.
여기local storage는 객체로 저장할 경우 넣고 빼는게 복잡해진다.
그래서 redux에서 써야하는 코드가 불편해졌다.
// 넣을 때
localStorage.setItem("user", JSON.stringify(userData));
// 뺄 때
const localUser = JSON.parse(localStorage.getItem("user"));
//그래서 redux의 initialState 에서는 이렇게 해줘야했고..
const initialState = {
accessToken: localUser?.accessToken,
}
2) Router에서 accessToken이 local storage에 없을 때 뭐가 나오는지 몰랐다. undefined...
//라우터 컴포넌트 내부 (전체구조 생략하였음)
const accessToken = useSelector((state) => state.auth.accessToken);
//return문 안쪽
{
accessToken != undefined ?
<Route path="/" element={Home/}>
:
<Route path="login" element={<Login />
}강의 그대로 깔끔하게 수정하고자 하면
1) 로그인 시 userdata 객체로부터 뜯어서 토큰을 넣어주고
localStorage.setItem(" accessToken ", userdata.accessToken)
2) 리덕스 initialState에서는 isLogin을 여전히 true, false로 받는다.
const initialState = {
isLogin: !!localStorage.getItem("accessToken") // 느낌표두개로 boolean 타입으로 변경된다 핳...
}
3) Router에서 isLogin을 이용하여 삼항연산자를 깔끔하게 써준다.
isLogin ? <Route> : <Route>
- 끝-
Big Issue 2) accessToken 만료 시 로그아웃 시키기
여기서 또 몇시간 공중에 흩뿌린 문제가 나오는데...
interceptor로 accessToken 확인하는 통신을 추가했는데,
이 안에서는 dispatch안되지, navigate 안되지,
모든 react hook을 사용 할 수 없다는 에러가 뜬다는 것이다~ 랄라.
임시 방편으로 localStorage는 접근이 가능해서 로컬 스토리지의 accessToken과 user 정보를 지우고, window.location.replace('/login');
을 사용했지만 이유를 몰라서 세상 찝찝하다.
(강의는 아직 다 못봄)
Small Issues
1) 귀신이 곡할 코드 👻
configStore.js 에 reducer 추가 안해주면 에러는 안나지만 계속 state값 못 받아와서 undefined,
귀신이 곡할 코드가 완성된다. 괜히 동기 분 괴롭힘^^;
2) 똥코드 💩 🤎
reducer 에서 mutable한 함수를 써줘도 불변성을 유지하게 해준다는 immer js만 믿고
state가 객체일 때
state.content = action.payload; 이런게 가능하길래
객체 자체를 통째로 변경하고자
state = action.payload; return state; 라고 써줬다가 망한 썰 (이걸 해준다고 한게 아닌데..)
action.payload는 여기서 reducer를 벗어나면 없어지고
state는 action.payload를 가리키고 있어서 null이 나오는 것 같다. 나이스^.^