Completed 🎉
- React-Query 도입
- 신호정보 90초마다 refetch
- SignalListDetail 컴포넌트 구현
- countDown 적용
( countDown 적용 및 refetch로 signal정보 업데이트, 신호 변경 )
Problems 🧗
지도 중심 주변 2km만 신호정보를 나타내는 것을 구현할때(지도로 움직이는 상황)
- Recoil에 저장되어 있는 mapAroundSignals 배열값을 업데이트하려고 할때마다 에러가 생겼다.
- 에러를 읽어보고 찾아보니 불변값을 변경하려고 할때 생기는 에러였다.
- Recoil state를 setRecoilState를 이용해서 변경했고 다른 곳에서도 문제가 없었는데, 디버깅해보니 setMapAroundSignals로 배열을 교체하려고 할 때 문제가 계속 생겼다.
- 관련해서 찾아보니 Recoil에 저장된 Object값은 default로 frozen해둔다.
- 그 이유는 Recoil의 모든 상태 변경이 데이터 흐름 그래프를 통해 업데이트로 표시되고 전파 되도록하는데 저장된 값이 변이를 일으켜 변경을 시도하면 이를 추적하거나 업데이트 되지 않는 경우들이 발생하기 때문이다.
- 해결 방법은 깊은 복사를 하거나 atom option에 dangerouslyAllowMutability를 true로 설정해두는 방법이 있었다.
- UNSTABLE한 option이 아니라서 해당 옵션을 true로 변경해서 해결했다.
참고 레퍼런스 - https://github.com/facebookexperimental/Recoil/issues/299
- https://github.com/facebookexperimental/Recoil/issues/406
React Query refetchInterval 주기 설정
- 처음에는 가져온 신호등 정보에서 제일 최소 시간을 기준으로 refetch를 계속 하려고 했다.
- 그렇게 구현할 경우, 너무 자주 fetch가 일어나서 api 요청횟수가 금방 초과될 것 같다.
- 고민끝에 90초 마다 refetchInterval을 설정했다.
- 그리고 처음 시간을 받아왔을 때 countDown이 다 됐다면 phase를 변경시켜주고 시간을 정보없음으로 나타냈다.
countDown 구현
- Detail Component가 mount된 이후에 useEffect에서 setInterval을 사용해서 주어진 시간을 countDown했다.
- 두가지 문제가 생겼다.
- 첫째는 range를 변경할때마다 mount돼서 계속 처음 fetch받은 시간부터 countDown됐다.
=> 전역 상태로 fetch받은 updatedTime을 설정해두고, mount됐을 경우 시간과 차이를 구해서, 시간을 뺀 후 부터 countDown으로 문제해결했다. - 두번째로는 2초씩 countDown이 됐다.
- 디버깅을 했을때, react dev tool backend라고 나와서 처음 next.js의 SSR때문에 생긴 문제라고 판단했다.
- 처음 setInterval을 실행할때, window의 유무를 확인해서 SSR을 막으려고 했다. 동일하게 2초씩 줄어들었다.
- dynamic import에서 ssr: false옵션 설정을 한 컴포넌트를 만들어서 적용했지만 동일하게 2초씩 줄어들었다.
=> 결국 next.config에서 react strict mode를 false로 바꾸니 해결됐다.
하루 회고 📋
목표로 했던 구현사항들은 거의 다 구현했다.
얕은 수준이지만 처음 사용해보는 기술인 Recoil과 React-Query도 큰 어려움없이 적용했고, next.js도 dynamic import랑 next.config에 대해서 더 알게 됐다.
여러 문제가 생기고 고민들을 했지만, 결국 다 해결하고 오늘 목표했던 구현까지 다했다.
내일 우선 배포하고 PWA 적용할 수 있도록 하는 조건들 적용시키고 리팩토링통해서 any로 타입지정한 것들 다 바꾸고 최적화 고민하면서 마무리하면 될 것 같다.
거의 다왔다!
내일 할 일 ✅
- 배포
- PWA 적용 방법
- 리팩토링, 최적화
Log