[트러블 슈팅] 코드잇 중급 프로젝트

진행한 프로젝트 : https://github.com/only-arrow-function/Taskify

서버와 클라이언트 비동기 처리 이슈

next의 useRouter로 파라미터값을 가져와서 SWR로 비동기 데이터 패칭을 진행하는 로직에서 파라미터값을 가져오기 전에 SWR이 먼저 실행 되어서 id값에 undefined가 뜨는 이슈 발생

원인

이게 대해 찾아보니

useRouter는 정적으로 최적화 된 페이지에 제공되는 route 매개 변수가 없이 렌더링되기 때문이다. Next.js는 렌더링된 후 쿼리 객체를 채운다.

이러한 사실을 알게 되었고 page라우터를 사용했기 때문에 page라우터의 기본값은 정적페이지라는 사실과 연관 되어서 처음에 페이지가 렌더링되기 전에 SWR요청을 하게 되고 이때는 쿼리 객체가 빈값이기 때문에 undefined가 뜨는 이슈임을 확인했다

해결

이에 대한 해결방법은 크게 2가지 인데

1. next 10버전 이후에 추가된 router.isReady 메서드 사용하기
2. getServerSideProps 이용하기

추후 확장성을 고려해서 getServerSideProps를 사용하는 방법 즉, 프리렌더링으로 해결하였다

토큰값 없을 시 login페이지로 리다이렉트 처리 중 페이지 렌더링되는 이슈

당시 accessToken을 localStorage로 관리했기 때문에 페이지에서 localStorage에 접근해서 분기하려니 1차적으로 유저화면에 페이지가 렌더링되고 넘어가는 이슈 발생

원인

서버에서는 localStorage에 접근할 수 없기 때문에 리다이렉트 로직을 클라이언트 쪽에서 처리해야 했고 그렇다보니 리다이렉트 되기 전에 화면이 잠시 렌더링되어 보였다가 페이지가 넘어가는 것으로 확인

해결

서버측에서 localStorage에 접근이 불가하기 때문에 토큰 관리를 서버에서도 접근 가능한 쿠키형태로 변환 후 middleware를 추가해서 서버에서 쿠키를 검사해서 리다이렉트 시키는 방식으로 변경

zustand: 다른 전역 상태 라이브러리와는 다른 시스템

Redux, context-api와는 다소 결이 다른 zustand 시스템을 올바르게 이해하지 못하고 개발을 진행했고 하나의 페이지에 모달이 3개가 있는 상황에서 모달 상태를 전역상태로 관리 했는데 하나의 모달open값을 open으로 변경하자 해당 페이지에 모든 모달이 열리는 이슈 발생

원인

zustand는 객체 자체를 반환한다(클래스의 인스턴스를 리턴): provider가 존재하지 않는다.

즉, hook으로 사용할 경우, 이미 생성된 객체에, 상태를 저장하는 구조다

(원리 : https://react.dev/reference/react/useSyncExternalStore)

useSyncExternalStore – React

해결

위와 같은 원인 때문에 전역적으로 사용할 상태를 엄밀히 분리해야 했고 모달 같은 값들은 지역 상태값으로 변경하면서 전역으로 사용할 상태값만 따로 분리하여서 사용하도록 구조를 변경하였다