피드로 돌아가기
Dev.toFrontend
원문 읽기
가상 웹 서버 구현으로 React SPA 초기 로딩 77ms 및 캐시 리로드 2ms 달성
I Served My React SPA from Android Assets Like a Professional Web Server
AI 요약
Context
Android WebView에서 React SPA 구동 시 Capacitor 등 런타임의 무거운 오버헤드와 file:// 프로토콜의 CORS 제약 및 SPA Routing 깨짐 현상 발생. 가벼운 종속성으로 웹 표준 아키텍처를 유지하며 고성능 오프라인 환경을 제공하는 최적의 서빙 구조 필요.
Technical Solution
- WebView 내부에 가상 웹 서버를 시뮬레이션하는 WebVirt Engine 도입을 통한 https://app.local 가상 호스트 매핑
- assets/ 폴더의 정적 리소스를 인터셉트하여 응답하는 내부 경로 처리 로직 설계
- LRU Cache 기반의 메모리 캐싱 전략을 통한 반복 리소스 요청의 Disk I/O 제거
- Strategy Pattern을 적용한 PathHandlers 설계로 유연한 경로 매핑 및 리소스 처리 가능
- Builder Pattern 기반의 Fluent API를 통한 설정 복잡도 최소화 및 가독성 확보
- Decorator Pattern을 활용한 Lifecycle 관리로 리소스 로딩 최적화
실천 포인트
- WebView 기반 SPA 구현 시 file:// 대신 가상 호스트 매핑을 통한 CORS 문제 해결 검토 - 반복적인 정적 리소스 접근이 많은 경우 메모리 내 LRU Cache 도입으로 I/O 병목 제거 - 라이브러리 설계 시 Strategy 및 Builder 패턴을 적용해 확장성과 설정 편의성 확보 - 정량적 성능 검증을 위해 프로덕션 환경과 유사한 Metrics 모듈을 설계하여 실측 데이터 확보