nunjucks 설치

npm install nunjucks

nunjucks란?

• Javascript를 이용해 HTML을 렌더링 할 수 있도록 돕는 템플릿 엔진이다.

HTML 표현

• HTML 문법을 그대로 사용하고 추가로 자바스크립트 문법을 사용할 수 있습니다.

초기 설정

const express = require("express")
const nunjucks = require("nunjucks")
const app = express()

const PORT = process.env.SERVER_ROOT || 3000;

app.listen(PORT, HOST, () => {
  console.log(`Server Start`);
})

• nunjucks 모듈을 불러온다.
• express와 함께 사용하기 위해 express 모듈도 불러왔다.

app.set("view engine", "html")

• view engine, 사용할 템플릿 엔진 확장자을 설정해 준다.
• nunjucks는 njk라는 특수한 확장자가 존재하지만 html을 그대로 사용해도 된다.
• 템플릿 엔진을 사용하겠다는 의미이다.

nunjucks.configure([path], [opts]);

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

• 인자를 모두 적어 주거나 둘 중 하나만 적어줘도 된다.
• path
  • 템플릿 파일이 존재하는 폴더의 경로를 넣어주면 된다.
  • 현재 작업 디렉토리에 상대적인 경로를 넣어주면 된다.
  • 템플릿이 경로에 있음을 알리는 용도다.
  • 기본값은 현재 작업 디렉토리이다.
• opts
  • express를 사용하려면 express: app을 적어주면 된다.
  • 사용할 express 객체를 적어준다.
  • 참고

res.render(view [,locals][,callback]

app.get("/", (req, res) => {
  const name = req.query.name
  res.render("index", {name: name}, (err, html) => {
  })

view를 렌더링하고 렌더링된 HTML 문자열을 클라이언트에게 보낸다.

• view
  • 렌더할 파일을 의미한다.
• locals(선택 사항)
  • 렌더할 파일에 넘겨줄 객체를 적어준다.
• callback(선택 사항)
  • 오류와 렌더링된 문자열을 반환한다.