<Express.js> Pug 설치 및 설정

View engine인 pug는 express에 설치하기도 쉽구요. 직접 템플릿을 작성하는 것보다 훨씬 빠른 효율을 얻을 수 있습니다.
express에 view와 관련된 view-engine 설정이나 기본 디렉토리 설정은 여기를 참고해주세요.

project

youtube
 *|app.js
 +|views
   +|home.pug
  |controllers
   *|videoController

pug 설치

터미널에 %npm install pug를 입력합니다.

app.js

app.js 에서 아래 코드를 추가해주어 express view-engine 설정을 바꾸어줍니다.
기본 view-engine은 undefined 입니다.

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

express views(pug 파일 위치) 설정

기본 설정은 /views인데요. 그대로 사용하도록 하겠습니다. 프로젝트 폴더안에 views 폴더를 만들어줍니다.
만약에 변경을 원하면 아래와 같은 코드를 app.js에 추가해줍니다.

app.set('views', 폴더명);

home.pug

views폴더 안에 home.pug 파일을 생성해줍니다.

Pug 문법

HTML과의 비교

<p>hello</p>를 pug로는 p hello라고 표현합니다. 또한 pug파일 내에서 HTML을 사용해도 정상적으로 받아들입니다. 들여쓰기를 통해서 자식 구분은 해주어야 합니다!

id 작성 방법

태그명#idName을 해줍니다.

class명 작성 방법

태그명.className을 해주면 되구요. 여러개의 클래스명을 할당한다고 하면 태그명.className.className2이런식으로 해주면 됩니다.

attribute 작성 방법

form(action="#", method="get")과 같이 attribute를 괄호안에 작성해주고 attribute끼리는 ,를 이용해서 구분합니다.

javascript code 넣기

p #{video.description}이것처럼 #{}을 작성하면 괄호안에 javascript code를 작성할 수 있습니다. 다른 방법으로 p=video.description을 사용해도 동일합니다.

controller

videoController

우리가 앞선 글에선 사용자가 특정 url에 접근했을때 텍스트만을 response해줬죠. 이제 res.send 대신 res.render를 이용해서 pug파일을 보여줍시다.
앞에서 설정을 통해 view-engine과 디렉토리를 정해주었기 때문에 "home"을 입력하면 views폴더에서 pug확장자의 파일을 찾아서 render해줍니다.

export const home = (req, res) => res.render("home");