React 앱의 국제화 설계: 확장 가능한 지역화에 대한 종합 가이드

소개

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

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

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

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

---

목표

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

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

---

사용 가능한 도구

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

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

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

---

아키텍처 설계

국제화를 위한 폴더 구조

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

1. 번역 폴더: 각 언어에 대한 JSON 파일(예: en.json, ar.json, ch.json)과 새 언어에 대한 base.json 템플릿을 저장합니다.

2. index.js: i18n 라이브러리(예: i18next)를 구성 및 초기화하고 대체 언어 및 기타 옵션을 설정합니다.

3. 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

---

너머로

1. 번역에 AI 활용: 빠른 번역을 위해 LLM을 사용하세요. 예를 들어 프롬프트는 다음과 같습니다.
   
   "다음 JSON을 중국어로 번역합니다: {en.json의 내용}."

2. 백엔드 기반 번역: 백엔드에서 번역을 중앙 집중화하여 코드 배포 없이 동적 업데이트를 가능하게 합니다. 옵션에는 GitOps 또는 전용 백엔드 서비스가 포함됩니다.

---

데모

샌드박스: https://codesandbox.io/p/sandbox/785hpz

---

결론

국제화는 애플리케이션을 전 세계적으로 확장하기 위한 중요한 단계입니다. 이 가이드를 따르면 솔로 프로젝트나 대규모 팀을 위한 원활한 현지화를 지원하는 확장 가능하고 모듈식이며 초보자 친화적인 아키텍처를 갖게 됩니다.

즐거운 코딩하세요!

— Ahmed R. Aldhafeeri

위 내용은 React 앱의 국제화 설계: 확장 가능한 지역화에 대한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!