단일 HTML 파일 기반의 No-Build 아키텍처와 Rate Limiting 해결 전략

Context

GoatCounter의 기본 대시보드가 제공하는 시각화 기능의 부재를 해결하기 위한 커스텀 대시보드 구축 사례임. 서버리스 환경 및 개인정보 보호를 위해 별도의 백엔드 없이 브라우저에서 API로 직접 통신하는 구조를 지향함.

Technical Solution

• Build Step 제거를 위해 React와 Recharts를 CDN으로 로드하고 Babel Standalone을 통한 In-browser JSX 컴파일 방식 채택
• Token-bucket 방식의 API Rate Limit(4 req/s) 대응을 위해 순차적 요청 큐(Strict-sequential Queue)와 요청 간 500ms 간격 유지 로직 구현
• 초기 로딩 지연을 방지하고자 IntersectionObserver를 활용한 4단계 Lazy Loading 계층 설계
• D3.js의 무거운 런타임 오버헤드를 피하기 위해 TopoJSON을 미리 SVG Path로 변환한 정적 JS 파일(27KB)을 별도 로드하여 렌더링 최적화
• Babel의 재컴파일 비용을 줄이기 위해 대용량 맵 데이터 파일을 Babel 처리 대상에서 제외한 일반 Script 태그로 분리