🤖
1624 in / 775 out / 2399 total tokens
v0.37.0에서 카카오맵과 네이버맵에 마커 클러스터링을 적용했다.
카카오맵은 MarkerClusterer, 네이버맵은 MarkerClustering 라이브러리를 각각 사용했다. 줌 레벨에 따라 마커가 자동으로 그룹핑되고, 네이버는 maxZoom 12, minClusterSize 2로 설정했다. 클러스터 스타일은 파란색 배경에 개수 표시로 통일.
기존 CustomOverlay를 Marker로 리팩토링했다. 클러스터링 라이브러리가 표준 Marker 타입을 요구해서다. 라이브러리 로드 실패 시 개별 마커로 폴백 처리도 추가했다.
// KakaoMap.tsx - clusterer 라이브러리 추가
script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey}&autoload=false&libraries=clusterer`;
// 클러스터링 적용
const clusterer = new kakao.maps.MarkerClusterer({
map: map,
minClusterSize: 2,
styles: [{
width: '40px', height: '40px',
background: '#3274F9',
borderRadius: '50%',
color: '#fff',
textAlign: 'center',
lineHeight: '40px'
}]
});50개 이상 마커에서 렌더링 성능이 눈에 띄게 좋아졌고, 줌 아웃 시 지도가 훨씬 깔끔하다. 712개 테스트 모두 통과.