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 초기 셋팅입니다. 어떤 언어를 기본적으로 사용할 것인지, 어떤 언어를 추가할 것인지 적습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

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)에 미리 적어놔야합니다.

1
2
3

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

4. 언어 변경

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

This page is synchronized from the post: ‘i18n 활용한 다국어 지원하기’