윤시의 블로그

템플릿 엔진, EJS 본문

Node.js

템플릿 엔진, EJS

yo09 2025. 1. 6. 08:58

템플릿 엔진이란?

정의

템플릿 엔진은 서버에서 동적인 HTML 파일을 생성할 수 있도록 도와주는 도구이다.

HTML을 템플릿으로 사용하며, 데이터와 템플릿을 결합하여 최종 HTML을 생성한다.

이 HTML은 클라이언트(브라우저)에게 전달된다.

왜 필요한지?

  • 정적 HTML의 한계 극복
    • 일반적인 HTML은 고정된 데이터를 표시한다. 템플릿 엔진을 사용하면 서버에서 동적으로 데이터를 넣어 HTML을 생성할 수 있다.
  • 반복 작업 줄이기
    • 데이터가 여러 개라면, 하나의 템플릿만 작성하고 데이터만 다르게 주입해 효율적으로 사용할 수 있다.

템플릿 엔진의 특징

  1. 동적 콘텐츠 생성 - 데이터를 삽입해 HTML을 동적으로 생성한다.
  2. 코드와 디자인 분리 - HTML(디자인)과 JavaScript(로직)가 분리되어 관리가 쉽다.
  3. 서버에서 렌더링 - 클라이언트가 HTML을 요청하면 서버에서 데이터를 채운 HTML을 생성해 응답한다.

EJS란?

정의

EJS(Embedded JavaScript)는 JavaScript를 삽입하여 동적 HTML을 생성할 수 있는 템플릿 엔진이다.

HTML 문서에 JavaScript 코드를 삽입할 수 있는 구문을 제공한다.

EJS의 특징

  1. 문법이 간단 - HTML과 JavaScript 코드를 혼합하여 사용할 수 있다.
  2. Node.js와 통합 - Express.js와 같은 Node.js 프레임워크에서 사용하기 쉽다.
  3. 템플릿 파일 확장자 - ejs 확장자를 가진 파일을 사용한다.

EJS 설치 및 설정

1. EJS 설치

npm install ejs

2. Express.js에서 EJS 설정

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

// EJS 템플릿 엔진 설정
app.set('view engine', 'ejs');
app.set('views', './views'); // 템플릿 파일이 위치한 디렉토리 설정

// 라우팅 예제
app.get('/', (req, res) => {
    const user = { name: 'Alice', age: 25 };
    res.render('index', { user }); // 'index.ejs' 파일을 렌더링하며 user 데이터를 전달
});

// 서버 실행
app.listen(3000, () => {
    console.log('서버가 실행 중입니다.');
});

EJS 활용법

1. EJS 파일 작성

views/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>
</head>
<body>
    <h1>안녕하세요, <%= user.name %>님!</h1>
    <p>나이: <%= user.age %>세</p>
</body>
</html>

설명

  • <%= user.name %>
  • 전달받은 user 객체의 name 값을 HTML에 삽입한다.
  • <%= %>
    • <%= %>는 EJS의 출력 태그.
    • 이 태그 안에 JavaScript 코드를 작성하면, 결과값을 HTML에 삽입.
  • JavaScript 코드를 실행하고 결과값을 출력한다.

2. EJS 반복문

데이터 배열을 반복해서 출력할 때 사용한다.

예제

routes/index.js

app.get('/users', (req, res) => {
    const users = ['Alice', 'Bob', 'Charlie'];
    res.render('users', { users });
});

 

views/users.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>사용자 목록</title>
</head>
<body>
    <h1>사용자 목록</h1>
    <ul>
        <% users.forEach(user => { %>
            <li><%= user %></li>
        <% }); %>
    </ul>
</body>
</html>

설명

  • <% %>
  • JavaScript 코드를 실행하지만, 결과를 출력하지 않는다.
  • <%= %>
  • 실행한 JavaScript 결과를 HTML에 삽입한다.

3. 조건문

데이터에 따라 다른 HTML을 표시한다.

예제

routes/index.js

app.get('/profile', (req, res) => {
    const user = { name: 'Alice', age: 25, isAdmin: true };
    res.render('profile', { user });
});

 

views/profile.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>프로필</title>
</head>
<body>
    <h1><%= user.name %>님의 프로필</h1>
    <p>나이: <%= user.age %>세</p>

    <% if (user.isAdmin) { %>
        <p>관리자 권한이 있습니다.</p>
    <% } else { %>
        <p>일반 사용자입니다.</p>
    <% } %>
</body>
</html>

설명

  • <% if (조건) { %>:조건에 따라 다른 HTML을 표시한다.

4. EJS에서 포함

공통 요소(헤더, 푸터)를 다른 파일로 분리한 후 재사용할 수 있다.

예제

헤더 파일 (views/partials/header.ejs)

<header>
    <h1>사이트 헤더</h1>
</header>

 

메인 템플릿 (views/main.ejs)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>메인 페이지</title>
</head>
<body>
    <%- include('partials/header') %> <!-- 헤더를 삽입 -->
    <h2>메인 콘텐츠</h2>
</body>
</html>

EJS의 장점

  1. 간단한 문법 - HTML과 JavaScript를 결합해 쉽게 작성할 수 있다.
  2. 재사용성 - include를 사용해 공통 부분을 재사용할 수 있다.
  3. Express.js와 완벽 호환 - 설정과 사용법이 간단하며, Express.js 프로젝트에 쉽게 통합된다.

EJS의 단점

  1. 템플릿 파일 크기가 커질수록 관리가 어려워질 수 있다.
  2. React, Vue와 같은 클라이언트 사이드 렌더링에 비해 유연성이 부족할 수 있다.