Express] 템플릿 엔진 (Jade)

템플릿엔진은 독립적으로 주제가 떨어질만큼 규모가 있으며, Nodejs-express의 맥락에서 뿐만 아니라 다른 곳에서도 중요한 맥락이 된다.

1. 템플릿 엔진의 문법에 따라 만든 문서 작성하기. (index.jade)

  

Left-Line 7 : - 는 스크립트를 작성할 때, jade와 약속한 것.

Left-Line 9 : time이라고 되어있는 부분이 앞에 있는 특수한 기호(=)와 결합해서 우측 이미지의 Line13을 의미.

템플릿코드 바깥쪽에서 템플릿코드를 실행할 때, time이라는 변수를 만들어서 주입시켜 준 것이다. 템플릿코드 안에서 변수를 쓸 수 있다는 것을 의미함.

템플릿엔진 사용하기

1.템플릿엔진을 설치하기 : jade라는 모듈을 설치하라는 뜻

템플린 엔진이라고 하는 것은 어떤 특정한 상품을 의미하는 것이 아니라, 어떤 기술들/상품군을 의미하는 것.

= 템플린 엔진이라는 카테고리 안에 있는 여러가지의 템플린 엔진들이 구체적으로 존재하는 것 (예, jade, 핸들바 등)

그 중에서 express에서 권장하고, 기본적으로 설명하고 있는 jade라는 템플릿 엔진을 적용하려 한다.

$ npm install jade --save

동일하게 package.json에 dependency에 추가됨을 확인할 수 있다.

2. 애플리케이션 설정 필요

Line 4 : app.set('view engine', 'jade');

- 첫번째인자 : 뷰엔진(=템플릿엔진), 약속되어 있는 정의

- 두번째인자: 템플릿 엔진의 이름

jade라고 하는 템플릿 엔진과 애플리케이션 프레임워크인 express를 연결하는 코드

3. views, 템플릿이 있는 디렉토리 설정 (관습적으로 사용하는 것). 예: app.set('views', './views')

Line 5 : 템플릿이 있는 디렉토리를 express에게 알려주는 코드

app.set('폴더이름','폴더경로');

- 첫번째인자 : 디렉토리명

디렉토리는 set하기 전에 미리 만들어 두어야 한다.

생략가능 (생략하면 기본적으로 views라는 폴더를 찾는다.)

- 두번째인자 : 디렉토리 경로

4. 라우터 만들기

템플릿 엔진이 적용된 페이지가 나오는 라우터를 만들어보자.

Line 7 : 템플릿 엔진의 코드에 따라 만들어진 파일을 읽어온다. 괄호안은 파일명.

파일을 호출하여 렌더링한 결과를 사용자에게 응답(res)한다. 

Line 8 : render의 두번째 인자로 객체를 전달. jade에서 만들어진 변수에 대응하는 코드를 객체 타입으로 작성

5. 템플릿파일을 views 안에 추가하기

(결과화면)

* supervisor app.js

파일을 수정하면, 수정된 파일을 알아서 찾고 재시작을 하기 때문에 코드가 수정될때마다 껐다 켰다 하지 않아도 된다.

* 소스를 봤는데 가독성이 불편할 때 : jade express code pretty 구글링

app.locals.pretty = true;

== UPDATE ==

Jade가 Pug(강아지)로 라이센스 문제로 이름이 바뀌었다고 합니다.

따라서 설치하는 모듈, 뷰 템플릿 엔진 설정, 사용되는 확장자도 pug로 바뀌어야 함.

npm install pug --save

app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));