티포의개발일지

i18n은 다국어 지원을 가능하게 해주는 모듈이다. JQuery 와 React에서 쓰이는 방법이 다르며, React에서 쓰이는 방법은 

차후에 올리도록 하겠다. 

1. 먼저 i18n을 설치한다.

sudo npm i i18n

2. 최상 루트폴더 밑에 i18n.js를 만들어준다.

i18n.js

const i18n = require('i18n');

i18n.configure({
    locales: ['ko', 'en'],
    directory: __dirname + '/locales',
    defaultLocale: 'ko',
    cookie: 'lang',
});

module.exports = function(req, res, next) {
    i18n.init(req, res);
    res.locals.__ = res.__;
    var current_locale = i18n.getLocale();
    return next();
};

코드를 보면 /locales 파일 밑에 ko, en 파일들을 쓴다고 되어있다. 

defaultLocale인 ko(한국어)가 최초의 값으로 되어있고, 위에 사진처럼 다른언어를 클릭할 시에 페이지 내에

텍스트들이 바뀌는것을 확인 할 수 있다.

3.  최상 루트폴더 밑에 locales 폴더를 만들고, 하위에 ko.json, en.json파일들을 만들어 준다.

ko.json

{
	"" : "",
	"lang_kr": "한국어 (기본)",
	"lang_en": "영어",
}

en.json

{
	"" : "",
    "lang_kr": "Korean (Basic)",
	"lang_en": "English"
}

해당 모듈은 json형식을 완벽하게 따라해야되기 때문에 마지막 value 값 뒤 ,(콤마)를 붙이는 실수를 하면 안된다.

(나중에 큰 고생을 합니다..ㅜㅜ) 두 개의 파일의 순서도 똑같이 해줘야 한다.

4. app.js에 i18n을 설정해준다.

const i18n = require('./i18n');

app.use(i18n);

5. 클라이언트에서 버튼을 생성해준다

<div class="dropdown-menu dropdown-menu-right">
	<a href="/ko" class="dropdown-item d-flex justify-content-start align-items-center"><img class="flag" src="https://lipis.github.io/flag-icon-css/flags/4x3/kr.svg" alt="South Korea Flag">{{__('lang_kr')}}</a>
	<a href="/en" class="dropdown-item d-flex justify-content-start align-items-center"><img class="flag" src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" alt="United States of America Flag">{{__('lang_en')}}</a>
</div>

6. 백엔드(node.js)라우터에서 쿠키설정을 해줍니다.

router.get('/en', function(req, res) {
  res.cookie('lang', 'en');
  res.redirect('/main');
});

router.get('/ko', function(req, res) {
  res.cookie('lang', 'ko');
  res.redirect('/main');
});

그럼 모든 설정을 끝이 났다. 

사용하는 방법은 아래와같다.

<button type="button">{{__('close')}}</button>

{{__('이곳')}} 에 json파일들로 설정한 이름들을 넣어주면 get메소드가 실행될 때마다 언어를 바꿔줄 수 있다.

노가다지만 나중에 다국어를 한다 생각해보면 필요성이 있는 모듈이었다.