access token 2

[#2] 가이드 화면 구현 삽질기

구현 목표가이드 화면을 만들기로 했다.원래 기획은 로그인이 안 되어 있으면 바로 로그인 화면으로 리다이렉트하고,로그인이 되어 있으면 캘린더 화면으로 리다이렉트하는 것이었다. 이제 기획이 변경되어서, 로그아웃된 상태이더라도 캘린더 화면에 접근할 수 있고,예시로 생성된 가이드 데이터를 볼 수 있게 하고자 했다. 트러블 해결 후 또 트러블...우선 루트에 들어왔을 때 캘린더 화면으로 리다이렉트하도록 구현하였다. 루트는 존재하지 않고, 메인 화면은 캘린더였기 때문이다.그러나 현재 구현상 캘린더 화면에 들어서는 순간 react-query의 useQuery를 통해 스케줄 정보를 불러오는 요청이 보내져서,비로그인 상태일 때는 access token이 없는 상태여서axios 인스턴스의 request 인터셉터에서 로그..

[#1] Next.js 로그인 여부 기반 라우팅 고찰 - 깜빡임 없는 UX를 위하여

구현 목표유저가 로그인이 안된 상태라면 로그인 화면(A)을 보여주고,로그인이 된 상태라면 이 유저가 커플인지 여부에 따라 커플 연결 화면(B), 커플 화면(C)을 보여주어야 한다. 현재 구현로컬 스토리지에 저장된 access token을 가지고 유저 정보에 대한 요청을 보내면 유저 정보를 가져온다.만약 실패한다면 로그인하지 않았다고 판단하고, A 화면으로 리다이렉트한다.유저 정보가 존재한다면 커플 정보 요청을 보내고,커플이 아니라면 B 화면으로 리다이렉트, 커플이라면 C 화면으로 리다이렉트한다. * 문제점화면 로딩이 한번 이루어지고 난 다음에 api 응답 결과에 따라 replace 처리를 했기 때문에 화면 깜빡임이 불가피하게 발생했다.이 깜빡임이 매우 거슬려서 화면이 렌더링되기 전 SSR 단계에서 로그인..