221208 TIL useLocalStorage

오늘은 오전, 오후에는 css작업을 어느 정도 하고 저녁에는 어드민 로그인을 구현했다.
어드민에는 회원가입도 필요 없고 로그인도 기존에 사용자단에서 로그인 시 필요한 인터셉터와 jwt가 이미 만들어져 있었기 때문에 금방 만들 수 있을 거라고 생각했다.

일단 어드민 계정 생성을 위해 엔티티를 만들어 주고 어드민 계정은 db에 직접 하나 넣어줬다.
이후 로그인 시 프론트에서 입력받은 계정이 어드민 계정인지 아닌지 검증하기 위한 로직을 작성해주고 로그인이 성공하면 입력받은 아이디를 jwt를 이용해 토큰으로 만들어서 해당 토큰을 프론트로 전달했다.
db에 넣어준 어드민 계정으로 로그인 성공 시 토큰이 잘 전달되는지 로그인을 해봤는데 정상적으로 accessToken을 받은 것까지 확인할 수 있었다.

이제 어드민 페이지에서 홈 화면을 로그인 화면으로 하고 로그인이 되지 않았을 때는 다른 페이지에 접근하지 못하도록 어드민 페이지의 메뉴바를 사용하지 못하게 accessToken이 있을 때만 상단의 메뉴바가 보이게 해 줬다.
그리고 로그인이 성공해서 accessToken이 있으면 navigate로 대시보드 페이지로 이동하게 했는데 여기서 문제가 발생했다. 로그인을 하면 navigate에 의해 대시보드 페이지로 이동하는데 accessToken이 localStorage에 저장이 되지 않는 문제가 발생해 로그인을 해도 accessToken이 없디땨문에 상단의 메뉴바가 보이지 않는 것이었다.
그래서 accessToken을 어디서 잃어버린 것인지 확인하기 위해 콘솔 로그를 여러 페이지에서 찍어 확인해봤는데 accessToken이 없어지는 부분을 찾을 수 있었다. 바로 navigate를 이용해 대시보드 페이지로 가기 전까지는 있는데 대시보드 페이지로 이동되고 accessToken이 없어져버리는 것이었다.
index.jsx에도 setAccessToken 해주고 App에서도 useEffet를 이용해 accessToken이 있으면 setAccessToken을 해줬는데 navigate로 이동되는 순간 accessToken이 도망가버리는 것이었다..

navigate만 없애면 정상적으로 accessToken이 localStorage에 저장돼서 메뉴바가 보이는데 navigate를 실행시키면 날아가버리는 거다. 해당 문제를 해결하기 위해 도장에 남아계신 동료분들과 한참을 어디가 문제인지 찾다가 정말 예상치도 못한 부분이 문제였다는 것을 알게 되었다.
useLocalStorage를 기존에 사용하던 usehooks-ts를 다운로드한 게 아니라 use-local-storage를 다운로드하여서 사용하고 있었던 것이었다.

문제의 use-local-storage -> https://www.npmjs.com/package/use-local-storage

설마 이거 때문이야?? 하면서 usehooks-ts를 다운로드하고 useLocalStorage를 다시 임포트 해서 로그인해보는데 정상적으로 되는 것이었다...
문제는 해결돼서 좋은데 아직 이해가 되지 않은 건 맨 처음에 다운로드해서 사용하던 use-local-storage는 navigate를 만나기 전까지 setAccessToken으로 accessToken이 localStorage에 잘 저장이 되는데 navigate를 만나면 왜 accessToken이 사라지는 건지, 또 app.jsx에 있는 useEffet도 실행되지 않는건지 이해할 수가 없다..
아무튼 무작정 다운로드하지 말고 어떤 것을 다운해야 하는지 다운로드하는 것이랑 일치하는지 확인하고 다운로드하자..!