Published on

🌏 i18n Key Translator

Marketplace : πŸ”—
Github : πŸ”—

ν”„λ‘œμ νŠΈ μ†Œκ°œ

κ΅­μ œν™”(i18n) μž‘μ—… ν›„ μ½”λ“œλ₯Ό νŽΈμ§‘ν•˜λŠ” κ³Όμ •μ—μ„œ λ²ˆμ—­ ν‚€μ˜ μ‹€μ œ ν…μŠ€νŠΈλ₯Ό ν™•μΈν•˜κΈ° μœ„ν•΄ 맀번 JSON νŒŒμΌμ„ μ—΄μ–΄λ³΄λŠ” λ²ˆκ±°λ‘œμ›€μ„ ν•΄κ²°ν•œ VS Code ν™•μž₯ ν”„λ‘œκ·Έλž¨μž…λ‹ˆλ‹€. κ°œλ°œμžκ°€ μ½”λ“œ νŽΈμ§‘ 쀑 λ²ˆμ—­ 킀에 마우슀λ₯Ό μ˜¬λ¦¬κ±°λ‚˜ λͺ…령을 μ‹€ν–‰ν•˜λ©΄ 파일 이동 없이 μ¦‰μ‹œ μ‹€μ œ λ²ˆμ—­ ν…μŠ€νŠΈλ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. ν˜„μž¬ VS Code 곡식 λ§ˆμΌ“ν”Œλ ˆμ΄μŠ€μ— λ°°ν¬λ˜μ–΄ 있으며, React, Vue, Angular λ“± 6개의 μ£Όμš” i18n 라이브러리λ₯Ό μ§€μ›ν•©λ‹ˆλ‹€.

핡심 κΈ°λŠ₯

에디터 λ‚΄ μ¦‰μ‹œ 미리보기
μ½”λ“œλ₯Ό λ– λ‚˜μ§€ μ•Šκ³  i18n ν‚€μ˜ μ‹€μ œ λ²ˆμ—­μ„ ν˜Έλ²„ 툴팁으둜 μ¦‰μ‹œ 확인
닀쀑 라이브러리 프리셋
React-i18next, Vue-i18n, Angular λ“± 6개 라이브러리의 νŒ¨ν„΄μ„ ν”„λ¦¬μ…‹μœΌλ‘œ 제곡
μœ μ—°ν•œ 경둜 μ„€μ •
Glob νŒ¨ν„΄μœΌλ‘œ ν”„λ‘œμ νŠΈλ³„ λ‹€μ–‘ν•œ λ²ˆμ—­ 파일 경둜 ꡬ쑰 지원
νŒ¨ν„΄ ν…ŒμŠ€νŠΈ 도ꡬ
ν˜„μž¬ νŒŒμΌμ—μ„œ κ°μ§€λœ λͺ¨λ“  λ²ˆμ—­ ν‚€λ₯Ό ν…Œμ΄λΈ”λ‘œ μ‹œκ°ν™”ν•˜μ—¬ νŒ¨ν„΄ 검증

μ‚¬μš© 기술

TypeScript
νƒ€μž… μ•ˆμ •μ„±κ³Ό VS Code API ν†΅ν•©μœΌλ‘œ μ•ˆμ •μ μΈ ν™•μž₯ 개발
VS Code Extension API
HoverProvider, FileSystemWatcher, WebviewPanel, commands API ν™œμš©
μ •κ·œμ‹ νŒ¨ν„΄ 맀칭
λΌμ΄λΈŒλŸ¬λ¦¬λ³„ μ΅œμ ν™”λœ μ •κ·œμ‹μœΌλ‘œ μ •ν™•ν•œ ν‚€ 감지
캐싱 μ „λž΅
LFU μ•Œκ³ λ¦¬μ¦˜, ν‰λ©΄ν™”λœ 맡, λ¬Έμ„œ 버전 기반 닀쀑 레벨 μΊμ‹œ
Glob νŒ¨ν„΄
동적 파일 νƒμƒ‰μœΌλ‘œ λ‹€μ–‘ν•œ ν”„λ‘œμ νŠΈ ꡬ쑰 지원
Webpack
λ²ˆλ“€λ§μ„ ν†΅ν•œ ν™•μž₯ ν”„λ‘œκ·Έλž¨ μ΅œμ ν™” 및 배포

β—ΌοΈŽ ν”„λ‘œμ νŠΈ 이슈

닀쀑 라이브러리 νŒ¨ν„΄ 지원

문제 상황

React-i18next, Vue-i18n, Angular λ“± 각 λΌμ΄λΈŒλŸ¬λ¦¬λ§ˆλ‹€ μ„œλ‘œ λ‹€λ₯Έ 문법과 호좜 방식을 μ‚¬μš©ν•˜μ—¬ 단일 μ •κ·œμ‹μœΌλ‘œλŠ” λͺ¨λ“  νŒ¨ν„΄μ„ 컀버할 수 μ—†μ—ˆμŠ΅λ‹ˆλ‹€. t('key'), $t('key'), 'key' | translate, <FormattedMessage id="key" /> λ“± λ‹€μ–‘ν•œ ν˜•νƒœλ₯Ό 지원해야 ν–ˆμŠ΅λ‹ˆλ‹€.

해결방법

λΌμ΄λΈŒλŸ¬λ¦¬λ³„ μ΅œμ ν™”λœ μ •κ·œμ‹ νŒ¨ν„΄μ„ ν”„λ¦¬μ…‹μœΌλ‘œ 사전 μ •μ˜ν•˜κ³ , Configuration ν΄λž˜μŠ€μ—μ„œ 프리셋 μ „ν™˜μ„ μ§€μ›ν–ˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ μ‚¬μš©μž μ •μ˜ νŒ¨ν„΄λ„ ν—ˆμš©ν•˜μ—¬ ν™•μž₯성을 ν™•λ³΄ν–ˆκ³ , WebviewPanel 기반 νŒ¨ν„΄ ν…ŒμŠ€νŠΈ 도ꡬλ₯Ό μ œκ³΅ν•˜μ—¬ ν˜„μž¬ νŒŒμΌμ—μ„œ νŒ¨ν„΄μ΄ μ œλŒ€λ‘œ λ™μž‘ν•˜λŠ”μ§€ μ¦‰μ‹œ 검증할 수 있게 ν–ˆμŠ΅λ‹ˆλ‹€.

결과 및 배운점

6개의 μ£Όμš” i18n 라이브러리λ₯Ό λͺ¨λ‘ μ§€μ›ν•˜λŠ” λ²”μš© ν™•μž₯으둜 λ°œμ „ν–ˆμŠ΅λ‹ˆλ‹€. μ„€μ • μŠ€ν‚€λ§ˆ μ„€κ³„μ˜ μ€‘μš”μ„±κ³Ό μ‚¬μš©μž ν”Όλ“œλ°±μ„ ν†΅ν•œ UX κ°œμ„ μ˜ κ°€μΉ˜λ₯Ό λ°°μ› μŠ΅λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈλ³„ 경둜 차이

문제 상황

ν”„λ‘œμ νŠΈλ§ˆλ‹€ i18n λ²ˆμ—­ 파일의 μœ„μΉ˜κ°€ μ œκ°κ°μ΄μ—ˆμŠ΅λ‹ˆλ‹€. ./src/locales/, ./public/locales/, ./i18n/ λ“± λ‹€μ–‘ν•œ 폴더 ꡬ쑰λ₯Ό μ‚¬μš©ν•˜λŠ” ν”„λ‘œμ νŠΈλ“€μ΄ μ‘΄μž¬ν–ˆκ³ , ν•˜λ“œμ½”λ”©λœ κ²½λ‘œλ‘œλŠ” λ²”μš©μ„±μ„ 확보할 수 μ—†μ—ˆμŠ΅λ‹ˆλ‹€.

해결방법

Glob νŒ¨ν„΄μ„ ν™œμš©ν•œ μœ μ—°ν•œ 경둜 μ„€μ • μ‹œμŠ€ν…œμ„ κ΅¬μΆ•ν–ˆμŠ΅λ‹ˆλ‹€. * μ™€μΌλ“œμΉ΄λ“œλ‘œ μ–Έμ–΄ μ½”λ“œ μœ„μΉ˜λ₯Ό 지정할 수 있게 ν•˜κ³ , λ°°μ—΄ ν˜•νƒœλ‘œ μ—¬λŸ¬ 경둜 νŒ¨ν„΄μ„ λ™μ‹œμ— μ§€μ›ν•˜λ„λ‘ μ„€κ³„ν–ˆμŠ΅λ‹ˆλ‹€. νŒ¨ν„΄ νŒŒμ‹± λ‘œμ§μ„ 톡해 μžλ™μœΌλ‘œ μ–Έμ–΄ μ½”λ“œλ₯Ό μΆ”μΆœν•˜λ„λ‘ κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.

결과 및 배운점

λ‹€μ–‘ν•œ ν”„λ‘œμ νŠΈ κ΅¬μ‘°μ—μ„œ μ¦‰μ‹œ μ‚¬μš© κ°€λŠ₯ν•œ ν™•μž₯이 λ˜μ—ˆμŠ΅λ‹ˆλ‹€. λ²”μš© 도ꡬ 개발 μ‹œ μ„€μ •μ˜ μœ μ—°μ„±μ΄ UXλ₯Ό 크게 μ’Œμš°ν•œλ‹€λŠ” 점을 μ²΄κ°ν–ˆκ³ , μ‹€μ œ μ‚¬μš©μž μ‹œλ‚˜λ¦¬μ˜€λ₯Ό κ³ λ €ν•œ μ„€κ³„μ˜ μ€‘μš”μ„±μ„ λ°°μ› μŠ΅λ‹ˆλ‹€.

μ‹€μ‹œκ°„ λ³€κ²½ 감지와 μ„±λŠ₯ μ΅œμ ν™”

문제 상황

λ²ˆμ—­ 파일이 μˆ˜μ •λ  λ•Œλ§ˆλ‹€ ν™•μž₯을 λ‹€μ‹œ λ‘œλ“œν•˜λŠ” 것은 λΉ„νš¨μœ¨μ μ΄λ©°, λ™μ‹œμ— 맀 ν˜Έλ²„λ§ˆλ‹€ JSON νŒŒμΌμ„ νŒŒμ‹±ν•˜κ³  쀑첩 객체λ₯Ό νƒμƒ‰ν•˜λŠ” 것은 μ„±λŠ₯ μ €ν•˜λ₯Ό μœ λ°œν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

해결방법

FileSystemWatcher둜 λ²ˆμ—­ 파일 변경을 μ‹€μ‹œκ°„ κ°μ§€ν•˜κ³ , 3단계 캐싱 μ „λž΅μ„ κ΅¬μΆ•ν–ˆμŠ΅λ‹ˆλ‹€: (1) ν‰λ©΄ν™”λœ 맡으둜 O(1) 쑰회, (2) LFU μ•Œκ³ λ¦¬μ¦˜μœΌλ‘œ 자주 μ“°λŠ” ν‚€ μš°μ„  보쑴(3000개 ν•­λͺ© μ œν•œ), (3) λ¬Έμ„œ 버전 기반 μœ„μΉ˜ μΊμ‹±μœΌλ‘œ μ •κ·œμ‹ μž¬μ‹€ν–‰ μ΅œμ†Œν™”.

결과 및 배운점

ν˜Έλ²„ 응닡 속도λ₯Ό λ‹¨μΆ•ν•˜κ³  λ©”λͺ¨λ¦¬ μ‚¬μš©λŸ‰λ„ μ΅œμ ν™”ν–ˆμŠ΅λ‹ˆλ‹€. ν™•μž₯ ν”„λ‘œκ·Έλž¨μ—μ„œλ„ μ μ ˆν•œ 캐싱 μ „λž΅μ΄ UX에 큰 영ν–₯을 λ―ΈμΉœλ‹€λŠ” 것과, VS Code API의 λ‹€μ–‘ν•œ 이벀트λ₯Ό ν™œμš©ν•œ 효율적인 λ¦¬μ†ŒμŠ€ 관리 방법을 λ°°μ› μŠ΅λ‹ˆλ‹€.