한윤석 개발 블로그

배운 것을 적는 블로그입니다.

Using template engines with Express

등록일: 2019-02-05
수정일: 2019-02-05
  • 템플릿 엔진은 static 템플릿 파일들을 사용할 수 있게 해줍니다.
  • 런타임때 템플릿 엔진은 템플릿 파일에 있는 변수를 실제 값으로 변환합니다. 그리고 템플릿을 HTML파일로 변형시킵니다.
  • 그래서 HTML페이지 작성을 더 쉽게 도와줍니다.
  • 유명한 템플릿 엔진들을 다음과 같이 있습니다.
  • 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!' })
})

Sources

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

자바스크립트로 직접 만들면서 배우는 - 자료구조와 알고리즘 강의 바로 가기
기계인간 이종립, 소프트웨어 개발의 지혜 - Git 강의 바로 가기

코드숨에서 매주 스터디를 진행하고 있습니다. 메일을 등록하시면 새로운 스터디가 시작될 때 알려드릴게요!