ejs 템플릿 엔진 사용하기

BackEnd/Node.js

ejs 템플릿 엔진 사용하기

Bumang 2024. 7. 8. 10:36

EJS란?

EJS (Embedded JavaScript Templating)은 JavaScript 코드에서 HTML을 생성할 수 있게 해주는 템플릿 엔진이다. Express와 같은 Node.js 애플리케이션에서 자주 사용된다. EJS를 사용하여 서버에서 HTML을 렌더링하는 방법을 단계별로 설명해보겠다.

1. 필요한 패키지 설치

npm install ejs

2. Express 설정

// app.js 또는 index.js 파일 생성

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

// EJS를 템플릿 엔진으로 설정
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// 기본 라우트 설정
app.get('/', (req, res) => {
    // 리터럴 템플릿처럼 조건적으로 바뀌어야하는 변수를 객체로 주입한다.
    res.render('index', { title: 'My EJS App', message: 'Hello, world!' });
});

// 서버 시작
const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

3. views 폴더 만들고 ejs 파일들을 보관

4. <%= 변수 %>에 동적인 값을 할당할 수 있다.

<!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><%= message %></h1>
    <p>This is ejs template</p>
</body>
</html>

4. <%= 변수 %>는 반복문으로 쓸 수 있다.

"" 안에서도 쓸 수 있다. a태그에 동적으로 패러미터 주입하는 것에 주목.

      <div class="white-bg">
        <% for (var i = 0; i < doc.length; i++){ %>
        <a href="/detail/<%= doc[i]._id %>">
          <div class="list-box">
            <h4><%= doc[i].title %></h4>
            <p><%= doc[i].content %></p>
          </div>
        </a>
        <% } %>
      </div>