🔧
i18n-wrapper
한국어 텍스트를 자동으로 t()로 감싸고 import를 추가합니다
개요
i18n-wrapper는 코드에서 하드코딩된 한국어 텍스트를 자동으로 감지하여 t() 함수로 래핑하고, 필요한 import 문을 추가하는 CLI 도구입니다.
✓JSX 요소 내 한국어 텍스트 자동 감지
✓문자열 리터럴 및 템플릿 리터럴 지원
✓이미 래핑된 텍스트 자동 건너뛰기
✓useTranslation import 자동 추가
✓코드 포매팅 보존
설치
전역 설치 (권장):
npm install -g i18nexus-tools또는 npx로 직접 실행:
npx i18n-wrapper기본 사용법
전체 앱 디렉토리 처리
npx i18n-wrapper --pattern "app/**/*.tsx"app 디렉토리 내 모든 .tsx 파일에서 한국어 텍스트를 래핑합니다.
미리보기 모드
npx i18n-wrapper --dry-run파일을 수정하지 않고 어떤 변경사항이 있을지 미리 확인합니다.
특정 파일만 처리
npx i18n-wrapper --pattern "app/page.tsx"단일 파일만 처리합니다.
변환 예제
이전
export default function Welcome() {
return (
<div>
<h1>환영합니다</h1>
<p>i18nexus 사용법</p>
<button>시작하기</button>
</div>
);
}이후
import { useTranslation } from "i18nexus";
export default function Welcome() {
const { t } = useTranslation();
return (
<div>
<h1>{t("환영합니다")}</h1>
<p>{t("i18nexus 사용법")}</p>
<button>{t("시작하기")}</button>
</div>
);
}복잡한 예제
이전:
const title = "제목";
const msg = \`안녕하세요 \${name}님\`;
return (
<div title="툴팁 텍스트">
<p>{"문자열"}</p>
</div>
);이후:
const { t } = useTranslation();
const title = t("제목");
const msg = t(\`안녕하세요 \${name}님\`);
return (
<div title={t("툴팁 텍스트")}>
<p>{t("문자열")}</p>
</div>
);명령어 옵션
--pattern, -p문자열처리할 파일의 glob 패턴을 지정합니다.
--pattern "app/**/*.{ts,tsx}"--dry-run플래그실제로 파일을 수정하지 않고 변경사항만 미리 확인합니다.
--help, -h플래그도움말 메시지를 표시합니다.
스마트 감지 기능
자동으로 처리되는 경우:
- ✓JSX 텍스트 노드
<div>한국어 텍스트</div> → <div>{t("한국어 텍스트")}</div> - ✓JSX 속성값
<div title="제목"> → <div title={t("제목")}> - ✓문자열 리터럴
const text = "안녕"; → const text = t("안녕"); - ✓템플릿 리터럴
const msg = \`안녕 \${name}\`; → const msg = t(\`안녕 \${name}\`);
자동으로 건너뛰는 경우:
- ⊗이미 t()로 래핑된 텍스트
- ⊗영어만 포함된 텍스트
- ⊗숫자나 특수문자만 포함된 텍스트
- ⊗주석 내부의 텍스트
모범 사례
먼저 dry-run으로 확인하기
실제 파일을 수정하기 전에 --dry-run 옵션으로 변경사항을 미리 확인하세요.
npx i18n-wrapper --dry-run버전 관리 시스템 사용
Git 등의 버전 관리를 사용하여 변경사항을 되돌릴 수 있도록 준비하세요.
작은 범위부터 시작
처음에는 단일 파일이나 작은 디렉토리부터 시작하여 결과를 확인하세요.
수동 검토 필요
자동 변환 후에는 항상 변경된 파일들을 검토하여 의도하지 않은 변경이 없는지 확인하세요.