i18next 사용기

최근 개발하고 있는 앱에서 다국어 지원 기능을 개발할 일이 있었다.

물론 이전에도 i18next란 라이브러리를 써서 개발했었지만,

이번에 다시 업데이트를 해야하는 상황이 와서 i18next 라이브러리에 대해 공부하게 되었다.

공부하면서 다시 알게된점은 i18next는 여러 프레임워크와 잘 붙을수 있게 설계한 점이다.

그리고 .use()라는 함수를 통해서 사용하고 싶은 모듈을 쓰는데 여러가지로 편리했다.

여튼 다국어지원에 있어서는 세계적으로 top 라이브러리가 아닐까 생각한다.

결론적으로 아래는 내가 짠 코드다.

버튼을 통해 국가 변환이 발생하면 그것을 감지하고 언어를 바꿔주게 하였다.

jquery 모듈을 붙여서 사용했으며, 이외에 아래 보는것과 같이 i18nextXHRBackend, i18nextBrowserLanguageDetector 등의 모듈도 사용하였다.

i18next.use(i18nextXHRBackend)

// .use(i18nextBrowserLanguageDetector)

.init({

  preload: ['ko', 'en'],

  allowMultiLoading: true,

  fallbackLng: ['ko', 'en'],

  debug: true,

  ns: 'about',

  backend: {

    // load from i18next-gitbook repo

    loadPath: '/lang/{{lng}}/{{ns}}.json',

    crossDomain: true

  }

}, function(err, t) {

  // console.log(t);

  // init set content

  updateContent();

});

// just set some content and react to language changes

// could be optimized using vue-i18next, jquery-i18next, react-i18next, ...

function updateContent() {

  console.log(i18next.store.data);

  jqueryI18next.init(i18next, $, {useOptionsAttr: true});

  $('.translation').localize();

}

i18next.on('languageChanged', () => {

  console.log('hello');

  updateContent();

});

이외에 자세한 옵션을 알고 싶다면 i18next 사이트의 문서를 참고하면 된다.

https://www.i18next.com/