피드로 돌아가기
Dev.toFrontend
원문 읽기
CDN Lazy-Loading을 통한 4MB 사전 기반 브라우저 내 일본어 Furigana 구현
Auto-Furigana in the Browser — Lazy-Loading kuromoji.js's 4 MB Dictionary from a CDN to Annotate Japanese Kanji With Their Readings
AI 요약
Context
일본어 한자 읽기(Furigana) 제공을 위해 서버 기반 API를 사용할 경우 데이터 제어권 상실 및 네트워크 오버헤드 발생. 클라이언트 사이드 구현 시 대용량 사전 데이터(4MB)로 인한 초기 로딩 속도 저하와 번들 크기 증가가 주요 병목 지점으로 작용.
Technical Solution
- jsDelivr CDN을 활용한 4MB kuromoji.js 사전 파일의 Lazy-Loading 구조 설계
- DOM 의존성을 제거한 Pure Logic 모듈(yomi.js) 분리를 통한 Unit Test 가능성 확보 및 테스트 효율성 증대
- Unicode Codepoint Shift(U+30A1-U+30F6 → -0x60)를 적용한 Katakana의 Hiragana 변환 로직 구현
- Long-vowel mark(ー) 등 예외 범위를 고려한 정밀한 정규표현식([ァ-ヶ]) 적용으로 데이터 무결성 유지
- 및 HTML 태그를 활용한 브라우저 네이티브 렌더링 방식 채택
- OOV(Out-of-Vocabulary) 토큰 및 중복 표기 방지를 위한 3단계 필터링 Predicate 설계
실천 포인트
1. 대용량 라이브러리 도입 시 번들 포함 여부와 CDN 캐시 활용 이득을 비교 검토할 것
2. 외부 라이브러리 의존 로직을 DOM-free 순수 함수로 분리하여 테스트 가능성을 확보할 것
3. 문자열 변환 시 유니코드 범위의 엣지 케이스(특수 기호, 장음 등)를 정밀하게 정의할 것