[Jade] Jade 사용하기

Express 프레임워크에서 기본으로 사용하는 Jade에 대하여 알아보자. 

• XML 스타일의 < > 기호를 사용하지 않는다 : Jade Syntax Tutorial
• Node.js를 위한 Jade 번역
• Jade의 들여쓰기르 주의한다 : 들여쓰기를 통해 블럭을 지정한다

▶ app.js 연구 

1) 우선 require를 사용하여 모듈패턴에 의한 모듈을 얻는다. 모듈로 얻음으로 namespace가 분리되므로 서로간의 충돌을 방지 할 수 있다. 물론 접근은 module.<exports Name> 으로 접근한다 

var express = require('express')

  , routes = require('./routes')             // index.js 파일 

  , user = require('./routes/user')        // user.js 파일 

  , dowon = require('./routes/dowon') // dowon.js 파일 

  , http = require('http')

  , path = require('path');

2) ./routes/dowon 으로 require 했으므로 routes 디렉토리 밑에 dowon.js 파일을 생성한다. hi 라는 펑션을 exports 객체에 설정하여 모든 인스턴스가 공유할 수 있게 한다. 물론 모듈안에서 공유가 된다. 단, function(req, res) {...} 로 구현하자. 

exports.hi = function(req, res){  // dowon 모듈에서 hi 펑션 공유 

  res.render('dowon', { title: 'Hi DoWon', name: 'youngsik', age: '30' }); // dowon.jade 지정 

};

3) res.render('dowon', ...) 설정에서 dowon이라고 key를 넣었으므로 views 폴더 밑에 dowon.jade 파일을 생성한다. jade syntax에 맞추어 코딩을 하고 값은 #{key} 형식으로 코딩하면 json에서 값을 읽어 자동 셋팅하고, html 파일로 변환된다 

- var dododo = function() { return 'dododo young!'; };

p #{title}

p hi dowon yun

p

  | hi

  | dowon

  | yun

p.

  hi

  dowon

  yun

// error

p

  hi

  dowon

  yun  

 ul

   li one

   li two

   li #{name}

   li #{age}

   li= dododo()

// each loop

//-

- var users=[{ title: 'Hi DoWon1', name: 'youngsik1', age: '30' }, {title: 'Hi DoWon2', name: 'youngsik2', age: '40' }, { title: 'Hi DoWon3', name: 'youngsik3', age: '50' }];

 ul

     each user in users

        li= user.title

        li= user.name

        li= user.age

4) app.js 에서 get 요청에 대하여 서비스 되는 모듈의 exports 펑션을 지정한다. 즉, /dowon uri가 호출되면 hi 펑션이 수행함

app.get('/', routes.index);

app.get('/users', user.list);

app.get("/dowon", dowon.hi);

Node의 require(<js 파일>) 호출을 통하여 모듈을 로딩하고, 모듈로 로딩된 js 파일안에 모듈에서 공유할 펑션을 정의하였다. 해당 펑션에는 jade 파일명을 지정하여 서비스 한다. 결국, Node의 require, exports Global객체를 적절히 사용하여 구성하였다. 하기와 같은 과정을 거치는 것이다

Route → Route Handler → Template → HTML

• Route : dowon.js
• Route Handler : hi에 지정한 function
• Template : dowon.jade
• HTML : jade에 의하여 html로 변환 

<참조>

  - ninja-express

  - Jade syntax 배우기 (필독)

  - Jade code : 동영상 (필감)