Intern

네이버 지도 api 사용 시 마커가 많을 때 최적화 후기

0. 지도가 너무 렉이 걸려!지금 작업하고 있는 프로젝트는 네이버 지도를 활용해서 사용자가 저장한 식당 위치를 지도에 띄워주는 기능이 있다. 커스텀 마커를 생성하고 마커에 대한 정보들을 html로 변환 후, 마커의 content에 추가해주었다. 네이버 지도에 마커가 하나씩 생성될 때마다 DOM 요소가 하나씩 생성된다. 즉, 마커가 생성되는 개수가 늘어날수록 렌더링 성능에 영향을 끼치게 된다. 실제로 마커가 500개 넘게 네이버 지도에 추가되었을 경우, 줌과 드래그를 할 때 너무 렉이 걸려서 사용자 경험에 악영향을 끼치게 되었다. 그래서 일주일에 걸쳐서 네이버 지도를 최적화하기 위해서 여러 가지 시도를 하며 삽질을 해보았다.1. HTML 마커 방식 대신 캔버스를 사용해보자위에서 설명했듯이, 마커가 하나씩 ..