[week_06] Template Engine

1. 템플릿 엔진

• 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장
• 동작 시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성
• 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능 제공

1-1. Express.js의 템플릿 엔진

• EJS: html과 유사한 문법의 템플릿 엔진
• Mustache: 간단한 데이터 치환 정도만 제공하는 경량화된 템플릿 엔진
• Pug: 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃 등 강력한 기능 제공

 

2. Pug

• 들여쓰기 표현식을 이용해 가독성이 좋고 개발 생산성이 높음, HTML을 잘 모르더라도 문법적 실수를 줄일 수 있음
• layout, include, mixin 등 강력한 기능 제공

html
	head
    	title= title
    body
    	h1#greeting 안녕하세요
        a.link(href="/") 홈으로

• HTML 닫기 태그 없이 들여쓰기로 블럭 구분
• = 을 이용해서 전달받은 변수 사용 가능
• id나 class는 태그 뒤에 이어서 바로 사용
• ( )을 이용해서 attribute 사용

each item in arr
	if item.name == 'new'
    	h1 New Document
    else
    	h1 `${item.name}`

• each ~ in 표현식으로 주어진 배열의 값을 순환하며 HTML 태그를 만들 수 있음
• if, else if, else를 이용해 주어진 값의 조건을 확인하여 HTML 태그를 만들 수 있음

// layout.pug
html
	head
    	title= title
    body
    	block content



// main.pug
extends layout
block content
	h1 Main Page

• block을 포함한 템플릿을 선언하면 해당 템플릿을 layout으로 사용할 수 있음
• layout을 extends하면 block 부분에 작성한 HTML 태그가 포함됨

// title.pug
h1= title


// main.pug
extend layout
block content
	include title
    div.content
    	안녕하세요
    pre
    	include article.txt

• 자주 반복되는 구문을 미리 작성해두고 include하여 사용될 수 있음
• 일반적인 텍스트 파일도 include하여 템플릿에 포함 가능
• layout은 바깥쪽의 틀을 선언하고 가져다 쓰는 것
• include는 하나의 조각을 만들어놓고 가져다 쓰는 것

// listItem.pug
mixin listItem(title, name)
	tr
    	td title
       	td name
        
        

// main.pug
include listItem
table
	tbody
    	listItem('제목', '이름')

• mixin은 템플릿을 함수처럼 사용 가능
• include는 값을 지정할 수 없지만, mixin은 파라미터를 지정하여 값을 넘겨받아 템플릿에 사용 가능

 

3. Express.js와 pug의 연동

// app.js
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');



// request handler
res.render('main', {title: 'Hello Express'});

• app.set을 이용해 템플릿이 저장되는 디렉터리('views') 지정
• 어떤 템플릿 엔진을 사용할지 지정('view engine', 'pug')
• res.render 함수는 app.set에 지정된 값을 이용해 화면을 그리는 기능
  • render 함수의 첫 번째 인자는 템플릿의 이름
  • render 함수의 두 번째 인자는 템플릿에 전달되는 값

3-1. Express.js의 app.locals

// app.js
app.locals.appName = "Express"

// main.pug
h1= appName // <h1>Express<h1>

• Express.js의 app.locals를 사용하면 render 함수에 전달되지 않은 값이나 함수를 사용할 수 있음
• 템플릿에 전역으로 사용될 값을 지정하는 역할

3-2. express-generator 사용 시 템플릿 엔진 지정하기

$ express --view=pug myapp