생활코딩_Node.js) 템플릿 엔진

이번 강의에서는 템플릿 엔진을 사용하는 방법을 배웠다. 템플릿 엔진은 말 그대로 템플릿을 제공하는 데에 본질적인 목적이 있다. 템플릿을 왜 제공하냐고 물어본다면 결국 반복을 최소화 하여 더욱 편하게 프로그래밍 하도록 해준다고 대답할 수 있다. 강의에서는 Jade로 쓰고 있는데 express 공식 사이트에서는 pug로 설명하고 있었다. 그래도 강의를 따라 Jade로 install 시켰는데 deprecated가 떴다. 그래서 찾아보니 Pug가 구Jade 인데 저작권 문제로 강제 개명(?) 당했다고 한다. 아무튼 일단 강의를 따라 했으니 Jade로 포스팅 한다.

1. npm을 통해 jade install 한다(이젠 jade 대신 pug를 써야 할 것)

npm install jade --save

2. 내부적으로 모듈을 로드한다. 아래 코드는 모두 키워드로 설정되어 있는 것이므로 바꿀 수 없다.

app.locals.pretty = true;

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

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

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

- app.locals.pretty = true; 는 나중에 페이지 소스보기를 눌렀을 때에 사람이 식별하기 쉬운 코드로 보이도록 처리하는 코드

- 'view engine'이 키워드고 'jade'는 view engine으로 사용할 모듈 명을 설정하는 것

- 'views'는 view 파일들의 경로를 설정하겠다는 것이고 두 번째 파라미터는 폴더 설정('./views'는 디폴트 경로로 코드 없어도 동작함)

3. 라우팅 설정

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

res.render('firsttemplete', {time:Date(), title:'Jade'});

});

- res.send() 대신 res.render()를 통해서 템플릿 엔진을 활용한다.

- firsttemplete는 firttemplete.jade 파일이다

- res.render() 메소드의 두번째 파라미터에 있는 jason은 firsttemplete.jade 파일에서 사용할 변수에 대한 값이다

4. .jade 파일

html

head

title= title

body

h1 Hello Jade

h1= time

- 들여쓰기가 포함 관계를 정하는 기준점이 된다. 동일 들여쓰기이면 동등한 지위, 더 들어간 것은 포함이 된다

- '=' 를 통해 변수가 들어갈 것을 설정할 수 있고 변수의 값은 app.js 에서 res.render()의 두번째 파라미터에 있는 jason 으로 할당한다