피드로 돌아가기
Dev.toFrontend
원문 읽기
Zero-dependency Vanilla JS 기반 다국어 뉴스 검색 엔진 아키텍처 설계
How I built a multilingual news SPA in vanilla JS — architecture notes
AI 요약
Context
복잡한 프레임워크와 번들러 없이 순수 JavaScript만으로 실시간 뉴스 검색 SPA 구현을 목표로 함. 외부 라이브러리 의존성을 배제한 상태에서 상태 관리의 일관성과 다국어 검색 정확도를 확보해야 하는 제약 상황임.
Technical Solution
- 정적 의존성 순서 기반의 모듈 로딩 구조를 통한 런타임 종속성 해결
- 전역 Flat Object 기반의 Single State Store 설계를 통한 데이터 흐름의 가시성 확보
- 단순 UI 번역을 넘어 검색 키워드 자체를 언어별로 매핑하는 TOPIC_KEYWORDS Map 구조 도입
- URL 호스트 분석 및 Geo-restricted 리스트 대조를 통한 국가 제한 사이트 사전 탐지 로직 구현
- API 응답 에러 타입별 매핑 테이블을 통한 컨텍스트 기반의 다국어 에러 핸들링 체계 구축
- 로컬 파일 시스템(file://) 실행 제약을 극복하기 위한 Non-ES Module 스크립트 로딩 방식 채택
실천 포인트
1. 상태 관리 라이브러리 도입 전, 단순한 Flat Object와 명시적 Render 함수 호출로 추적 가능성 검토
2. i18n 설계 시 UI 텍스트뿐만 아니라 API 쿼리 파라미터의 언어별 최적화 필요성 고려
3. 사용자 경험 개선을 위한 외부 API 에러 코드의 세분화된 매핑 및 복구 액션 정의
4. 배포 환경의 제약(예: Serverless, Local File)에 따른 모듈 시스템(ESM vs Script) 선택 기준 수립