jade모듈도 ejs랑 비슷하다.
jade 페이지는 특수한 형태의 HTML 페이지 위에 특수한 태그를 몇 개 추가한 것.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var jade = require('jade');
var http = require('http');
var fs = require('fs');
http.createServer(function (request, response) {
fs.readFile('jadePage.jade', 'utf8', function (error, data) {
var fn = jade.compile(data);
response.writeHead(200, { 'Content-Type': 'text/html' });
response.end(fn());
});
}).listen(5000, function () {
console.log('Server Running...');
});
| cs |
서버측 코드
jade페이지를 HTML 페이지로 변환할 때 ejs 모듈의 render() 메서드와 다르게 compile()메서드를 이용여 jade 문자열을 HTML 문자열로 바꿀 수 있는 함수를 생성
1
2
3
4
5
6
7
8
9
10
11
|
html
head
title Index Page
body
h1 Hello jade..!
h2 Lorem ipsum
hr
a(href="http://hanb.co.kr",data-test="multiple Attribute") Go To Habbit Media
cs
| cs |
jade코드를 이용하여 클라이언트를 제작
먼가 구조적으로 HTML이랑 비슷 한 것 같다.
jade코드에서 들여쓰기는 탭과 띄어쓰기 중 한 가지 형태만 사용 해야한다.
두 가지 형태를 모두 사용하면 오류 발생
소스코드를 확인하면 모든 태그가 들여쓰기 구분 없이 생성되는 것을 확인할 수 있다
이렇게 소스 코드가 모두 붙어 클라이언트에 제공할 웹페이지 용량을 줄이는 것을 집핑(ZIpping)이라고 합니다.
|
.article은 id 속성인 article인 div 태그를 만들어 낸다.
div가 추가된것을 볼수가 있다.
댓글
댓글 쓰기