i18n 활용한 다국어 지원하기

안녕하세요. 제이콥입니다.

http://join.steemcoinpan.com/ 에 다국어 설정을 넣어봤습니다. 사용할 언어를 선택하면 그 언어로 모든 정보를 보여줍니다.

---

i18n 라이브러리는 다국어 설정을 위한 라이브러리입니다. 사전에 미리 언어파일을 준비해놓고, 언어선택을 하면 특정 언어를 보여주도록 합니다.

• https://github.com/wonism/TIL/tree/master/back-end/nodejs/i18n
• https://www.npmjs.com/package/i18n

1. 언어파일 만들기

아래처럼 언어파일을 만듭니다. 저는 한국어와 영어를 지원하니 2개를 만들었습니다.

2. i18n 초기화

i18n 초기 셋팅입니다. 어떤 언어를 기본적으로 사용할 것인지, 어떤 언어를 추가할 것인지 적습니다.

import I18n from 'i18n-js';

import en from '../locales/en';
import ko from '../locales/ko';

I18n.locale = 'ko';
I18n.fallbacks = true;
I18n.translations = {
  en,
  ko,
};

export default I18n;

3. 사용하기

i18n을 import합니다. 그리고 원하는 문장을 가져옵니다. 예를 들어, 코드에 있는 signup.fail은 언어파일 (ko,en)에 미리 적어놔야합니다.

import I18n from '../common/I18n';
..
info = `${I18n.t('signup.fail')}` 

4. 언어 변경

저는 드랍메뉴를 활용해서 언어 변경을 하도록 했습니다. 메뉴에서 특정 언어를 선택하면, locale을 변경하도록 했습니다.