react-i18next로 다국어 구현하기 2강: 프로젝트 설정

프로젝트 설정

이번 강의에서는 다국어 지원 기능을 React에서 구현하기 위해 프로젝트를 설정하는 방법을 알아보겠습니다. 프로젝트를 시작하기 전, 필요한 개발 환경을 설정하고 i18next와 react-i18next를 설치하여 다국어 기능을 위한 기반을 마련할 것입니다.

React 프로젝트에서 다국어 지원 설정

---

1. 개발 환경 설정

먼저 다국어 기능을 구현하기 위한 기본적인 개발 환경을 설정해야 합니다. 이번 프로젝트에서는 다음의 도구들이 필요합니다:

• Node.js: React 프로젝트를 실행하고 빌드하기 위한 자바스크립트 런타임 환경입니다.
• npm 또는 Yarn: 패키지 관리를 위한 툴입니다. 여기서는 npm을 사용할 것입니다.
• React: 웹 애플리케이션을 빌드할 때 사용할 라이브러리입니다.

Node.js 설치:
Node.js가 설치되어 있지 않은 경우, Node.js 공식 사이트에서 다운로드하고 설치합니다. Node.js를 설치하면 기본적으로 npm도 함께 설치됩니다.

설치 확인은 터미널에서 다음 명령어로 가능합니다:

node -v
npm -v

---

2. Node.js 및 React 설치

이제 React 프로젝트를 생성할 차례입니다. create-react-app 명령어를 사용하면 기본적인 React 프로젝트 구조가 자동으로 설정되므로, 빠르게 시작할 수 있습니다.

React 프로젝트 생성:

npx create-react-app multilingual-app

multilingual-app은 프로젝트의 이름입니다. 원하는 이름으로 변경할 수 있습니다. 명령어가 실행되면 기본적인 React 프로젝트가 생성됩니다.

생성된 폴더로 이동합니다:

cd multilingual-app

이제 프로젝트 구조가 아래와 같이 설정됩니다:

multilingual-app/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
└── ...

---

3. i18next 및 react-i18next 설치

다국어 지원을 위한 주요 라이브러리인 i18next와 react-i18next를 설치합니다. i18next는 국제화(i18n)를 위한 핵심 라이브러리이며, react-i18next는 React에서 i18next를 쉽게 사용할 수 있도록 도와주는 패키지입니다.

다음 명령어를 실행하여 설치합니다:

npm install i18next react-i18next

설치가 완료되면, package.json 파일에 i18next와 react-i18next가 의존성으로 추가됩니다.

package.json 파일에 i18next와 react-i18next가 의존성으로 추가

---

4. 프로젝트 구조 설명

이제 프로젝트가 다국어 기능을 지원할 수 있도록 구조를 확장할 것입니다. 우선, 언어별로 번역 파일을 관리할 폴더를 생성하고, i18next 설정을 위한 파일을 추가합니다.

프로젝트 폴더 구조 수정:

multilingual-app/
├── public/
├── src/
│   ├── i18n.js        # i18next 설정 파일
│   ├── locales/       # 언어별 번역 파일 폴더
│   │   ├── en/        # 영어 번역 파일
│   │   ├── ko/        # 한국어 번역 파일
│   │   └── ar/        # 아랍어 번역 파일
│   └── ...

• i18n.js: i18next 설정을 관리하는 파일입니다. 이 파일에서는 사용할 언어와 번역 파일을 설정합니다.
• locales/: 언어별 번역 리소스 파일을 저장하는 폴더입니다. 각 언어는 별도의 폴더를 가지며, 해당 폴더 안에 번역 파일을 JSON 형식으로 저장합니다.

src 폴더에 필요한 파일과 폴더 생성

---

5. 언어 파일 생성 및 관리 방법 설명 (JSON 형식)

다음으로 각 언어에 대한 번역 파일을 생성하겠습니다. 번역 파일은 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 파일은 같은 구조를 가지며, 동일한 키에 대한 번역 문자열을 각 언어에 맞게 작성합니다. **welcome**과 **description**이라는 키는 각 언어에서 동일하게 사용되며, 이 키를 기반으로 텍스트가 변환됩니다.

---

i18n.js 설정 파일 작성

마지막으로 i18n.js 파일을 작성하여 i18next를 초기화하고 번역 파일을 로드하는 코드를 추가합니다.

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', // 기본 언어로 되돌아가는 언어 설정
    interpolation: {
      escapeValue: false // React에서 XSS 공격을 방지함
    }
  });

export default i18n;

이 설정 파일에서는 i18next를 초기화하고, 각 언어별 번역 리소스를 불러옵니다. 기본 언어는 영어로 설정되어 있으며, 사용자가 다른 언어를 선택하면 동적으로 변경할 수 있습니다.

---

이로써 React 프로젝트에서 다국어 기능을 구현하기 위한 기본 설정이 완료되었습니다. 다음 단계에서는 실습을 통해 다국어 사이트의 구현 방법을 배울 것입니다.