0712

clone coding

오늘의 오류

• appnavbar

  • 어제는 상태가 변경되고 url 쿼리파라미터 값이 push로 나중에 바껴서 불일치 문제 발생
  • 전역상태를 persist에 저장
    • persist의 getItem/setItem 생명주기를 이용해서
    • getItem: URL에서 상태 읽기
    • setItem: 상태 변경 시 URL 업데이트
    • useEffect: 브라우저 이벤트로 URL 변경 감지

• fetch함수

  • 백엔드딴에서 엔드포인트를 새로 만드는게 나을 것 같지만 일단 products와 product로 나눠서
    단일(product/id나 cart 페이지)프로덕트가 필요할 땐 product에서 갖고오고
    main에선 products에서 갖고오도록 함

• 동적 라우트의 params에 접근할 때 다음과 같은 에러가 발생

hook.js:608  Server   Error: Route "/product/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis  
    at Product (page.tsx:10:15)

• 원인
  • Next.js 15부터 params와 searchParams가 Promise로 변경됨.
    React 19의 비동기 컴포넌트 모델에 맞추기 위해서 이렇게 변경됐다고 함.
• 해결 방법

// v.14  
export default async function ProductPage({ params }: { params: { id: string } }) {  
  const productId = params.id;  
}

// v.15  
export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {  
  const { id: productId } = await params;  
}

• 근데 제미나이가 코드리뷰때 이걸 지적해줘서... 내가 잘못 찾았나 싶었음
• 그리고 useSerachParams를 쓰려면 suspense로 컴포넌트를 감싸야됨
• 관련자료
  • https://stackoverflow.com/questions/79465960/react-a-param-property-was-accessed-directly-with-params
  • https://github.com/vercel/next.js/issues/71690#issuecomment-2439644682

내일(앞으로) 할 것

1. product option, quantity form (수량 체크)
2. add cart
3. point timer
4. main page에서 deal tab