express를 사용시 제이드(Jade)를 사용하여 웹 페이지를 만들때가 있다.

express는 템플릿 엔진을 이용해서 웹페이지를 생성하는데 제이드(Jade)가 대표적이다.

이번 글에서는 express에서 Jade 템플릿을 이용한 웹페이지 렌더링 방법에 대해 알아보려고 한다.

Jade 템플릿을 설치하는 방법은 매우 간단하다.

$npm install jade --save

설치한 Jade 모듈을 익스프레스에 설정하는 코드를 추가한다.

[app.js]에

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

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

////////////////////

Jade만의 특수 태그가 몇 가지 존재하며, 이 특수 태그를 사용하여 페이지를 구성한다.

1. -Code : 자바스크립트 코드를 입력할 때 사용한다.

2. #{Value} : 데이터를 출력한다.

3. = Value : 데이터를 출력한다.

            -for(var i = 0 ; i < data.length ; i ++)

            { 

a(href = "http://www.naver.com") 이동하기 : p #{i}

           -}

[결과]

이동하기 : 0

4. div 태그 생성하기

div 태그를 직접 입력하지 않고 #header 태그를 입력하는 것만으로도 : id 속성이 header인 div 태그를 생성.

div 태그를 직접 입력하지 않고 .header 태그를 입력하는 것만으로도 : class 속성이 header인 div 태그를 생성.

body

  #header 

h1 Hello World!

h2 Mr.Jang.

이와 같이 div 태그를 쓰지 않고도 쉽게 생성할 수 있다.