Redering More than Static HTML
•
이제까지는 정적인 HTML 페이지들만 사용해 왔지만, 실제로는 일반적인 Applicatione들은 정적인 HTML을 이용하지 않는다.
•
일반적으로 서버의 데이터베이스에서 다뤄지는 데이터들이 있다면, 이 데이터에 따라서 동적으로 HTML을 구성하여 결과를 내놓게 된다. 이렇듯 동적으로 처리되는 데이터들에 맞춰서 HTML 페이지를 구성하기 위해서 HTML에 Render되는 데이터들에 대한 관리와 Template이 필요하다.
•
이런 Template Code들은 Browser에서 생성되어 구동되는 것이 아니라, Server와 On Demand for the Request에 의해서 생성되어 보이게 되는 것이다.
•
또한 Template Engine들은 단순히 동적인 HTML을 제공할 뿐 아니라, Input Data가 변하지 않는다고 할 때 내장된 Template에 맞춰서 Caching을 하는 작업도 가능하게 한다. 이를 통해 매 Request마다 Render되는 것들에 대해서 Rebuild를 줄여 Template을 조금 더 빨리 Return할 수 있도록 만들 수 있다.
Templating Engines - An Overview
•
HTMLish Template 위에 Template Engine을 통해 Node.js / Express.js Content를 HTML Code로 작성하여 올린다. 이렇게 되면 일반 사용자들은 Template에 데이터들이 HTML로 올라간, 일반 HTML File만 보게 된다.
•
보편적으로 사용하는 Template은 EJS, Pub(Jade), Handlebars 이렇게 세 종류이다.
•
Normal HTML Markup을 쓰는 Template은 EJS, Handlebars이고 그렇지 않은 Template은 Pug이다.
•
EJS: Use Normal HTML and Plain JavaScript in your Templates
•
Pug: Use Minimal HTML and Custom Template Language
•
Handlebars: Use Normal HTML and Custom Template Language
Installing and Using Template
•
아래 명령어를 통해서 Template들을 설치할 수 있다.
npm install —save ejs pug express-handlebars
•
이렇게 이용하게 되는 Template Engine들은 Template Code들을 일반 HTML로 바꿔준다.
•
Template Code를 작성 했다면, 이대로 서버를 구동했을 때 Template Code들이 작동하는가? → No!
•
Template Code를 이용하라고 할 때 어떤 Template을 쓸지 app의 Method를 통해서 명시만 했을 뿐! 별도로 어떤 Template Code를 Render하라고 명시를 안 해줬으므로 별도로 명시를 해줘야 한다!
•
Template Code들을 Render 시키려면, Response로 뿌리는 sendFile() Method를 render() Method로 대치해야 한다. (render() Method는 Express에서 제공하는 Method이다.)
•
render()로 주는 인자는 sendFile() 때와 달리 Path와 Extension을 입력하지 않아도 된다. (이전에 이미 확장자와 Path에 대해서 설정 했기 때문이다.)
Outputting Dynamic Content
•
Render Function에 이용된 Template File에 Inject할 데이터를 두 번째 인자로 주어 Template이 해당 데이터를 이용할 수 있도록 하면 된다. (단, 인자로 넘길 때는 Map Data로 넘겨야 한다.)
•
Layout을 이용하고 싶지 않을 경우, 두 번째 인자로 넘기는 Map Data에 layout: false값을 준다.
Adding a Layout
•
Template Boiler Plate를 추가하고 난 뒤, 일일이 css Script들을 Import하고 반복되는 코드들을 작성하기는 귀찮은 노동임이 확실하다. 이를 해결하기 위해서 Layout을 생성할 수 있다.
•
일반적으로 이런 Layout파일들은 views 디렉토리 하위로 layouts라는 디렉토리에서 관리한다.
•
작성한 Layout들은 다른 Template 파일들로 확장시킬 수 있고, 이렇게 하기 위해서 몇 Hook들과 Placeholder들을 두어 각 Template 파일의 Content들이 Layout에 녹아들 수 있도록 할 수 있다.
•
추가로 Content들이 들어올 수 있음을 Layout에 표기해야 한다.