[NodeJS] 템플릿 엔진(PUG)
PUG
템플릿엔진은 자바스크립트를 사용해서 HTML을 렌더링할 수 있게 해준다. 또한 문법이 간단해서 코드의 양이 줄어든다.
사용방법
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
views는 템플릿 파일들이 위치한 폴더를 지정하는 것입니다. res.render 메서드가 이 폴더를 기준으로 템플릿 엔진을 찾아서 렌더링합니다.
PUG 문법
1) HTML 표현
- PUG
doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') - HTML ```html <!DOCTYPE html>
- PUG
```pug
#login-button
.post-image
span#highlight
p.hidden.full
- HTML ```html
- PUG
```pug
p Welcome to Express
button(type='submit') 전송
- HTML ```html
Welcome to Express
### 2) 변수
---
HTML과 다르게 자바스크립트 변수를 템플릿에 렌더링 할 수 있다.
```javascript
router.get('/', (req, res, next) =>
res.render('index', {title: "Express"});
);
위와 같이 자바스크립트에서 변수 객체를 전달해주면 PUG에서 전달 받아서 사용할 수 있다.
- PUG
h1= title p Welcome to #{title} button(class=title, type='submit') 전송 input(placeholder=title + ' 연습') - HTML ```html
Express
Welcome to Express
서버에서 받은 변수는 다양한 방식으로 PUG에서 사용할 수 있다. 변수를 텍스트로 사용하고 싶다면 태크 뒤에 =를 붙인 후 변수를 입력합니다. 속성에도 =를 붙인 후 변수를 사용할 수 있습니다. 텍스트 중간에 변수를 넣으려면 #{변수}를 사용하면 됩니다.
### 3) 반복문
---
- PUG
```pug
ul
each frui, index in ['사과', '배', '오렌지', '바나나', '복숭아']
li= (index + 1) + '번째 ' + fruit
- HTML ```html
- 1번쨰 사과
- 2번쨰 배
- 3번쨰 오렌지
- 4번쨰 바나나
- 5번쨰 복숭아
### 4) 조건문
---
```pug
if isLoggedIn
div 로그인 되었습니다.
else
div 로그인이 필요합니다.
5) include
header나 footer 처럼 반복적으로 사용되는 부분의 번거로움을 없애준다.
위의 그림고 같이 include 부분에 header와 footer를 넣어 줄 수 있다.
6) extends와 block
레이아웃을 정할 수 있다. 
레이아웃이 될 파일에는 공통된 마크업을 넣되, 페이지마다 달라지는 부분을 block으로 비워둔다.
