node.js jade 모듈

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...'); }); Colored by Color Scripter

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   Colored by Color Scripter

cs

jade코드를 이용하여 클라이언트를 제작

먼가 구조적으로 HTML이랑 비슷 한 것 같다.

jade코드에서 들여쓰기는 탭과 띄어쓰기 중 한 가지 형태만 사용 해야한다. 

두 가지 형태를 모두 사용하면 오류 발생

 

 

소스코드를 확인하면 모든 태그가 들여쓰기 구분 없이 생성되는 것을 확인할 수 있다

이렇게 소스 코드가 모두 붙어 클라이언트에 제공할 웹페이지 용량을 줄이는 것을 집핑(ZIpping)이라고 합니다.

1 2 3 4 5 6 7 8 9 10 11 html     head         title Index Page           body              #header                 h1 Hello jade..!                 h2 Lorem ipsum             hr              .article                 a(href="http://hanb.co.kr",data-test="multiple Attribute") Go To Habbit Media cs

.article은 id 속성인 article인 div 태그를 만들어 낸다.

div가 추가된것을 볼수가 있다.