프론트엔드
기존 서비스 국제화(i18n) 작업 쉽게 덜어내기: t 함수 자동 래핑 스크립트 만들기
두줄요약
AST 기반 스크립트로 기존 서비스의 한글 텍스트를 `t` 함수와 번역 JSON으로 자동 변환했습니다. 한글 키 방식과 경로별 설정으로 i18n 전환 작업의 속도와 협업 효율을 높였습니다.
문제 상황
- 기존 React·Next.js 서비스의 한글 UI를 다국어 지원 구조로 전환해야 하는 반복 작업
- 번역 키 수동 정의와
t함수 래핑에 소요되는 높은 작업 시간
선택 이유
- 키 탐색과 협업 직관성을 높이는 한글 키 방식 채택
- 빠른 구현과 개발·디자인 팀의 작업 효율성 우선
구조와 흐름
- Babel parser·traverse·generator 기반 AST 분석으로 한글 텍스트 탐색·변환
- T Wrapper로 FunctionLike 내부의 문자열·JSX·조건식·템플릿 리터럴을
t함수로 래핑 - Extractor로 프로젝트 전반의 한글을 추출해 언어별 JSON 자원 파일 생성
성능/운영 포인트
- 최상위 컴포넌트·커스텀 훅에만
useTranslation훅 삽입 - React·Next.js 환경, 대상·제외 경로를 YAML 설정으로 분리
- 스크립트 두 번 실행과 특정 도메인 번역 5시간 완료 사례로 반복 작업 단축
