나의 발자취

[node.js] HTML 템플릿 엔진 PUG, HandleBars, EJS 본문

Backend

[node.js] HTML 템플릿 엔진 PUG, HandleBars, EJS

달모드 2024. 9. 26. 12:27

템플릿 엔진은 동적인 HTML 페이지를 쉽게 생성할 수 있다.

템플릿 엔진은 HTML 파일에 node.js로 짠 데이터를 주입하여 동적으로 콘텐츠를 생성한다.

 

요즘 웹개발의 JS 프레임워크 엔진으로는 별도의 React, Vue.js 등을 사용하긴 하지만.. node를 쓰면서 간단하게 템플릿으로 웹개발을 할 수 있는 방법 중 하나로 HTML 템플릿 엔진인 PUG, Handlebars, EJS를 하나씩 사용하면서 각자의 차이점들을 맛보는 시간이다.

 

 

PUG

PUG 템플릿 엔진을 작업하기 위한 사전작업

1. 패키지 설치

 

새로운 빈 폴더를 만들고, 터미널에 npm init -y 를 친다.

 

그리고 npm i express

npm i pug 를 순서대로 입력한다.

(아니면 한줄에 npm i express pug)

 

express, pug 확인

 

 

2. 폴더, 파일 만들기

views폴더와, app.js 파일을 각각 생성한다.

 

 

PUG 엔진을 사용하기 위해서, 명시를 해준다.

// PUG template
app.set("view engine", "pug");
app.set("views", "./views");

// default router
app.get("/", (req, res) => {
const data = {
title: "제목이 들어갑니다",
message: "안녕하세요 퍼그 ",
};
res.render("index", data);
});
 

 

 

* render()를 사용하면 템플릿 엔진에 데이터를 입력해준다.

res.render("index", data);

이러한 객체가 index라고 하는 파일로 들어가게 된다.

 

* index 파일 안에 title 변수가 있으면 "제목이 들어갑니다"라는 값으로 바뀌게 되고, message 변수가 있으면 "안녕하세요 퍼그" 값으로 바뀌게 된다.

 

3. pug 파일 생성

views 폴더 안에 index.pug 파일을 생성해준다.

 

그리고 pug 파일 안에 html을 작성해준다.

PUG 전용 문법이 있어서 이에 유의하면서 적어준다.

 

 

중간 점검을 해준다.

 

 

이제 handlebars로 넘어간다.

 

HandleBars 

HandleBars 템플릿 엔진을 작업하기 위한 사전작업

npm init -y

npm i express

npm i hbs

npm i express-handlebars

터미널에 입력해준다.

(아니면 한줄에 npm i express hbs express-handlebars)

 

 

app.js 작업

const express = require("express");
const { engine } = require("express-handlebars"); // 구조구문 할당: 많은 것들 중에서 필요한 것인 'engine'만 가지고 온다.

const app = express();
const PORT = 3000;

app.listen(PORT, () => {
console.log(`${PORT} 웹 서버가 뜨고 있습니다.`);
})

 

 

역시나 위에서처럼 handlebars 를 위한 작업을 해준다.

const express = require("express");
const { engine } = require("express-handlebars"); // 구조구문 할당: 많은 것들 중에서 필요한 것인 'engine'만 가지고 온다.

const app = express();
const PORT = 3000;

// handlebars 작업
app.engine('handlebars', engine());
app.set("view engine", 'handlebars');
app.set("views", './views');


app.listen(PORT, () => {
console.log(`${PORT} 웹 서버가 뜨고 있습니다.`);
})

 

핸들바는 사용을 하기 위한 기본 레이아웃 작업이 필요하다.

여기서부터 <집.중>

 

1. views > layouts 폴더 생성

2. layouts 폴더 안에 main.handlebars 파일 생성해서 아래 내용 작업

 

3. views 폴더 안에 index.handlebars 파일 생성해서 아래 내용 작업

 

 

EJS

EJS 템플릿 엔진을 작업하기 위한 사전작업

npm init -y

npm i express

npm i ejs

npm i nodemon

(아니면 한줄에 npm i express ejs nodemon)

 

까지 입력해 패키지를 설치해주고 아래처럼  스크립트를 추가해준다.

 

 

레이아웃 작업

views > index.ejs를 생성해주고, 안에 내용을 작성해준다.

 

EJS에서는 html 태그를 그대로 사용할 수 있다!

<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= message %></h1>
    <p>환영합니다. EJS 예제입니다.</p>
  </body>
</html>

 

그대로 넣어준다.

 

npm run dev

 

로 실행하면

 

 

EJS 템플릿 안에서 for문 쓰기

// app.js

app.get("/for", (req, res) => {
  res.render("for");
});

 

// views > for.ejs 

<html>
    <head>
        <title>
        for문 예제
        </title>
        
    </head>
    <body>
        <% for(let i=0; i<10; i++){ %>
            <h1>태그 연습(<%=i%>)</h1>
        <% } %>
    </body>
</html>

라고 해준다.

 

변수를 Html에 직접 사용할 때는 <%=을 써주고,

일반적인 문법이 들어갈 때에는 <%만 써준다.

 

 

EJS 템플릿 안에서 if문 쓰기

<html>
    <head>
        <title>
        if 문 예제
        </title>
        
    </head>
    <body>
        <% 
            for(let i=0; i<10; i++){
                if(i % 2 == 0) {
        %> 
            <h1>태그연습입니다.(<%=i%>)</h1>

        <%
                }
            }
        %>
    </body>
</html>

 

 

for, if문에 작용하는 문법들은 퍼센트 태그들로 감싸준다.

퍼센트 태그 안의 문법은 JS로 인식된다.

 <% 
            for(let i=0; i<10; i++){
                if(i % 2 == 0) {
        %>
        <%
                }
            }
        %>
728x90
반응형

'Backend' 카테고리의 다른 글

SQLite NodeJS 모듈 이용해서 게시판 구현하기 (2) /list  (0) 2024.09.27
SQLite NodeJS 모듈 이용해서 게시판 구현하기 (1) 초기설정  (0) 2024.09.27
[node.js]express, nodemon 이용하기  (1) 2024.09.26
node.js 파일 간 함수 전달 (module.exports), 파일 읽고 쓰기  (1) 2024.09.25
node.js - npm모듈 설치하기  (0) 2024.09.24
'Backend' Related Articles more
Comments