I18N 텍스트 관리 컨벤션

I18N(국제화) 관리 컨벤션

현재는 English(en)와 Korean(ko)만을 지원합니다.

목차

1. 언어별 텍스트 작성
2. Class I18n
3. I18nWrapper Component
4. 언어 선택 컴포넌트

언어별 텍스트 작성

언어별 텍스트는 route별로 관리합니다. http://example.com/path는 app/text/path에 .js파일로써 관리하고, http://example.com/list는 app/text/list에 .js파일로써 관리합니다.

2단 라우트(http://example.com/path/2nd)와 같은 라우트의 컨벤션은 아직 정하지 않았습니다.

파일내부 예시 list라우트에 text를 list1, list2, list3, list4텍스트를 2개 국어(en, ko)로 사용할 경우

app/text/list/index.js

export default {
  en: {
    list1: 'list1',
    list2: 'list2',
    list3: 'list3',
    list4: 'list4',
  },

  ko: {
    list1: '리스트1',
    list2: '리스트2',
    list3: '리스트3',
    list4: '리스트4',
  },
};

라우트별 text를 넣은 뒤, app/text/index.js에 해당 text파일을 import하여 객체에 추가해주어야합니다.

app/text/index.js

import counter from './counter';
import list from './list';

export default {
  counter,
  list,
};

Class I18n

app/utils/I18n.js에 위치.

static으로 현재의 language, text를 관리하는 클래스입니다.

language

• 여기서는 사용자의 사용 언어를 저장하는 변수입니다.
• 초깃값은 localStorage의 저장된 언어를 통해서 초기화를 하고, 저장된 값이 없다면 navigator.language를 이용합니다.

text

• app/text/index.js에서 조합한 텍스트들을 저장해두는 변수입니다.
• Format

{
  [route]: {
    en: {
       [key1]: [en_text1]
       [key2]: [en_text2]
    }
    ko: {
       [key1]: [ko_text1]
       [key2]: [ko_text2]
    }
  }
}

changeLanguage

• args
  • lang: 변경 할 언어 종류 (ko or en)
• I18n클래스의 static language의 값과 localStorage값을 변경합니다.

getText

• args
  • target: text에서 사용할 집합(라우팅)과 언어를 골라 key값만을 사용하도록 가져옴

I18nWrapper Component

I18nWrapper에서는 자식 컴포넌트들의 리랜더링을 맡을 context와 context를 변경 할 함수를 관리합니다.

app의 자식컴포넌트로써 전체 뷰를 감싸주고 있습니다.

언어 선택 컴포넌트

언어 선택에 대한 방식은 자유이며, I18nWrapper컴포넌트의 자식컴포넌트여야합니다.

context.onChangeContextLang을 이용하여 사용언어를 수정 할 수 있으며 context.language를 이용하여 현재 사용 언어를 알 수 있습니다.