react-i18next로 다국어 구현하기 3강: i18next 초기 설정

i18next 초기 설정

다음 단계에서는 i18next를 사용하여 다국어 기능을 초기화하고 설정하는 방법을 알아보겠습니다. 우리는 i18n.js 파일을 생성하여 프로젝트에서 사용할 언어 리소스를 정의하고, 각 언어에 대한 번역 파일을 JSON 형식으로 생성할 것입니다. 이를 통해 React 애플리케이션이 다국어로 콘텐츠를 제공할 수 있게 됩니다.

2강 내용의 상세 설명 입니다.

React 프로젝트에서 i18next 설정 과정

---

1. i18next 설정 파일 생성 (i18n.js)

먼저 i18n.js라는 파일을 생성하여 i18next를 초기화하고 설정합니다. 이 파일에서는 사용할 언어 리소스와 기본 언어, Fallback 언어를 정의합니다.

src/i18n.js 파일 생성 및 초기화:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 번역 리소스 설정
const resources = {
  en: {
    translation: require('./locales/en/translation.json'),
  },
  ko: {
    translation: require('./locales/ko/translation.json'),
  },
  ar: {
    translation: require('./locales/ar/translation.json'),
  },
};

// i18next 초기화
i18n
  .use(initReactI18next) // React에 i18next 연결
  .init({
    resources, // 리소스 설정
    lng: 'en', // 기본 언어 설정 (영어)
    fallbackLng: 'en', // 지원하지 않는 언어가 선택될 경우 영어로 Fallback
    interpolation: {
      escapeValue: false, // React는 XSS 공격을 자동으로 방지하므로 추가 설정 불필요
    },
  });

export default i18n;

 

이 코드에서 **resources**는 각 언어에 대한 번역 파일을 가리키며, lng는 기본 언어를 정의합니다. 여기서는 영어(en)가 기본 언어로 설정되어 있습니다. 만약 사용자가 지원하지 않는 언어를 선택하면 fallbackLng 옵션에 따라 영어로 대체됩니다.

i18n.js 파일 내용

---

2. 각 언어에 대한 JSON 리소스 파일 생성 (한국어, 영어, 아랍어)

이제 각 언어에 대해 번역 리소스 파일을 JSON 형식으로 생성합니다. locales 폴더 아래에 각 언어별 폴더를 만들고, 해당 폴더 안에 translation.json 파일을 추가합니다.

프로젝트 폴더 구조는 다음과 같이 구성됩니다:

src/
├── i18n.js
├── locales/
│   ├── en/
│   │   └── translation.json
│   ├── ko/
│   │   └── translation.json
│   └── ar/
│       └── translation.json

언어별 번역 파일

 

---

3. 기본 언어 설정 및 Fallback 언어 설정

기본 언어는 사용자가 특별히 언어를 설정하지 않은 경우 자동으로 선택되는 언어입니다. 위 설정에서는 기본 언어로 영어(en)가 설정되어 있습니다. 또한, 지원하지 않는 언어가 선택되었을 때 사용할 Fallback 언어도 영어로 설정되어 있습니다.

이 설정은 i18n.js 파일의 lng와 fallbackLng 옵션에서 관리됩니다. 이를 통해 예상치 못한 언어 선택에도 사용자가 접근할 수 있는 기본 콘텐츠를 제공할 수 있습니다.

---

실습

이제 실습을 통해 i18n.js 파일을 생성하고 각 언어에 맞는 JSON 번역 파일을 생성해보겠습니다.

1. i18n.js 파일 생성 및 초기화

src/i18n.js 파일을 생성하고 위에서 설명한 코드대로 i18next를 초기화합니다. 이 파일은 번역 리소스를 로드하고 기본 언어 및 Fallback 언어를 설정합니다.

2. locales 폴더에 각 언어 JSON 파일 생성

src/locales 폴더 안에 각 언어별 폴더를 만들고, 그 안에 translation.json 파일을 추가합니다. 예를 들어, locales/en/translation.json 파일에 영어로 된 번역 문자열을 추가합니다.

예시: locales/en/translation.json

{
  "welcome": "Welcome to our application",
  "description": "This is a sample app demonstrating multilingual support."
}

 

예시: locales/ko/translation.json

{
  "welcome": "우리 애플리케이션에 오신 것을 환영합니다",
  "description": "이 애플리케이션은 다국어 지원을 시연하는 샘플입니다."
}

 

예시: locales/ar/translation.json

{
  "welcome": "مرحبًا بك في تطبيقنا",
  "description": "هذا تطبيق نموذجي يوضح دعم اللغات المتعددة."
}

이 JSON 파일들은 각 언어에 맞는 번역을 제공합니다. 나중에 애플리케이션에서 번역이 필요할 때, 이 파일의 내용을 불러와 사용자에게 올바른 언어로 콘텐츠를 보여줍니다.

---

마무리

이로써 i18next를 설정하고 다국어 기능을 위한 JSON 번역 파일을 생성하는 작업을 완료했습니다. 다음 단계에서는 React 컴포넌트에서 실제로 이 번역 기능을 어떻게 사용하는지 배울 것입니다.