템플릿 엔진

템플릿 엔진을 설명하기 전에

템플릿 엔진의 필요성을 부연하기 위해 정적 파일과 동적 파일 설명

정적파일

html,css,js 파일과 같이 한번 만들어진 자원이 언제나 똑같이 보이는 리소스

동적파일

사용자와 서버가 상호작용하며 페이지 내용의 일부 혹은 전부가 그때그때 생성되는 파일

정적 파일과 동적 파일의 장단점은 서로 균형(Trade-off)을 이룸.

템플릿 엔진을 사용하면 각 장점을 모두 얻을 수 있음.

'템플릿 엔진'이란?

템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어

변수 사용 가능
변경사항 반영 위해 서버 재시동X
코드량 감소
재사용성 증가
유지보수 용이

템플릿 엔진 종류

pug(jade)
ejs(Embedded JavaScript Template) - 자바스크립트가 내장되어 있는 html 파일
Handlebars
nunjucks

ejs 사용예시

index.js파일

const path = require("path");
const express = require("express");
const app = express();

app.set("port", process.env.PORT || 3000);
app.set("views", __dirname + "/views");
app.set("view engine", "ejs");

app.get("/", (req, res) => {
  res.render("index", {
    People: [
      {
        name: "Gildong",
        age: "15",
      },
      {
        name: "Jinsu",
        age: "27",
      },
      {
        name: "Hyena",
        age: "25",
      },
    ],
    title: "Express",
  });
});

app.listen(app.get("port"), () => {
  console.log(app.get("port"), "번 포트에서 서버 실행 중..");
});

코드의 부연설명(6~7번째 부분, +10번째 부분)

views, 템플리트가 있는 디렉토리. 예: app.set('views', './views')
view engine, 사용할 템플리트 엔진. 예: app.set('view engine', 'pug')
(10번째) render의 첫번째 인자로 ejs파일명을 적어주면 ejs에 title이라는 변수와 people이라는 객체를 넘겨줌
ejs로 보내진 변수는 <%%>태그를 통해 해당 변수를 받아 결과 표시

<% 자바스크립트코드 %>

<%= 출력할 자바스크립트 변수(객체) %>

<%# 주석 %>

index.ejs파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <% for(let i=0; i<People.length; i++) { %>
        <p>Welcome to <%- People[i].name %></p>
    <% } %>
  </body>
</html>

'nodeJs' 카테고리의 다른 글

웹 소켓(Wep socket) 사용과 버퍼출력 오류 (0)	2024.03.10
express 모듈을 사용해 서버 만들기(2) (0)	2024.02.26
express 모듈을 사용해 서버 만들기(1) (1)	2024.02.25
nodeJS모듈로 서버 만들기 (0)	2024.02.24

mickey7

템플릿 엔진