피드로 돌아가기
Dev.toFrontend
원문 읽기
React 19 기반 Monorepo 구조의 3개 앱 데이터 동기화 및 WebGL 시각화 구현
Months of work on a 3-app Marvel ecosystem — React 19, Three.js globe, PWA, i18n, monorepo
AI 요약
Context
단일 데이터셋을 공유하는 3개의 서로 다른 서비스(PWA, 3D Map, Hub) 구축 필요성 대두. 개별 앱 운영 시 발생하는 데이터 중복 관리 및 일관성 유지 문제 해결을 위한 아키텍처 설계 요구.
Technical Solution
- pnpm Monorepo 도입을 통한 단일 JSON 데이터셋 기반의 3개 앱 간 데이터 정합성 확보
- react-globe.gl 및 Three.js 활용으로 줌 레벨별 Pin Clustering 로직 구현을 통한 렌더링 부하 최적화
- Zustand와 localStorage를 결합하고 Supabase sync를 추가하여 PWA의 오프라인 상태 및 데이터 영속성 처리
- GPU 미지원 디바이스를 고려한 WebGL Fallback 전략 수립으로 서비스 가용성 확대
- i18next 기반 다국어 처리 및 Vite 7.3/Tailwind v4 적용을 통한 빌드 및 스타일링 성능 최적화
- 83개 위치와 160개 프로젝트 데이터에 대한 Fuzzy Search 적용으로 검색 사용자 경험 개선
실천 포인트
1. 단일 데이터 소스로 여러 앱을 운영할 경우 Monorepo 구조의 데이터 공유 전략 검토
2. WebGL 기반 시각화 구현 시 GPU 미지원 환경을 위한 Fallback UI 설계 반영
3. 다량의 좌표 데이터 렌더링 시 줌 레벨에 따른 Clustering 알고리즘 적용 여부 확인