Express - Jade

 [ Jade ]

(2016년 이후로 Jade는 "PUG"로 대체되어서 업데이트가 되고 있습니다.)

Jade는 html과 같은 정적파일의 태그와 변수(구문)를 함께 사용할 수 있는 템플릿 엔진이라는 것을 제공합니다. 쉽게 말하면 서버와 독립된 파일 속에 html contents를 변수와 함께 사용할 수 있고 서버가 그 파일을 페이지에 제공할 수 있습니다.정적페이지와 동적페이지를 상호 보완하는 것이죠. 

jade의 템플릿 엔진을 사용하기 위해서는 jade를 설치해야합니다.

$ npm install jade --save

설치가 완료되면 이제 jade를 사용할 수 있습니다.

이제

app.set('view engine','jade');

를 추가하면 jade의 템플릿 엔진을 express와 함께 사용할 수 있습니다. (set 메서드에 'view engine'을 넣으면 "express와 템플릿 엔진을 설정하겠다"라는 의미이고 'jade'는 jade의 "템플릿 엔진을 사용하겠다"라는 의미입니다.)

app.set('views', './views');

로 템플릿의 경로를 설정합니다. ('views'는 "jade파일을 불러와서 express로 사용하겠다"라는 의미이고 './views'는 "views폴더에서 jade파일을 찾겠다"라는 의미입니다.)

그리고 jade파일을 저장할 폴더 views를 작업폴더 안에 만들어줍니다. (다른 이름을 사용해도 무방합니다.)

이제 페이지에 내용이 보이도록 라우팅 해보죠. 먼저 views폴더에 temp.jade 파일을 만듭니다.

다음은 views폴더에 있는 temp.jade 파일입니다.

//temp.jade file (./views/temp.jade)

//using javascript syntax with '-' (ex. -for(var i=0;i<5;i++).....)

//줄바꿈 뒤 입력받는 첫번째 값은 태그라고 인식, 태그 이후 내용을 넣으려면 띄어쓰기 사용.

//닫기태그는 자동

html

head

body

-for(let i=0;i<5;i++)

h2 Hello

그리고 /template 페이지를 만들어 라우팅 시키겠습니다. 템플릿 엔진을 라우팅 시킬 때는 render라는 랜더링 메서드를 사용합니다. (서버가 시작될 때 서버 시스템 내에서 동적으로 가공처리를 해야하기 때문입니다.)

const express = require('express');

const app = express();

//정적인 파일을 받을 경로설정 ('public 폴더에서 정적인 파일을 끌어 쓰겠다')

app.use(express.static('./public'));

//템플릿 엔진 설정('view engin' = 템플릿 사용 명령, 'jade' = jade를 템플릿 엔진으로 사용)

app.set('view engine', 'jade');

//jade파일을 찾을 폴더

app.set('views', './views')

//페이지 소스보기에서 html태그가 보기좋게 나옴

app.locals.pretty = true;

//템플릿 엔진 라우터

app.get('/template', function(req,res){

res.render('temp');

})

//port listen

app.listen(3000, function(){

console.log('Connected 3000 port');

})

이렇게 한 뒤 localhost:3000/template로 들어가면 Hello가 다섯번 찍혀있는 것을 확인할 수 있습니다. 정상적인 html 태그로 작성이 됐는지 확인하려면 페이지 소스를 보면 됩니다.

변수를 사용하려면 express의 render메서드에서 매개변수를 jade 코드로 전달해줘야 합니다.

라우터에 매개변수를 어떻게 사용하는지 추가합니다. (express의 Date() 메서드를 변수로 받아보겠습니다.)

//템플릿 엔진 라우터

app.get('/template', function(req,res){

res.render('temp', {time:Date()});

})

그리고 jade파일에는 time이라는 매개변수를 출력할 수 있게 <태그>= time와 같이 사용합니다.

//temp.jade file (./views/temp.jade)

//using javascript syntax with '-' (ex. -for(var i=0;i<5;i++).....)

//줄바꿈 뒤 입력받는 첫번째 값은 태그라고 인식, 태그 이후 내용을 넣으려면 띄어쓰기 사용.

//닫기태그는 자동

html

head

body

-for(let i=0;i<5;i++)

h2 Hello

//매개변수를 받는 부분

div= time

서버가 구동되는 부분의 내용이 바뀌었으므로 서버를 재시작하고 바뀐 jade파일을 저장하면 localhost:3000/template에 시간이 표시되는 것을 볼 수 있습니다. 그리고 request를 할 때마다(새로고침을 할 때마다) 시간이 바뀌죠.

이렇게 정적페이지와 동적페이지를 보완할 수 있는 템플릿 엔진에 대해서 알아봤습니다.