today i worked 5/25

1. 갑자기 API가 바뀌어서 수정 작업을 해야 했다. 문제는 바뀌자마자 바로 알려주지 않아서 몇시간 삽질을 했다는 거..?

2. useQuery로 데이터를 불러 오면 router.query값이 undefined가 되는 오류가 생겼다. 원인을 찾아보니 렌더링 전 준비시간동안 라우터의 객체는 비어있으며 hydration 후에 업데이트 되는데, 렌더링 과정과 맞물려서 이 때에 undefined를 뱉는 것이었다. 해결책으로는 SSR이 있었는데, 우리 프로젝트에서는 SSR을 사용하지 않기로 했다. 그래서 찾아보니..

useEffect(() =< {
  if (!router.ready) return
  // router.query를 사용하는 코드
}, [router.ready])

이런 식으로 router.ready가 되었을 때 router.query를 사용하는 코드를 useEffect에 넣으면 되는 것이었다. 내가 해야 할 건 특정 변수에 router.query.serialNumber(예시)를 부여하는 것이었는데, useEffect에서 변수를 선언하면 밖에서 사용할 수 없으므로 어쩔 수 없이 useState를 사용해서 상태로 관리해야 했다.

const [serialNumber, setSerialNumber] = useState<string>('')

useEffect(() => {
  if (!router.ready) return
  setSerialNumber(router.query.serialNumber)
}, [router.ready])

이런 형태로 말이다. 근데 이렇게 하면 문제가.. 이 serialNumber 상태를 사용해야 하는 곳이 있는데 처음에 비어있는 serialNumber 값을 인식하여 404를 리턴하다가 useEffect문이 실행되고 난 뒤 적용된 serialNumber를 사용하면 제대로된 값을 리턴하는 것이었다. 이부분은 차차 해결해나가야겠다.