NODE JS - PUG 설치와 사용법

◎ Template Engine PUG의 장점

▼ 내용

Pug는 요즘 가장 핫한 Node Express Template Engine입니다.

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

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

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

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

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

Pug는 Jade였다

Pug는 기존에 Jade라는 이름을 가지고 있었습니다. 하지만 이미 상표권이 있는 이름이였기 때문에 Pug라는 이름으로 바꾸게 됩니다.​

---

◎ PUG 라이브러리 설치

▼ 내용

PUG 는 HTML 을 PUG 문법으로 작성하면 HTML 로 바꿔주는 기능을 한다.

pug 는 express의 패키지 view engine이다.

pug는 html파일들을 이쁘게 가공해준다.

pug는 템플릿 언어

npm install pug

설치가 끝나면 views 라는 폴더를 만들고 안에 파일은 .pug 라는 확장자를 붙인다

그이후 app.js 에 아래와같이

app.set('view engine' , 'pug');

그리고 라우터 응답받는곳에 아래처럼 적으면 /home 경로는 home.pug 로 연결된다

const home = (req,res) => res.render('Home'); //const home = (req,res) => res.send('Home');

만약 views/ 폴더가아닌 다른 폴더에서 view템플릿을 찾을려면

app.set('views','바꿀폴더명'); 으로 정의 해줘야한다

app.set(view engine 은 view의 확장자 ​

app.set(views 은 view의 폴더명

◎ pug의 문법

▼HTML 작성법​

아래 소스와 같이

탭을 하면 안에 자식 노드가되고

탭을 안하면 동등한 형제 노드가 된다.

닫는 태그는 따로 할필요없이 다음 태그를 적으면 알아서 된다.

//main.pug doctype html html head title Wetube body main block content footer span &copy: WeTube

​▼ ( extends : 상속후 컨텐츠 추가)

pug는 레이아웃으로 짜둔 .pug 를 extends 파일경로 써줘서

레이아웃 .pug 들을 상속? 같은걸 받을수 있다.

위에서 작성한 레이아웃을 상속받아서 block content 의 부분을 p Hello 로 바꿔준 것.

만약 extends 를 하는 파일에 block 을 적어주지 않으면 에러가난다

//home.pug extends layouts/main block content p Hello!!

▼ PARTIALS ( include : spring tiles 같은 것)

이것도 spring tiles 와 비슷하다 다른 파일을 이 html 안에 갖고오는것이다.

extends 와 차이점이라면 extends는 상속받아서 block 부분을 새로 작성하는것이고

include는 그냥 있는 그대로 껴넣는다

include ../partials/footer

​

​ 태그의 class 이름 추가 방법

PUG 는 HTML 코드로 작성해도 상관없다

PUG의 문법으로 할려면 HTML 태그의 속성들은 () 안에 넣어야하고 각 콤마를 넣어야한다

link.babo_blo (rel="stylesheet", href="../babo") <link rel="stylesheet" href="../babo class="babo_blo"> .footer__icon <div class="footer__icon"></div>

​ javascript 작성법

#{ } 안에 javascript 문법을 적으면된다.

실행시키고 개발자도구로보면 결과값만 나온다.

#{new Date().getFullYear()} //현재 년도 구하는 javascript 코드