Next, d3로 서버 사이드 지도 렌더링하기
프론트엔드
Next, d3로 서버 사이드 지도 렌더링하기
두줄요약
Next.js와 d3로 부동산 데이터 시각화 지도를 만들며 구조를 개선한 과정을 정리했습니다. 지도와 시각화 레이어를 분리하고 d3 의존을 줄여 서버 사이드 렌더링도 가능하게 했습니다.
핵심 내용
- Next.js, d3, Recoil을 활용한 부동산 데이터 시각화 파일럿 프로젝트 정리
- 지도와 시각화 레이어를 분리해 관심사 분리와 재사용성 개선
- d3 의존을 줄여 지도 서버 사이드 렌더링 가능하도록 구조 변경
선택 이유
- 구체적인 지도 기능보다 행정구역 기반 시각화에 적합한 d3-geo 선택
- 파생 상태 관리와 불필요한 리렌더링 방지를 위해 Recoil 도입
- Atom 컴포넌트의 전역 상태 결합을 줄여 유지보수성과 확장성 확보
구조와 흐름
- Map 컴포넌트는 지형 렌더링만 담당
- VisualizationLayer는 지역별 데이터 색상 적용과 클릭 이벤트 처리 담당
- GeoJson 좌표와 projection, pathGenerator로 SVG path 생성
적용해볼 점
- 컴포넌트 내부 상태 참조보다 props 기반 주입으로 결합도 완화
- DOM 조작 책임을 컴포넌트로 옮겨 서버 사이드 렌더링 여지 확보
- 시각화와 지도 렌더링 로직 분리로 라이브러리 교체 가능성 향상