Using template engines with Express

• 템플릿 엔진은 static 템플릿 파일들을 사용할 수 있게 해줍니다.
• 런타임때 템플릿 엔진은 템플릿 파일에 있는 변수를 실제 값으로 변환합니다. 그리고 템플릿을 HTML파일로 변형시킵니다.
• 그래서 HTML페이지 작성을 더 쉽게 도와줍니다.
• 유명한 템플릿 엔진들을 다음과 같이 있습니다.
  • Pug
  • Mustache
  • EJS
• Express application generator를 사용하면 jade를 기본으로 사용합니다.
• 사용가능한 템플릿 엔진들은 다음을 참고해주세요. Template Engines (Express wiki)
• Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More
• 템플릿파일을 렌더링하기위해 application setting properties를 참고해서 app.js에 설정하여야 합니다.
  • views는 템플릿 파일이 위치하는 디렉토리입니다.
    • 예) app.set('views', './views')
    • 기본값은 root 디렉토리 입니다.
  • view engine설정은 사용할 템플릿 엔진을 설정하비다.
    • 예) `app.set(‘view engine’, ‘pug’)
• pug를 설치하려면 다음과 같이 입력해주세요.

$ npm install pug --save

• 설치 후 다음과 같이 설정해 줍니다.

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

• 별도의 module을 불러오는 작업 없이 express가 내부에서 처리합니다.

• index.pug라는 파일을 만든 후 다음과 같이 입력합니다.

html
  head
    title= title
  body
    h1= message

• 그 다음 index.pug를 렌더링하도록 라우트를 생성합니다.
• 만약 view engine속성을 설정하지 않았다면 반드시 view의 확장자를 입력해줘야 합니다. 설정했다면 생략해도 됩니다.

app.get('/', function (req, res) {
  res.render('index', { title: 'Hey', message: 'Hello there!' })
})

• /로 요청했을 때 HTML로 렌더링 될 것 입니다.
• 더 자세한 내용은 Developing template engines for Express을 참고하세요.

Sources

• https://expressjs.com/en/guide/using-template-engines.html