Untitled

Template Engine이 하는 일

서버에서 정적 웹 사이트를 렌더링하는 것이 가능하지만 코드 복제 및 유연성 부족을 포함하여 이 접근 방식에는 많은 제한이 있습니다. 특히 데이터베이스에서 데이터를 읽을 때 그렇습니다. Express.js는 템플릿 엔진을 통해 서버 측 애플리케이션에서 동적 HTML 페이지를 생성하는 방법을 제공합니다.

Template Engine 종류

Untitled

Template Engine 사용방법

패키지 설치

yarn add hbs

템플릿 엔진을 서버에 등록

// 특정 엔진을 템플릿 엔진으로 사용하기 위한 설정
app.set("view engine", "hbs");
// view 파일들이 모여있는 폴더를 명시
app.set("views", path.join(__dirname, "views"));

app.set()

application setting

Untitled

Template 생성

스크린샷 2023-11-19 오후 10.51.30.png

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="public/css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>{{imageTitle}}</h1>
    <img src="public/images/profile.png" alt="profile" />
  </body>
</html>

res.render()

const path = require("path");

function getPost(req, res) {
  // path.join은 여러 세그먼트를 하나의 경로로 결합
  // res.sendFile(path.join(__dirname, "..", "public", "images", "profile.png")); // __dirname은 현재 실행하는 파일의 절대 경로

  res.render("index", { imageTitle: "It is a forest" });
}

module.exports = { getPost };

<aside> 💡 / 경로에 왔을 때 index.hbs 템플릿 파일 이용하고 템플릿 파일에 이용된 변수를 넣어 줍니다.

</aside>