2 min read

다국어 자동화 JSON Format v4 관련 업데이트

다국어 자동화 JSON Format v4 관련 업데이트
Photo by Lucas George Wendt / Unsplash

기존의 훌륭한 가이드를 최근 다시 새로운 프로젝트에 적용하는 중에, i18next 버전 업데이트 이슈가 발생하여, 정리 필요

국제화(i18n) 자동화 가이드 : NHN Cloud Meetup
프런트엔드 개발을 하다 보면 국제화와 번역을 수작업과 막일로 하는 경우가 있습니다.”복붙”이나 반복적인 수작업으로 인해 고통받는 모든 프런트엔드 개발자를 자동화 가이드를 작성하였습니다. 단 한 줄의 스크립트 실행으로 자유를 찾읍시다.
NHN Cloud Meetup

아래 링크 문서에 따르면, i18next는 v21부터 JSON Format v4로 넘어갔는데, 기존 code scanning을 담당하던 i18next-scanner가 아직 v3만 지원하고 있음
복수형 표현에 대한 기준이 달라져서, 기존 v3를 마이그레이션 해야 함

Plurals - i18next documentation
i18next documentation

기존 JSON에 대한 업데이트 적용은 위 링크에서 소개되는 tool을 활용하면 되고, 새롭게 code상 번역 key 추출하는 라이브러리는 i18next-parser를 setup하여 사용

Plugins and Utils - i18next documentation
i18next documentation
{
  "ko-KR": {
    "ko-KR": "한국어",
    "en-US": "영어",
    "vi-VN": "베트남어",
    "th-TH": "태국어"
  },
  "en-US": {
    "ko-KR": "Korean",
    "en-US": "English",
    "vi-VN": "Vietnamese",
    "th-TH": "Thai",
    "현재 사용 언어": "Current language"
  },
  "th-TH": {
    "ko-KR": "เกาหลี",
    "en-US": "ภาษาอังกฤษ",
    "vi-VN": "เวียตนาม",
    "th-TH": "ไทย",
    "현재 사용 언어": "ภาษาปัจจุบัน"
  },
  "vi-VN": {
    "ko-KR": "Hàn Quốc",
    "en-US": "Tiếng Anh",
    "vi-VN": "Tiếng Việt",
    "th-TH": "tiếng Thái",
    "현재 사용 언어": "ngôn ngữ hiện tại"
  }
}
default-pack.json
const path = require("path");
const localeDefaultPack = require("./default-pack.json");

const COMMON_EXTENSIONS = "**/*.{js,jsx,ts,tsx,vue,html}";

module.exports = {
  createOldCatalogs: false,
  keepRemoved: true,
  keySeparator: false,
  locales: Object.keys(localeDefaultPack),
  namespaceSeparator: false,
  output: path.join(__dirname, "..", "locales", "$LOCALE", "$NAMESPACE.json"),
  input: [
    `../components/${COMMON_EXTENSIONS}`,
    `../pages/${COMMON_EXTENSIONS}`,
    // Use ! to filter out files or directories
    "!**/node_modules/**",
    "!../.next/**",
  ],
};
i18next-parser.config.js
Yang Taegyu

Yang Taegyu