[Node.js] Pug란?

Pug란?

javascript를 사용하여, HTML을 렌더링해주는 템플릿 엔진

 

Pug 설치

npm i pug

 

Pug 작성법

html에서 <>기호가 제외된다.

요소와 같은 줄에 있는 것을 태그로 감싼다.

태그에 속성을 넣을때 괄호()를 사용한다. - 태그(속성=값)

태그뒤에 .을 붙혀 클래스를 추가할 수 있다 - 태그 .class

태그뒤에 #을 붙혀 id를 추가할 수 있다 - 태그 #id

들여쓰기로 부모요소와 자식요소를 나눈다.

 

Pug와 express 연결

// src/app.js

app.set('views', path.join(__dirname, 'views');
app.set('view engine', 'pug');

 

// src/views/home.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Zoom
    body 
        h1 It works!