Moait
홈인기 피드모든 블로그모든 태그
홈인기 피드모든 블로그모든 태그

기존 서비스 국제화(i18n) 작업 쉽게 덜어내기: t 함수 자동 래핑 스크립트 만들기

인프랩 favicon인프랩·Frontend·
TypeScriptReactJavaScript
2025년 02월 06일0

AI 요약

이 글은 AI가 요약했어요. 정확한 내용은 꼭 원문을 확인해 주세요!

핵심 요약

인프랩이 Next.js 기반 다국어 적용을 위한 AST 기반 자동화 파이프라인을 구축해, 한글 텍스트를 t 함수로 래핑하는 스크립트와 번역 자원 자동 생성 과정을 제시했습니다.

구현 방법

  • Babel 생태계의 @babel/parser, @babel/traverse, @babel/generator를 활용한 AST 분석 및 재생성
  • T Wrapper: FunctionLike 노드를 대상으로 한글 텍스트를 t로 래핑하는 흐름 구현
  • Extractor: T Wrapper와 별개로 한글 텍스트를 추출해 i18n 자원 JSON 파일 자동 생성
  • 컨벤션 선정: 한글 키 방식, 역할군 기반 키 방식, 영어 키 방식 3가지 비교 후 한글 키 방식 채택
  • 자동화 흐름: 한글 식별→t 래핑, useTranslation 훅 적용 조건 충족 시 훅 주입, 파일 최상단 import 추가, 레포별 설정(i18n-automation.config.yaml) 반영
  • 스크립트 도입: t-wrap 및 extract 명령으로 팀 협업 생산성 확보

주요 결과

  • 한글 텍스트를 자동으로 래핑하고 자원을 생성하는 파이프라인 구축
  • 특정 도메인 전체의 번역을 단 5시간 만에 완료했다는 사례가 보고되어 생산성 향상의 가능성이 확인됨

연관 피드

%가 높을수록 이 글과 비슷할 가능성이 높아요!
No Image
74%

모노레포 환경에서 i18next 다국어 시스템 구축하기

무신사 favicon무신사·2026년 03월 08일
현대차·기아에서 프론트엔드 개발에 다국어를 지원하며 협업하는 법 (feat. i18n) 섬네일
74%

현대차·기아에서 프론트엔드 개발에 다국어를 지원하며 협업하는 법 (feat. i18n)

현대자동차 favicon현대자동차·2025년 02월 06일
GatsbyJS에서 l10n(지역화) 지원하기 (간단한 함수형을 곁들인) 섬네일
67%

GatsbyJS에서 l10n(지역화) 지원하기 (간단한 함수형을 곁들인)

데브시스터즈 favicon데브시스터즈·2022년 04월 19일