React 앱의 국제화 설계: 확장 가능한 지역화에 대한 종합 가이드-JS 튜토리얼-php.cn

Architecting Internationalization In React Apps: Comprehensive Guide to Scalable Localization

소개

지난 3개월 동안 저는 메가 SaaS 아이디어를 혼자서 작업해 왔습니다. 흥미진진한 여정이었지만 도전도 엄청났습니다. 지난 2주가 다가오면서 품질을 유지하면서 우선순위가 높은 사용 사례를 제공하는 것이 최우선 과제였습니다.

제가 직면한 주요 결정 중 하나는 여러 언어를 지원하기 위해 국제화(i18n)를 통합할지 여부였습니다. 처음에는 영어 전용 버전을 출시하고 향후 번역을 위해 LLM을 활용하는 방향으로 기울었습니다. 하지만 1인 팀으로서 당분간은 수익성이 좋은 단일 시장에 집중하기로 결정했습니다.

내 프로젝트에서는 선택 사항이지만 법률 및 규제 요구 사항으로 인해 전문적인 환경에서는 국제화가 필수적입니다. 이 블로그에서는 복잡성이 높거나 구조가 열악한 등의 위험을 피하면서 확장 가능하고 효율적인 i18n 아키텍처를 설계하는 방법을 살펴봅니다. 이는 개인 개발자와 팀 모두에게 도움이 될 수 있는 통찰력입니다.

내 프로젝트에 i18n을 구현하지 않기로 결정했기 때문에 다른 사람들과 미래의 나 자신을 돕기 위해 이 가이드를 공유합니다.

목표

좋은 국제화 시스템은 다음을 충족해야 합니다.

확장성: 번역 및 언어 업데이트를 위해 팀 간 원활한 협업을 지원합니다.
모듈성: 오버헤드 없이 쉽게 확장할 수 있는 간단한 구조를 유지합니다.
예측 가능성: 일관되고 시행 가능한 현지화 패턴을 따르세요.
초보자 친화적: 다양한 기술 수준의 개발자가 접근할 수 있습니다.

사용 가능한 도구

JavaScript의 국제화를 위해 널리 사용되는 도구는 다음과 같습니다.

i18next: 확장 가능하고 전문가 수준의 현지화에 이상적인 성숙하고 기능이 풍부한 라이브러리입니다.
대안: FormatJS, Polyglot.js, LinguiJS, GlobalizeJS, Fluent by Mozilla.

각 도구에는 장단점이 있습니다. 단순화를 위해 이 가이드에서는 i18next에 중점을 둡니다.

아키텍처 설계

국제화를 위한 폴더 구조

아키텍처는 세 가지 주요 구성 요소가 포함된 i18n 폴더를 중심으로 합니다.

번역 폴더: 각 언어에 대한 JSON 파일(예: en.json, ar.json, ch.json)과 새 언어에 대한 base.json 템플릿을 저장합니다.
index.js: i18n 라이브러리(예: i18next)를 구성 및 초기화하고 대체 언어 및 기타 옵션을 설정합니다.
keys.js: 번역 키를 정의하는 중앙 집중식 구조로 일관성을 보장하고 중복을 방지합니다.

예제 폴더 구조:

src/
├── i18n/
│   ├── translations/
│   │   ├── en.json       # English translations
│   │   ├── ar.json       # Arabic translations
│   │   ├── ch.json       # Chinese translations
│   │   └── base.json     # Template for new languages
│   ├── index.js          # i18n configuration
│   └── keys.js           # Centralized keys for consistency

로그인 후 복사

key.js를 중앙 허브로 사용

keys.js 파일은 프로젝트의 구조를 반영하여 기능이나 모듈별로 키를 그룹화합니다. 이러한 구조를 통해 키 관리가 직관적이고 확장 가능해졌습니다.

예 key.js:

const keys = {
  components: {
    featureA: {
      buttonText: "components.featureA.buttonText",
      label: "components.featureA.label",
    },
    featureB: {
      header: "components.featureB.header",
    },
  },
};

export default keys;

로그인 후 복사

번역 파일

번역 JSON 파일은 key.js의 구조와 일치하여 일관성을 보장합니다.

예 en.json:

{
  "components": {
    "featureA": {
      "buttonText": "Submit",
      "label": "Enter your name"
    },
    "featureB": {
      "header": "Welcome to Feature B"
    }
  }
}

로그인 후 복사

예 ar.json:

{
  "components": {
    "featureA": {
      "buttonText": "إرسال",
      "label": "أدخل اسمك"
    },
    "featureB": {
      "header": "مرحبًا بكم في الميزة ب"
    }
  }
}

로그인 후 복사

i18next 설정

i18next 및 React 통합 설치:

npm install i18next react-i18next

로그인 후 복사

i18n/index.js:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./translations/en.json";
import ar from "./translations/ar.json";

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, ar: { translation: ar } },
  lng: "en", // Default language
  fallbackLng: "en",
  interpolation: { escapeValue: false }, // React handles escaping
});

export default i18n;

로그인 후 복사

i18n을 구성 요소에 통합

예제 구성 요소(FeatureA):

import React from "react";
import { useTranslation } from "react-i18next";
import keys from "../../i18n/keys";

const FeatureA = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>Feature A</h2>
      <button>{t(keys.components.featureA.buttonText)}</button>
      <label>{t(keys.components.featureA.label)}</label>
    </div>
  );
};

export default FeatureA;

로그인 후 복사

언어 전환기 추가

언어 전환기를 사용하면 언어 간 전환이 가능합니다.

LanguageSwitcher.jsx:

import React from "react";
import { useTranslation } from "react-i18next";

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("ar")}>العربية</button>
    </div>
  );
};

export default LanguageSwitcher;

로그인 후 복사

최종 폴더 구조

src/
├── components/
│   ├── featureA/
│   │   ├── index.jsx
│   │   └── featureAStyles.css
│   └── shared/
│       └── LanguageSwitcher.jsx
├── i18n/
│   ├── translations/
│   │   ├── en.json
│   │   ├── ar.json
│   │   └── base.json
│   ├── keys.js
│   └── index.js
├── App.jsx
├── index.js

로그인 후 복사

너머로

번역에 AI 활용: 빠른 번역을 위해 LLM을 사용하세요. 예를 들어 프롬프트는 다음과 같습니다.

"다음 JSON을 중국어로 번역합니다: {en.json의 내용}."
백엔드 기반 번역: 백엔드에서 번역을 중앙 집중화하여 코드 배포 없이 동적 업데이트를 가능하게 합니다. 옵션에는 GitOps 또는 전용 백엔드 서비스가 포함됩니다.