19.01.24 목요일

D + 14

갑자기 할 게(?)사라져서 의욕을 잃은지 3일째다 ㅋㅋㅌㅋㅌ

그래서 몰래 DB공부를 할 생각이닷ㅋㅋ

do it 노드제이에스 책으로 조금씩 공부해야겠다.

1. node.js에서 URL관련 모듈에 대해 공부하기(특히 파서 / 노드 공부)

• url.parse

• url.format

• url.resolve

2. node에서 ejs파일로 변수나 데이터 가져오는 방법 찾아보기

3. json파일을 여러 개로 분류해서 저장해서 사용하는 방법 알아보기

> 현재까지 구현한 내용

처음 페이지는 localhost:3000에서 디폴트 언어는 영어이므로 영어화면을 띄우고, 을 누르면 한글 버전으로 변경되며 path는 /ko로 바뀐다. 을 누르면 영어 버전으로 바뀌며 path는 /en으로 바뀐다.

> 추가로 구현할 내용

한글 버전일때와 영어 버전일때와 화면 구성을 다르게 한다. 그래서 화면에서의 메뉴 한 부분을 영어 버전일때에는 아예 사라지도록 구현해 보기로 했다.

메인 js파일에서 현재의 path가 ko일 때와 en일 때와 분류하여 새로운 변수(nword)에 저장한 후 ejs파일에서 변수가 ko일 때에는 메뉴가 나오도록, en일 때에는 메뉴가 없어지도록 코드를 추가해 주면 될 것이라고 생각하였다.

1 2 3

app.get('/:lang',function(req,res){    var nwrod = req.params.lang;    }

<메인 js>

1 2 3 4 5

<% if(nword === 'ko') {%> HTML코드... <% } %>

<ejs 파일>

하지만 위와 같은 메인 js에서 정의한 변수는 ejs로 가져갈 수 없다. 메인 js에서 정의한 변수를 ejs에서 사용하기 위해서는 render 함수를 통해 렌더링을 해 주어야 ejs에서 사용할 수 있다. nword 변수에 현재 path를 렌더링 한다. req.params.lang는 현재 url의 path를 말한다.

1 2 3 4

app.get('/:lang',function(req,res){    res.render('page', {nword : req.params.lang});    res.end(); });

<메인 js>

위 코드처럼 해 주면 nword(path)가 ko일 때에는 HTML코드 부분이 나오게 되고 그렇지 않을 경우(en)에는 그 코드 부분은 나타나지 않게 된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

var theBandEn = fs.readFileSync('./views/theBand_en.ejs', 'utf8'); var theBandKo = fs.readFileSync('./views/theBand_ko.ejs','utf8'); app.get('/:lang',function(req,res){    var pth = req.params.lang;       if(pth === 'ko'){        res.cookie('lang','ko',{path:'/ko'});        res.render('page', {nword:pth, theBand : theBandKo});    }    else {        res.cookie('lang','en',{path:'/en'});        res.render('page',{nword:pth, theBand:theBandEn});    }    res.end(); }) app.get('/',function(req,res){    res.cookie('lang','en',{path:'/'});    res.render('page',{nword:"en",theBand:theBandEn});    res.end(); })

<전체적인 메인 js>

<ejs파일 일부분 - theBand부분과 ko부분에서만 띄워 줄 부분>

* node.js에서 ejs뷰 템플릿으로 변수를 가져오려면 render를 통해 가져오면 된다. <% %> 안에는 자바스크립트 코드를 사용할 수 있다.

<결과>

영어 페이지에는 아래 사진들이 나오지 않았고, 한글 페이지에는 사진들이 나왔다.

> i18n을 구현할 때 en.json파일을 여러개로 나누어서 저장할 수 있는지

성능면에서는 로드 속도가 조금 더 빨라지지만 이 속도는 무시할 수 있을 정도이다. 단일 파일을 사용하는 것이 가장 좋다. 다국어 처리 웹페이지를 구현할때 json파일을 여러개로 나누어서 저장하려면 i18next를 사용해야 하는 것 같다. 하지만 express서버에서 i18next를 사용하는 사례(?)는 거의 없는 것 같다. 주로 노드는 i18n으로 구현하는 것 같다.

i18next를 이용하면

로케일 파일의 구조가 이 화면과 같을 때,

i18next 로듈을 이와 같이 저장할 수 있다. 하지만 node.js와 구현하는 방법은 아직 정확하게 찾지 못하였다.

<<1월 25일 금요일>>

내일은 몽고디비부분까지 공부할 예정이다.

json파일 분리해서 사용하는 방법에 대해서도 찾아봐야겠다.