[Node.js] Pug 라이브러리 설치 및 사용법

Node.js의 res.send를 사용하면 간단하게 페이지에 문자를 띄울 수 있다.

하지만 페이지가 복잡해지고 자바스크립트 문법까지 들어간다면 한계에 부딪힐 것이다.

 

Pug 라이브러리를 사용하면 간편하게 html을 작성할 수 있고

기본적인 자바스크립트 문법도 같은 파일에 작성할 수 있다.

 

 

먼저 Pug를 설치하는 방법이다.

터미널의 아래의 코드를 입력한다.

 

npm install pug

 

Pug와 Express를 연동하려면 Express의 기본값 세팅을 바꿔줘야 한다.

 

Express 공식문서

 

app.set 메서드로 view engine을 Pug로 변경한다.

 

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

 

위의 공식문서를 보면 view와 관련된 파일은 views 폴더 안에 넣어야 한다고 나와있다.

views라는 폴더를 만들고 그 안에 main.pug와 같은 형식의 파일을 만든다.

 

만약에 views 폴더가 제일 위에 있지 않고 다른 폴더에 감싸 져 있다면 

한 가지 더 설정을 해주어야 한다.

( project/views O

  project/src/views X )

 

만약 위와 같이 scr폴더 안에 views 폴더를 넣고 싶다면 app.set으로 설정을 변경한다.

app.set("views", process.cwd() + "/src/views");

"views"의 기본값은 process.cwd() + /'views'이다.

 

 

 

Pug의 편리한 점은 html 코드에서 태그를 닫지 않아도 된다는 점이다.

 

1에서 5까지의 list를 화면에 출력하는 예제이다.

 

// numList.pug

doctype html
html(lang="ko")
    head
        title Document
    body 
        ul
            li 1
            li 2
            li 3
            li 4
            li 5

 

Pug는 Python처럼 탭으로 각 태그를 구분한다. 

이제 위의 numList.pug 파일을 main.js 파일에 연결한다.

 

// main.js

import express from "express";
const app = express();

const num = (req, res) => {
  return res.render("numList");
};

app.get("/num", num);
app.set("view engine", "pug");


app.listen(4000, () => {});

 

res.render 메서드에 pug 파일의 이름을 넣으면 pug의 내용이 화면에 출력된다.

 

출력 결과

 

1~5를 변수로 만드는 것도 가능하다.

 

// main.js

import express from "express";

const app = express();

const num = (req, res) => {
  const count = 1;
  return res.render("numList", { count: count });
};

app.get("/num", num);
app.set("view engine", "pug");


app.listen(4000, () => {});

 

count 변수를 선언하고 object 형태로 numList.pug 파일에 넘겨준다.

 

// numList.pug

doctype html
html(lang="ko")
    head
        title Document
    body 
        ul
            li #{count++}
            li #{count++}
            li #{count++}
            li #{count++}
            li #{count++}

 

위에서 넘겨받은 count 변수를 #{ } 안에서 사용할 수 있다.

실행해보면 같은 결과가 나타나는 것을 확인할 수 있다.

 

출력 결과