🤔 문제 발견

ScreenRecording_12-05-2024 10-30-03_1.MP4

• 기능 테스트 도중 렌더링이 되는 것을 확인

  위 영상의 1분 36초 경부터 확인

• 이후 다양한 환경에서 테스트를 해보았을 때 여전히 같은 문제가 발생한 것을 확인하였음.

ScreenRecording_12-05-2024 10-35-30_1.MP4

ScreenRecording_12-05-2024 10-37-52_1.MP4

ScreenRecording_12-05-2024 10-46-40_1.MP4

ScreenRecording_12-05-2024 10-48-06_1.MP4

ScreenRecording_12-05-2024 11-08-49_1.MP4

ScreenRecording_12-05-2024 11-15-36_1.MP4

ScreenRecording_12-05-2024 11-17-52_1.MP4

ScreenRecording_12-05-2024 11-22-22_1.MP4

ScreenRecording_12-05-2024 11-24-03_1.MP4

ScreenRecording_12-05-2024 11-26-31_1.MP4

🤔 분석 및 해결

1. Geolocadtion API에는 문제가 없음
   • 네이버 지도, 구글 지도 모두 정상적으로 동작함
2. 예상되는 문제
   • MapCanvasDraw 문제없음
   • MapCanvasForView.tsx
     1. Main 문제인가 했는데 → 다른 페이지도 똑같은 문제 발생
   • 상태가 재업데이트 되는 것 같음.
     • useEffect 등에서 트리거가 발생되는 것 같음. 빠르게 잦게 무한 랜더링이 되는 게 아니라서, dependency 등에서 꼬인 것 같다는 생각.
     • 위치라고 생각되는게, 위치를 웹소켓에서 받아오거나 업데이트하는 주기에 따라서 재랜더링이 되는 것 같다고 생각이 듦.

• 현재 로직은 위치를 받아와서 실시간으로 재랜더링을 하고 있음.

  • 위치의 초기값이 정자의 네이버빌딩인데, 재랜더링이 될 때도 네이버 빌딩으로 잡힘.
  • 즉, 위치가 제대로 안불러와지거나, 값이 안넣어진다고 생각할 수 밖에 없음.
  • 혹은 어떤 경로로든 초기값으로 초기화되거나.

• Element지도 객체가 매번 재 생성되는 문제가 있어서 그대로 처리