<aside> ✍️ 작성자: 김혜원 작성일: 24.06.08

</aside>

에러 메시지

Unhandled Runtime Error

TypeError: Cannot read properties of undefined (reading 'toLocaleString')

원인

결제 페이지에서 새로고침이 발생할 경우, checkoutState라는 Recoil State로 저장해뒀던 결제할 내용에 관한 정보가 초기 state 상태로 리셋되면서 사라지므로, 내용이 없어서(undefined) 에러가 발생함.

해결 방법

결제 페이지에서 새로고침이 발생하면, 결제 페이지 직전에 있던 페이지(즉, 결제하려는 클래스의 상세 페이지)로 돌아가게 만들기로 결정.

첫 번째 시도

// app/class/[id]/checkout/page.tsx

export default function CheckoutPage() {
  const { back } = useRouter();
  const checkout = useRecoilValue(checkoutState);

  if (!checkout.classId) {
    return back();
  }
  
  ...
}

1. if (!checkout.classId) {}: checkoutState의 초기 값이 {} 이므로, setState하지 않은 상태에서도 checkout === true 다. 따라서 checkout.classId 의 유무를 통해 새로고침을 한(또는 올바르지 않은 방법으로 결제 페이지에 들어온) 상태인지, 결제 정보를 가지고 있는 유효한 접근인지를 판별할 수 있다.
2. return back();: useRouter()의 back()을 사용해 브라우저 히스토리 스택에 있는 현재 경로의 직전(previous) 경로로 돌아가도록 했다. return 문을 사용해 밑의 코드들은 실행되지 않고, 바로 back()이 실행되도록 했다.

결과: 실패, 절반 정도의 확률로 직전 페이지로 돌아가거나, / 페이지로 돌아간다.

이유: window is not defined 에러가 발생했다. useRouter()는 custom hook인데 클라이언트에 렌더링 되기 전에 불러져서 (typeof window === undefined일 때) 에러가 발생한다.