피드로 돌아가기
Dev.toFrontend
원문 읽기
MapLibre GL JS 기반 10,000개 마커 렌더링 및 Race Condition 해결
I built Norway's EV charging map with Next.js and MapLibre GL JS — and hit a race condition that took me three sessions to fix
AI 요약
Context
노르웨이 EV 충전소 10,000개를 시각화하는 지도 서비스 구축 중 React 컴포넌트 기반 렌더링으로 인한 브라우저 성능 저하 발생. 또한 지도 스타일 로드 시점과 데이터 업데이트 시점의 불일치로 인해 경로 선이 표시되지 않는 Race Condition 직면.
Technical Solution
- React 컴포넌트 렌더링 대신 MapLibre 내장 GeoJSON cluster source를 활용한 WebGL 기반 렌더링 전환
- ClusterMaxZoom 및 ClusterRadius 설정을 통해 줌 레벨별 데이터 그룹화 및 개별 포인트 분리 처리
- MapLibre Expression을 적용하여 충전 속도(maxSpeedKw)에 따른 동적 스타일링으로 렌더링 파이프라인 최적화
- 일회성 'load' 이벤트 대신 렌더링 완료 시마다 발생하는 'idle' 이벤트를 사용해 비동기 데이터 업데이트 보장
- useEffect 내 Cleanup 함수를 통한 'idle' 이벤트 제거로 불필요한 콜백 실행 및 메모리 누수 방지
- OSRM, Nominatim 등 Open API 스택으로 구성하여 인프라 비용 $0.00 달성
실천 포인트
1. 만 개 이상의 마커 렌더링 시 React State 업데이트 대신 지도 엔진의 내장 Cluster Source 사용 여부 확인
2. 지도 라이브러리에서 'load' 이벤트가 초기 1회만 발생함을 인지하고, 동적 업데이트에는 'idle' 이벤트 적용 검토
3. 메인 스레드 부하 방지를 위해 Turf.js와 같은 무거운 지리 연산 로직의 Web Worker 이관 고려