[ 생활코딩 - Node.js 활용하기 ] 06. pug - extends

Pug

# Pug (구 Jade)

 : Node Express Template Engine

- HTML을 간단하게 표현해서 가독성이 좋다.

- 마크업 문법보다 코드량이 적어 생산성이 좋아진다.

- JS 연산 결과를 쉽게 보여줄 수 있다.

- 정적인 부분과 동적인 부분을 따로 할 수 있다.

- 타 Express Engine보다 Google Trend 수치가 높다.

출처 ) https://dydals5678.tistory.com/91 ​

 

---

 

Pug 라이브러리 설치 

npm install pug

---

Pug  - 템플릿 상속 - extends

- .js

var express = require('express');
var app = express();
app.set('view engine','pug');
app.set('views','pug');

app.get('/view',(req,res)=>{
  res.render('view');
})
app.get('/add',(req,res)=>{
  res.render('add');
})
app.listen(3003,()=>{
  console.log('Connect 3003 port!');
})

- .pug

- layout.pug html     head         body     ol         li JavaScript         li Nodejs         li expressjs     article         block content

- view.pug extends ./layout block content     | JavaScript is ...

- add.pug extends ./layout block content     form         input(type="text")         input(type="submit")

- 결과

- 중복된 부분의 수정은 layout.pug만 해주면 되기 때문에 유지보수 작업이 매우 간단해진다.