[jade]
- node.js 를 위한 템플릿 엔진
- express 의 기본 템플릿 엔진
- ejs에 비해 4배정도의 다운로드수(2016.03.10 기준)
- jade 의 형식으로 된 문법을 이용하여 html 구성
- 들여쓰기가 중요함
-- 탭과 띄어쓰기중 한가지만 사용해야 함
- 첫번째로 쓰여진 문자가 태그가 되고, 공백 다음에 쓰여진 문자가 태그의 내용이 됨
-- title hahaha --> <title>hahaha</title> 로 변환됨
- 태그의 속성은 괄호를 이용하여 입력
-- a(href="www.target.url") --> <a src="www.target.url"></a> 로 변환됨
-- 여러개의 속성은 콤마(,)로 구분하여 입력함
- jade 로 파싱된 결과물은 집핑(ziping)되어 나옴
-- 줄바꿈없이 나오게 됨
-- 전송용량을 줄이기 위함
var jade = require("jade");
var fs = require("fs");
// compile 을 이용하여 처리
jade_html = fs.readFileSync("jade.jade", "utf-8");
jade_fn = jade.compile(jade_html);
console.log(jade_fn({ "title" : "Hello World1!" }));
// render 를 이용하여 처리
html = jade.render(jade_html, {"title" : "Hello World2!" });
console.log(html);
<jade.jade 파일>
doctype html
html
head
// 주석은 이렇게
// 값을 받아서 넣으려면 #{}을 이용
title #{title}
body
// 아래와 같이 =을 이용하여 넣는 것도 가능
h1= title
// 이렇게 넣으면 div의 아이디를 입력하여 생성
#div1
- for(var i = 0; i < 3; i++) {
p #{i}
- }
<!DOCTYPE html><html><head><!-- 주석은 이렇게--><!-- 값을 받아서 넣으려면 #{}을 이용--><title>Hello World1!</title></head><body><!-- 아래와 같이 =을 이용하여 넣는 것도 가능 --><h1>Hello World1!</h1><!-- 이렇게 넣으면 div의 아이디를 입력하여 생성 --><div id="div1"><p>0</p><p>1</p><p>2</p></div></body></html>
<!DOCTYPE html><html><head><!-- 주석은 이렇게--><!-- 값을 받아서 넣으려면 #{}을 이용--><title>Hello World2!</title></head><body><!-- 아래와 같이 =을 이용하여 넣는 것도 가능 --><h1>Hello World2!</h1><!-- 이렇게 넣으면 div의 아이디를 입력하여 생성 --><div id="div1"><p>0</p><p>1</p><p>2</p></div></body></html>
* 기존에 html 로 작성한 파일을 jade 로 변환해 주는 사이트를 추가합니다.
아래의 html to jade 를 확인해보시면 됩니다.
https://www.npmjs.com/package/jade
html to jade : https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/
반응형
'프레임워크 > [JS] node.js' 카테고리의 다른 글
| [nodejs] 한글이 깨지는 현상 수정하기 (1) | 2016.03.30 |
|---|---|
| [nodejs][express] express 설치 및 기본 프로젝트 생성하기 (0) | 2016.03.30 |
| [ejs] html 페이지 템플릿을 위한 ejs 모듈 예제 (0) | 2016.03.08 |
| [에러] possible EventEmitter memory leak detected. 에러 처리 (0) | 2016.02.18 |
| node.js와 mysql 연동하기 (0) | 2016.02.17 |