react-i18next (i18n) 사용해보기

개요

프로젝트에 언어 설정이 필요하기 때문에 해당 프레임워크를 넣기로 결정하여 사용방법을 정리하려고 한다.

https://react.i18next.com/
문서를 토대로 공부하려고 한다

i18n 이란?

2011년에 만들어졌고 주요 프론트엔드(react, vue, anglure) 보다 먼저 만들어진 오픈 소스다.
자바스크립트 환경에서 사용이 가능하다.
key르 통한 단순한 번역으로 보이지만, 확장 가능한 기능을 갖춘 프레임워크이다.
다양한 소스, 언어 감지, 해상도, 캐싱, 사후 처리 등을 통한 번역을 제공한다.
브라우저,Node.js 및 Deno 에서 작동한다.

i18n 시작하기

모듈 설치

npm install i18next

초기화

example.js

import i18next from 'i18next';
i18next.init({
    lng : 'en',
    resources : {
        en : {
            translation : {
                key : 'hello world'
            }
        }
    }
})
console.log(i18next.t("key"))

i18next.init 초기화 설정
lng : 언어
resourece : 번역 데이터

커맨드를 입력해보면

node example.js //출력 : hello world

debug

example.js

i18next.init({
    debug : true,
  	...
})

출력시

i18next: initialized {
  debug: true,
  initImmediate: true,
  ns: [ 'translation' ],
  defaultNS: [ 'translation' ],
  fallbackLng: [ 'dev' ],
  ...
}

문제 해결을 하는데 필요한 정보들을 확인할 수 있음

설정되어 있지 않은 key 값을 호출할 경우

example.js

console.log(i18next.t("unknown"))

i18next::translator: missingKey en translation unknown unknown
unknown

오류 메세지를 확인할 수 있고 key 값이 반환된다.

동일한 key 값으로 다른 언어 설정

import i18next from 'i18next';

i18next.init({
    debug : true,
    lng : 'en',
    resources : {
        en : {
            translation : {
                key : 'hello world'
            }
        },
        kr : {
            translation : {
                key : '안녕'
            }
        }

    }
}))

호출할때 option 값을 넘겨줌

const ret = i18next.t("key", {lng : "kr"});
console.log(ret);

다양한 객체 정보를 저장 가능

import i18next from 'i18next';

i18next.init({
    //debug : true,
    lng : 'en',
    resources : {
        en : {
            translation : {
                key : 'hello world'
              	look : {
              		deeper ; "some deep key"
            	}
            }
        },
        kr : {
            translation : {
                key : '안녕'
            }
        }

    }
}))

키 값이 존재 하지 않을 경우

const ret = i18next.t("look.deeper", {lng : "kr"});
console.log(ret);

look.deeper //출력

존재하지 않을 경우 호출될 언어 설정

i18next.init({
    fallbackLng : 'en',
    ...
})
const ret = i18next.t("look.deeper", {lng : "kr"});
console.log(ret);

some deep key //출력

해당 값이 설정되어 있지 않은 경우 fallbackLng 로 설정된 언어의 해당 값을 불러옴 (없을 경우 사용되는 언어)