-서버에서 클라이언트로 보낼 html 형태를 템플릿으로 저장.
-동작시 서버에서 데이터와 html을 조합하여 보내줌.
템플릿 작성 문법/템플릿을 html로 변환하는 기능 제공
-Express.js 템플릿 엔진들
EJS- html과 유사한 문법의 템플릿 엔진
Mustach - 간단한 데이터 치환. 경량화 템플릿 엔진
Pug - 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃 등 기능 제공
-들여쓰기 표현식 : 가독성, 개발 생산성 좋음
-layout, include, mixin 등 강력한 기능 제공
-html 닫기 태그 없이 들여쓰기로 블럭 구분
-'='을 이용해서 전달받은 변수 사용 가능
-id/class는 태그 뒤에 이어서 바로 사용
-()를 사용해서 attribute 사용
html
head
title= title
body
//id
h1#hi 안녕
//class
a link(href='/') 홈페이지로 이동
-each ~in 표현식으로 주어진 배열의 값을 순환하며 html 태그를 만들 수 있음
-if/else if/else를 이용해 주어진 값의 조건을 확인하여 html 태그를 만들 수 있음
each item in arr
if item.name == 'new'
hi 새 문서
else
hi= `${tiem.name}`
-block을 포함한 템플릿 선언시 해당 템플릿을 레이아웃으로 사용 가능
-layout을 extends시 block 부분에 작성한 html 태그가 포함됨
-반복되는 웹사이트 틀을 작성하고 extends 개발시 매우 편리
---layout.pug---레이아웃 부분
html
head
title= title
body
block content
---main.pug---레이아웃 사용 부분
//레이아웃 사용 선언.
//위의 레이아웃이 그대로 적용.
extends layout
//레이아웃에서 선언한 content 하위에 h1이 들어감.
block content
h1 메인페이지
-자주 반복되는 구문 미리 작성후 include로 사용
-include는 값을 지정할 수 없음
-일반적인 텍스트 파일도 include하여 템플릿에 포함 가능
---title.pug---
//include될 부분
h1= title
---main.pug---
extends layout
block content
//include 사용 선언
include title
div.content
좋은 아침
pre
//pre 태그 안에 article.txt가 들어가게 됨
include article.txt
-템플릿을 함수처럼 사용할 수 있게 선언 가능
--include나 layout은 값을 지정할 수 없지만 mixin은 파라미터를 지정하여 값을 받아 템플릿에 사용
---list.pug---
mixin list(title, name)
//table row
tr
//table data
td title
td name
---main.pug---
include list
table
tbody
list('제목', '이름')
-app.set을 이용해 템플릿이 저장되는 디렉터리를 지정, 어떤 템플릿 엔진을 사용할지 지정.
-res.render(연결할 템플릿, {템플릿에 전달할 값}) : app.set에 지정된 값을 화면에 그리는 기능 수행
---app.js---
//기본적인 퍼그 사용 선언시 app.js에 쓰여지는 코드
//템플릿 디렉터리 : views
//view engine을 이용, pug 템플릿 엔진 사용 선언
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
---request handler---
// views 디렉터리 내부의 이름이 main인 pug 템플릿 렌더링
res.render('main', {
// 템플릿에서 쓸 데이터인 title: '제목입니다'를 템플릿에 적용시켜 html 생성.
title: '제목입니다',
});
-app.locals를 사용하면 render 함수에 전달되지 않은 값이나 함수를 사용 가능
-템플릿에 전역으로 사용될 값을 지정
---app.js---
app.locals.appName = "Express"
---main.pug---
h1= appName
//<h1>Express</h1>
-express-generator는 기본적으로 jade라는 템플릿 엔진을 사용
-jade는 pug의 전신으로 최신 지원을 위해 pug로 지정해야함
'--view' 옵션을 사용하여 템플릿 엔진을 지정
$ express -view=pug appName
익스프레스 설치->제네레이터 설치->퍼그 설정.