[Node, express, ejs] i18next 써서 국제화 하기 [1]

i18next 써서 국제화 하기[1]

회사에서의 업무중 페이지를 국제화 시켜야 하는 업무가 생겼다.

여기서 국제화란 한개의 페이지를 여러 국가의 언어로 만들어서 말그대로 국제화 시키는것 을말한다

 

 

위와 같이 같은 구글 페이지지만 텍스트가 한글과 영어 버전이 각각 있다.

과거에는 각 언어마다 뷰 페이지를 만들었다고 한다. 즉 영어,한국어가 필요하면 복,붙 으로 2개 페이지

4개의 언어가 필요하다면 복,붙 으로 4개페이지 를 만들었어야 헀다.

당연히 이것은 유지보수에 있어서 끔찍한 결과를 초래한다.

그래서 국제화 라이브러리 들이 생겨났는데 그중에서 나는 i18next 써드파티 모듈을 쓰기로 했다.

쓰기로한 이유는

1. 가장 최신버전을 유지하고있고
2. 각종 프레임워크를 지원하며
3. 공식 documentation 이 비교적 잘정리되어 있다라는 생각했다.

나는 Node.js + express 환경에서 view 엔진은 ejs 를 쓰고있는데 여기에 i18next 를 쓰기로 하였다

---

1. i18next 설치

npm install i18next

npm install i18next-express-middleware

우선 커맨드 라인에 npm 을 사용해서 i18next 과 i18next-express-middleware 을 설치하도록 하자

2.i18next require

const i18next = require('i18next');//i18next 추가

const i18nextMiddleware = require('i18next-express-middleware');//express 미들웨어 추가

 

i18next//init

.use(Backend)

.use(i18nextMiddleware.LanguageDetector)

.init({

backend: {

loadPath: __dirname + '/locales/{{lng}}/{{ns}}.json',

addPath: __dirname + '/locales/{{lng}}/{{ns}}.missing.json'

},

fallbackLng: 'en',

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

saveMissing: true

});

 

app.use(i18nextMiddleware.handle(i18next));

설치한 써드파티 모듈을 소스에 추가하고 preload 에 사용할 언어들을 추가한다.

여기서 자신이 쓸 text 를 json 으로 저장하여 사용하게 되는데

loadPath: __dirname + '/locales/{{lng}}/{{ns}}.json',

addPath: __dirname + '/locales/{{lng}}/{{ns}}.missing.json'

이부분의 소스가 바로 디렉토리의 위치를 나타내 주는 부분이다.

다른 자세한 init 의 option 은 i18next option 문서 를 참고하도록 하자.

위의 사진을 참고하면 loadPath 와 같이 locales 밑의 de( {{lbg}} ) 부분이며 그밑의 translation.json 에

자신이 사용할 text 를 json 형태로 정리해 놓으면 된다.

{

"home": {

"title": "Hallo Welt!"

}

}

de 버전

{

"home": {

"title": "Hello World!"

}

}

en 버전

3. 뷰에서 사용하기

이제 준비는 끝났다.

남은일은 라우터에서 view 에 랜더링 시키기만 하면된다.

app.get('/en', (req, res) => {

req.i18n.changeLanguage("en");

res.send(req.t('home.title'));

});

 

app.get('/de', (req, res) => {

req.i18n.changeLanguage("de");

res.send(req.t('home.title'));

});

 

그러면 같은 소스를 사용함에도

Hallo Welt! 와 Hello World! 를 출력하게 된다.

여기까지가 기본적인 i18next 국제화 방법이고

다음편 부터가 이 글을쓰게된 이유이다.

생각을 한것이 이렇게 라우터 단에서 하나하나 던져서 view 에서 받아쓰는거라하면

json 에서 값을 받아서 쓰는것이랑 무슨차이가 있는가라는 의문이 들었다.

그래서 view 에서 바로 국제화 기능을 사용하고 싶었는데 우리나라는 물론이고 해외글중 에서도 찾기가 힘들었다.

<%= dump(session) %> 이런식으로 EJS 뷰 내에 바로 넣고 싶었다.

그나마 찾은 것이 ejs.filter 를 쓰는것이었지만 이것은 v2 로 업데이트 되면서 삭제된 기능이라 제대로 동작하지 않았다.

덕분에 한참을 고생했다...

하지만 결국 방법을 찾았고 다음편에서 이어서 쓰도록 하겠습니다!