Practical Node.js_Chapter4 템플릿 엔진: Jade와 Handlebars

https://github.com/Jpub/PracticalNodeJS

GitHub - Jpub/PracticalNodeJS: <실무에 바로 적용하는 Node.js> 리포지토리

 

 

 

템플릿 엔진: 데이터를 인터프리트하고 view를 렌더링하기 위해 일련의 규칙과 언어를 사용하는 라이브러리 또는 프레임워크

 

MVC(모델-뷰-컨트롤러)

예. 웹 애플리케이션의 뷰 _ HTML / 데스크탑 프로그램, GUI의 뷰 _ JSON or XML

 

 

 

 

 

Jade 문법과 특징

 

*뛰어쓰기 + 공백 중요

 

 

- 태그

한 라인의 맨 앞 텍스트는 기본적으로 HTML 태그로 전환.

-> 가장 큰 컨테이너는 대문자로 시작. 알아서 <></> 만들어줌.

Body
	div
    	h1 Practical Node.js
        p The only book most people will ever need.
    div
		footer © Apress

 

 

 

- 변수와 로컬

로컬(Locals): Jade 템플릿으로 전달되는 데이터

변수에 값을 넣기 위해서 =를 사용

h1= title
p= body

-> 이 상황에서는 local에 title과 body가 명시되어 있을 것이다.

 

 

 

- 속성

속성(attributes)은 태그명 뒤에 오른쪽 괄호를 사용해 추가

포맷) name=value

 

때때로 속성의 값은 동적이다. 이때는 변수 이름을 그대로 사용한다.

| 를 사용하여 새로운 라인 내에 HTML 노드 내용을 추가한다.

파이프 라인은 내부 텍스트가 된다.

a(herf=url, data-active=isActive)
label
	input(type="checkbox", checked=isChecked)
    | yes / no

-> 이 상황에서는 local에 url, isActive, isChecked가 명시되어 있을 것이다.

 

거짓 값(false)을 가지는 속성은 HTML 출력에서 빠진다. 하지만 아무것도 전달하지 않으면 true인 것으로 간주함.

 

 

 

... 이외에 Jade 문법 +++

 

 

독립적 Jade 사용법

템플릿 엔진(여기에선 Jade...)가 항상 Node.js와 사용되지는 않는다. 가끔씩은 Jade를 독립적인 방법으로 쓸 수도 있다.(예. 이메일 템프릿 / 개발 전 Jade 사전 컴파일)

 

 

 

# ./jade-example.jade

.header
    h1= title
    p 
.body 
    p= body 
.footer 
    div= By 
        a(href="http://twitter.com/#{author.twitter}")= author.name
    ul
        each tag, index in tags 
            li= tag

# ./jade-example.js

var jade = require('jade'),
    fs = require('fs');

var data = {
    title: "Practical Node.js",
    author: {
        twitter: "@azat_co",
        name: 'Azat'
    },
    tags: ['express', 'node', 'javascript']
}

data.body = process.argv[2];

fs.readFile('jade-example.jade', 'utf-8', function(error, source){
    var template = jade.compile(source);
    var html = template(data)
    console.log(html)
});

 

node jade-example.js 를 실행하면 컴파일 된다.

 

 

 

 

 

Handlebars 문법+++

 

 

 

 

 

독립적인 Handlebars 사용법+++

 

 

 

 

 

 

Express.js 4에서 Jade와 Handlebars 사용법

기본적으로 Express.js 4.x는 템플릿 라이브러리의 require와 __express 메소드를 사용하기 위해 res, render 메소드에 적용되는 템플릿 확장 익스텐션 또는 뷰 엔진 세팅에 의해 설정되는 기본 확장 세트를 사용할 수 있음.   # ...?????

 

 

 

Jade와 Express.js

Jade는 Express.js와 완벽 호환이 가능

뷰 엔진 세팅을 통해 Express.js 대상 확장을 제공 => 주 서버 파일에서 세팅

app.set('view engine', 'jade');

 

경로 파일을 이용해 템플릿 호출이 가능

예. views/page.jade를 호출

app.get('/page', function(req, res, next){
	//동적으로 데이터 받기
    res.render('page', data);
});

 

만약 뷰 엔진을 세팅하지 않으면 확장 익스텐션은 res.render()로 전달.

res.render('page.jade', data);