템플릿엔진이란 ?
SSR을 구현하는 방법으로, 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장
동작 시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성
=> 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능을 제공
템플릿엔진의 종류
EJS - html과 유사한 문법의 템플릿엔진
Mustache - 간단한 데이터 치환 정도만 제공하는 경량화된 템플릿 엔진
Pug - 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃 등 강력한 기능을 제공
(가독성이 좋고 개발 생산성이 높음.)
Pug알아보기
express-generator사용 시 기본적으로 jade라는 템플릿엔진을 사용하고 있으며,
jade는 pug의 이전이름으로 템플릿엔진을 pug로 지정해 줘야햔다.
express --view=pug myapp
*--view옵션을 사용하여 템플릿 엔진을 지정할 수 있음.
문법
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
h1#greeting 안녕하세요
p Welcome to #{title}
a.link(href="/") 홈으로
* Pug에서 가장 중요한 것은 들여쓰기!
Tab으로 들여쓰는 코드를 작성했으면 계속 Tab으로 들여쓰도록 통일해야하고, 띄어쓰기(Space) 두 번을 사용한다면 계속해서 띄어쓰기 두 번으로 통일해야 한다.
- 닫는 태그가 없다.
- 들여쓰기로 종속성을 구별한다.
- 태그를 선언할 때 이름만 쓰면된다.
- ID와 CLASS를 정해줄때 CSS의 기본 선택자를 사용하면 된다. ex) div.class, div#id
- 태그 없이 ID와 CLASS만 선언할시 div 태그를 사용한다. ex) .class == div.class
- 태그에 속성은 괄호를 이용한다. ex) input(type=”text”)
- 여러 줄을 사용하고 싶으면 |를 사용한다.
- Script나 CSS로 태그를 사용할 땐 끝에 .을 입력한다. ex) script., style.
- 템플릿 안에서 javascript를 사용하려면 앞에 -(Hyphen)을 입력한다.
- nodejs에서 변수를 받아올 때는 #{변수명}을 이용한다.
layout
--- layout.pug ---
html
head
titile=title
body
block content
--- main.pug ---
extends layout
block content
h1 Main Page
block을 포함한 템플릿을 선언하면 해당 템플릿을 layout으로 사용할 수 있다.
layouy을 extends 하면 block부분에 작성한 HTML태그가 포함된다.
반복되는 웹사이트의 틀을 작성해두고 extends 하며 개발하면 매우 편리한 기능이다!
include
--- title.pug ---
h1=title
--- main.pug ---
extend layout
block content
include title
div.content
안녕하세요
pre
include article.txt
자주 반복되는 구문을 미리 작성해두고 include하여 사용할 수 있다.
일반적인 텍스트 파일도 include하여 템플릿에 포함 가능하다.
mixin
mixin을 사용하여 템플릿을 함수처럼 사용할 수 있게 선언할 수 있다.
include는 값을 지정할 수 없지만 mixin은 파타미터를 지정하여 값을 넘겨받을 수 있다
--- listItem.pug ---
mixin listItem(title,name)
tr
td title
td name
--- main.pug ---
include listItem
table
tbody
listItem('제목','이름')
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을 이용해 템플릿이 저장되는 디렉토리를 지정하며, 어떤 템플릿 엔진을 사용할 지 지정할 수 있다.
res.render 함수는 app.set에 지정된 값을 이용해 화면을 그리는 기능을 수행한다.
render 함수의 첫번째 인자는 템플릿의 이름, 두번째 인자는 템플릿에 전달되는 값
express.js의 app.locals
--- app.js ---
app.locals.appName="Express"
--- main.pug ---
h1=appName
이때, main.pug를 실행시키면 <h1>Express</h1> 가 만들어지게 된다.
app.locals를 사용하면 render함수에 전달되지 않은 값이나 함수를 사용할 수 있다.
템플릿에 전역으로 사용될 값을 지정하는 역할이다.
refernce