[R09M App] 메인 페이지 - 지도 흔들림 현상 및 TanStack Query 적용

[ingbinsee]

내용

🤔 문제 상황

• pocketHost products 컬렉션에 있는 meetingPoint 카테고리의 주소 정보를 메인페이지(http://localhost:3000/home)에 마크하는 기능을 구현하였습니다. 그러나 렌더링 될 때마다 아래 영상과 같이 위치의 이동에 따라 지도가 흔들려보이는 현상이 발생되고 있습니다.
• 원인은 데이터가 렌더링 되면서 meetingPoint마다 위도, 경도가 이동하여 다음과 같이 지도가 흔들려보이는 것이라고 생각합니다.
• 렌더링 시 매번 지도가 흔들려보이는 것은 사용자의 입장에서 좋지 않은 경험이라고 생각하여, 이를 개선하고 싶습니다.
• 이와 더불어 현재 지도의 경우 js 파일로 분리되어 있어 TanStack Query를 사용할 수 없었습니다. 그러나 매번 렌더링 시 지도의 호출을 기다리는 것은 사용자의 입장에서 좋지 않은 경험이라고 생각하여 지도를 매번 렌더링하지 않고 캐싱(?)하는 방법이 있는지 궁금합니다.

참고 이미지

[ingbinsee]

[질의응답] 페이지 로딩 시 지도 흔들림 현상 및 에러 https://www.notion.so/d38a7b501d994ee38ba11965634770fc?pvs=4

원인

데이터의 개수만큼 순환해 지도 위에 마커를 생성합니다. 문제는 각 항목별 위치 정보(coords)에 맞춰 지도를 서로 가운데로 배치하려고 한다는 점입니다.

해결

• 마지막 위치 한 번만 지도 가운데 배치합니다.
• 데이터 응답이 오기 전에는 지도가 로딩 중임을 사용자에게 알립니다.
• 데이터를 응답받으면 부드럽게 페이드인 애니메이션을 적용해 마지막 위치 정보로 지도 가운데 배치될 때 튕기지 않도록 설정합니다.
• 웹 브라우저 윈도우에 다시 초점 이동이 되었을 때 리패칭(refetcing)하지 않도록 설정합니다.