[javascript] Parcel에서 다국어 지원을 추가하는 방법은?

22 Nov 2023

javascript

프로젝트 루트 디렉토리에서 터미널을 열고 다음 명령을 실행하여 i18next 패키지를 설치합니다.

npm install i18next

src 폴더에 locales 디렉토리를 생성하고, en.json 및 ko.json과 같은 다양한 언어 파일을 만듭니다. 각 파일은 해당 언어의 번역 텍스트를 가지고 있습니다. 예를 들어, en.json 파일은 다음과 같은 내용을 가질 수 있습니다.

{
  "welcome_message": "Welcome to my website!",
  "button_text": "Click here"
}

src 폴더에 locales.js 파일을 생성하고 다음과 같은 내용을 입력합니다.

import i18next from 'i18next';

i18next.init({
  lng: 'en', // 기본 언어 설정
  resources: {
    en: {
      translation: require('./locales/en.json') // 영어 번역 파일 경로
    },
    ko: {
      translation: require('./locales/ko.json') // 한국어 번역 파일 경로
    }
  }
});

export default i18next;

번역이 필요한 React 컴포넌트에서 locales.js 파일을 가져와 사용할 수 있습니다.

import React from 'react';
import i18next from './locales';

function MyComponent() {
  return (
    <div>
      <h1>{i18next.t('welcome_message')}</h1>
      <button>{i18next.t('button_text')}</button>
    </div>
  );
}

export default MyComponent;

이제 Parcel은 locales.js 파일을 통해 지정된 언어에 따라 올바른 번역을 사용하여 앱을 번들링합니다. 웹 페이지에서 언어를 변경하려면 i18next.changeLanguage('ko')와 같은 메서드를 호출하여 필요한 언어로 전환할 수 있습니다.

더 자세한 내용은 Parcel 문서를 참조하세요.