템플릿 엔진 사용하기 - 퍼그(제이드)

퍼그(제이드)

문법이 간단해서 코드양이 줄어들기 때문입니다.  루비(Ruby)를 사용해봤다면 문법이 비슷해서 빠르게 적응할 수 있으며, 물론 루비를 잘 모르더라도 문법이 쉬워서 빠르게 배울 수 있습니다.

 

퍼그를 설치합니다.

 

$ npm i pug

 

익스프레스와 연결하려면 app.js에 다음과 같이 작성되어야 합니다.

const express = require("express");
const morgan = require("morgan");
const cookieParser = require("cookie-parser");
const session = require("express-session");
const dotenv = require("dotenv");
const path = require("path");

dotenv.config();
const indexRouter = require("./routes");
const userRouter = require("./routes/user");
const app = express();
app.set("port", process.env.PORT || 3000);
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");

app.use(morgan("dev"));
app.use("/", express.static(path.join(__dirname, "public")));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(
  session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
      httpOnly: true,
      secure: false,
    },
    name: "session-cookie",
  })
);

app.use("/", indexRouter);
app.use("/user", userRouter);

app.use((req, res, next) => {
  console.log("모든 요청에 다 실행됩니다.");
  next();
});
app.get(
  "/",
  (req, res, next) => {
    console.log("GET / 요청에서만 실행됩니다.");
    next();
  },
  (req, res) => {
    throw new Error("에러는 에러 처리 미들웨어로 갑니다.");
  }
);

app.use((req, res, next) => {
  res.status(404).send("Not Found");
});

app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).send(err.message);
});

app.listen(app.get("port"), () => {
  console.log(app.get("port"), "번 포트에서 대기 중");
});

 

views는 템플릿 파일들이 위치한 폴더를 지정하는 것입니다. res.render 메서드가 이 폴더 기준으로 템플릿 엔진을 찾아서 렌더링합니다. res.render('index')라면 views/index.pug를 렌더링합니다. res.render('admin/main')이라면 views/admin/main.pug를 렌더링합니다.

view engine은 어떠한 종류의 템플릿 엔진을 사용할지를 나타냅니다. 현재 pug로 설정되어 있으므로 그대로 사용하면 됩니다.