그동안은 로그인 안 하고 담아둔 장바구니 내역이 로그인해도 회원 장바구니로 안 넘어갔다. 이게 좀 불편해서 장바구니 기능 개편 내용 중에 추가하기로 했다.
개선 방법
로그인을 안 했거나 비회원 구매 시 장바구니에 담으면 로컬스토리지에 장바구니 목록이 저장된다. 그래서 가입을 완료했거나 로그인 후 호출되는 callback에서
- 회원 장바구니 갯수를 가져오는 api를 호출해서 쿠키에 담아둠
- 모든 페이지 공통 코드에서 쿠키값을 가져옴
- 비회원 장바구니 내역이 있으면 해당 내역을 회원 장바구니에 업데이트 후 장바구니 갯수 설정4. 비회원 장바구니 내역이 없으면 쿠키값으로 바로 회원 장바구니 갯수 설정
- 비회원 장바구니 비우기
이렇게 해서 비회원 장바구니를 회원 장바구니로 옮길 수 있게 했다.
힘들었던 점
ssr 내에서 장바구니를 가져오려다보니 장바구니 갯수가 localstorage에 저장되어있는데 이걸 가져오지도 못하고 업데이트도 할 수 없었다. 그래서 redux를 써서 처리해볼려고 했으나 로그인 성공 후 redirect 되면서 hydrate에 의해 redux state 완전 초기화되어버렸다. 장바구니 갯수에 대해선 hydration이 안 일어나게 해볼려고 했으나 모든 state에 대해 extra reducer를 설정해주는게 부담되어서 하지 않았다. 그리고 redux-persist도 어차피 내부적으로 쿠키를 활용하는 방식이라 그냥 쿠키를 쓰기로 했다.
완료 페이지 ssr에서 처리한 이유
일단 내가 사용한 페이지는 로그인이나 회원가입이 끝난 경우 제외하면 볼 일 없는 페이지이다. 이렇게 되면 불필요하게 api를 소비하지않아도 된다. 만약 공통 코드의 useEffect나 ssr 쪽에 넣으면 페이지마다 호출될 수 있어서 넣지 않았다. 그리고 로그인 완료 후 다른 페이지로 리다이렉트 될 수 있는 url을 설정할 수 있게 코드가 있기 때문에 랜딩할 수 있는 페이지의 경우의 수가 많아져서 필요한 곳만 코드를 넣는다는건 불가능했다.
중간에 에러가 난 경우엔 어떻게 했나?
호출 중간에 api 오류가 나면 비회원 장바구니는 비우고 현재까지 업데이트된 장바구니 갯수를 가져왔다. 장바구니를 비우지 않으면 로그아웃 후 재로그인 시 해당 코드가 계속 돌기 때문에 이를 막기 위해 그냥 비워버렸다.
소감
Nextjs hydrate에 대해 깊게 생각해본 적이 없었는데 이번에 꽤나 골치 아팠다. 덕분에 좀 공부하는 시간이 된거 같기도 하고..뭐 하나를 정말 잘 쓰기 위해선 참 여러 선수 지식이 필요하다는 걸 새삼 느꼈다.
