0725

Clone Coding

이미 구매한 옵션을 장바구니에 다시 담을 수 있는 문제

• purchase product api에서 max purchase quantity에 대한 patch는 안 하고 있었기에 update option에 max purchase quantity 항목 추가

해결 방법

1. window.location.reload()로 구매 후 페이지를 새로고침해 최신 데이터를 페칭
   • 장점: 타 라이브러리 필요 X. 간단하게 window.location.reload 메서드만 추가하면 됨
   • 단점: 페이지 전체가 리로딩되니까 사용자 경험이 좋지 않음 (폼 입력 상태 손실 등..)
2. React Query로 클라이언트에서 데이터를 관리한다
   • 장점: 캐시 무효화가 자동으로 이뤄진다.
   • 단점: 뭐가 있지 번들 크기가 늘어난다..?
3. Zustand store로 전역에서 상태 관리
   • 장점: SSR 유지 가능
   • 단점: 페이지 새로고침시 상태가 초기화 됨 >> 무쓸모

선택 방법

• 처음: window.location.reload 사용
• 왜? 클라이언트딴에서 데이터를 페칭해오기 때문에 product tab observer가 제대로 동작하지 않았음.
• 근데 해당 문제는 클라이언트에서 데이터가 완전히 다 받아와진 다음에 observer를 실행시키면 되는 문제였음. 즉 하이드레이션 미스매치를 해결하면 됨
• 고로 react query를 사용해 장바구니와 상품 상세 페이지 쿼리를 동시에 무효화 시키는 방식이 더 이득임
• 결론: react query 사용

1. 서버: fetchProductDetail() 실행 → QueryClient 캐시에 저장
2. HTML 전송: prefetch된 데이터와 함께 완성된 HTML 클라이언트에 전송
3. 클라이언트 Hydration: 서버 캐시 복원 → useQuery가 즉시 데이터 반환
4. 구매 후: 캐시 무효화 → 자동 리페치 → UI 업데이트

Link 컴포넌트의 useContext 오류

1. 서버에서 layout.tsx가 먼저 실행됨
2. ConditionalLayout: "use client"이지만 서버에서 pre-render됨
3. usePathname/useSearchParams: Router context가 아직 없는 상태에서 호출됨
4. 결과: Cannot read properties of null (reading 'useContext')

• 결론: try catch나 useEffect로 Router Context가 준비 된 후 불러오기
• try catch는 그렇다치고, 왜 useEffect로 하면 해당 문제가 해결되는가?
  • useEffect는 서버에서 절대 실행되지 않고 클라이언트에서 컴포넌트가 마운트 된 후에만 실행되니까

내일 다시 볼 것

• 서버와 클라간의 데이터 동기화 중요시하기..
• product detail view와 cart page에서 alert를 처리하는 것에 대한 생각