node js 에서 템플릿 엔진 사용

템플릿 엔진 = 정적 기능 + 동적 기능

독립적으로 다른 곳에서 사용할 수도 있다.

템플릿 엔진 = 어떤 특정한 기술, 어떤 특정한 상품이 아닌 어떤 기술/상품군을 의미 하는 것

템플릿 엔진에 들어가는 것 ==> jade, 핸들바..

express자체는 템플릿 엔진 기능을 제공하지 않는다,

템플릿 엔진을 사용하기 위해선 따로 설치해서 express와 연결하여 사용해야 한다.

[템플릿엔진이란, 템플릿엔진을 사용하면 어디가 좋아]

- 정적인 파일만을 서비스한다면 필요없음

- 동적인 결과를 정적인 파일에 담기위해 사용함

- 풀어 설명하자면, 자바스크립트 코드로 연산된 결과를 변수에 넣고 변수를 뷰 파일에서도 사용할 수 있게끔 함

- 템플릿엔진 사용 이유 : 클라이언트 요청에 따라 웹문서 들어가는 내용(결과)이 달라질 수 있어서 정적인 부분과 동적인 부분을 따로 하기위해 사용

- app.js 내 html 코드를 쓰지않아도 됨

- 뷰 파일과 자바스크립트 코드를 한 파일에 정의하지않고 따로따로 사용할 수 있음 

- 자바스크립트로 연산된 결과를 뷰 파일에 쉽게 넣을 수 있음

사용 방법

1) jade을 npm으로  install

2) express에 환경설정

app.set('view engine', 'jade'); //express와 jade를 연결하는 코드, 템플릿 엔진으로 jade설정
app.set('views', './views');  //템플릿 엔진들을 통상적으로 views라는 디렉토리에 넣는다. (기본값)

3) render라는 res로 템플릿엔진을 받아 사용자에게 response

//템플릿 엔진이 적용될 라우터
app.get('/template', function(req, res){
  //렌더링 한다.
  //temp라는 템플릿 파일을 호출해서 랜더링해서 웹페이지에 뿌려준다.
  res.render('temp', {time:Date(), _title:'Jade'}); //temp는 jade형식으로 있어야 한다.
});

3) 객체의 값으로 property값을 전달해주면

temp.jade에서

= 로 값을 받아 값을 출력해준다.

html
    head 
        title= _title
    body
        h1 Hello Jade
        ul
            -for(var i=0; i<5; i++)
                li coding
        div= time

출처

1) http://jinbroing.tistory.com/107

2) 이고잉 오픈튜토리얼즈 강의