넌적스

넌적스(Nunjucks)는 퍼그의 HTML 문법 변화에 적응하기 힘든 분에게 유용한 템플릿 엔진이며, 파이어폭스를 개발한 모질라에서 만들었습니다. HTML 문법을 그대로 사용하되 추가로 자바스크립트 문법을 사용할 수 있으며, 파이썬의 템플릿 엔진인 Twig와 문법이 상당히 유사합니다.

넌적스를 설치합니다.

$ npm i nunjucks

 

view engine 퍼그 대신 넌적스로 교체합니다.

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");
const nunjucks = require("nunjucks");

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", "html");

nunjucks.configure("views", {
  express: app,
  watch: true,
});

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"), "번 포트에서 대기 중");
});

 

퍼그와는 연결 방법이 다소 다릅니다. configure의 첫 번째 인수로 views 폴더의 경로를 넣고, 두 번째 인수로 옵션을 넣습니다. 이때 express 속성에 app 객체를 연결합니다. watch 옵션이 true이면 HTML 파일이 변경될 때 템플릿 엔진을 다시 렌더링합니다.

파일은 pug와 같은 특수한 확장자 대신 html을 그대로 사용해도 됩니다. 넌적스임을 구분하려면 확장자로 njk를 쓰면 됩니다. 단, 이때는 view engine도 njk로 바꿔야 합니다.