[자바스크립트] 제이드(Jade) 사용해서 웹페이지 생성하는 방법...
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 문법
////////////////////
Jade만의 특수 태그가 몇 가지 존재하며, 이 특수 태그를 사용하여 페이지를 구성한다.
1. -Code : 자바스크립트 코드를 입력할 때 사용한다.
2. #{Value} : 데이터를 출력한다.
3. = Value : 데이터를 출력한다.
-for(var i = 0 ; i < data.length ; i ++)
{
a(href = "http://www.naver.com") 이동하기 : p #{i}
-}
[결과]
이동하기 : 0
이동하기 : 1
이동하기 : 2
이동하기 : 3
4. div 태그 생성하기
div 태그를 직접 입력하지 않고 #header 태그를 입력하는 것만으로도 : id 속성이 header인 div 태그를 생성.
div 태그를 직접 입력하지 않고 .header 태그를 입력하는 것만으로도 : class 속성이 header인 div 태그를 생성.
body
#header
h1 Hello World!
h2 Mr.Jang.
이와 같이 div 태그를 쓰지 않고도 쉽게 생성할 수 있다.