찍어내는 공장: 템플릿 엔진 (Template Engine)

과거에는 서버(Node.js)가 직접 HTML 코드를 문자열로 덕지덕지 이어 붙여서(res.send('<h1>' + title + '</h1>')) 브라우저로 보냈습니다. 하지만 코드가 길어지면 유지보수가 불가능해집니다. 이를 해결하기 위해 HTML 뼈대 파일에 빈 칸을 뚫어놓고(Template), 서버가 그 빈 칸에 데이터를 채워 넣어(Render) 완성된 HTML을 찍어내는 기법이 바로 템플릿 엔진입니다.

EJS (Embedded JavaScript) 란?

Node.js 진영에서 가장 유명한 템플릿 엔진 중 하나입니다. HTML 태그 속에 특수한 기호(<% %>)를 열고 그 안에 진짜 자바스크립트 코드를 적을 수 있습니다.

문법 기호	역할	사용 예시
<%= 변수명 %>	값을 화면에 출력(렌더링)할 때 사용합니다. HTML 코드를 넣어도 텍스트로 이스케이프 처리하여 XSS 해킹을 방어합니다.	<h1><%= title %></h1>
<%- 변수명 %>	값을 출력하되, 이스케이프 처리를 하지 않고 진짜 HTML 태그로 렌더링시킵니다.	<%- htmlContent %>
<% 로직 %>	화면에 출력하지 않고, `if`문이나 `for`문 같은 자바스크립트 제어(로직)를 실행할 때 사용합니다.	<% if (user) { %> 안녕! <% } %>

💡 서버 사이드 렌더링 (SSR)의 조상님

클라이언트(브라우저)는 EJS 문법을 전혀 이해하지 못합니다. 브라우저로 응답이 넘어가기 직전에 Node.js 서버가 res.render() 함수를 통해 EJS 코드를 완벽한 순수 HTML 문자열로 변환(컴파일)해서 보내주기 때문에 화면이 렌더링될 수 있는 것입니다.

EJS 템플릿 엔진 렌더링 시뮬레이션

서버가 가진 변수(Data)를 HTML 뼈대(EJS)에 주입하여, 브라우저가 읽을 수 있는 순수 HTML로 조립해 내는 과정을 확인해 보세요.

      
      app.js & views/index.ejs
    

/* === 1. app.js (서버 코드) === */
const express = require('express');
const app = express();

// 1. EJS를 템플릿 엔진으로 사용하겠다고 설정합니다.
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  // DB에서 가져온 데이터라고 가정해봅시다.
  const data = { 
    title: 'Minstudio', 
    isLogged: true 
  };
  
  console.log('[서버] views/index.ejs 파일을 읽어서 데이터를 주입(Render)합니다.');
  
  // 2. index.ejs 템플릿에 data 객체를 주입하여 렌더링 후 클라이언트에 전송합니다.
  res.render('index', data); 
});

app.listen(3000, () => console.log('서버 실행 중...'));


/* === 2. views/index.ejs (템플릿 코드) === */
<h1><%= title %></h1>

<% if (isLogged) { %>
  <button>로그아웃</button>
<% } else { %>
  <button>로그인</button>
<% } %>

localhost:3000/

Minstudio

        
        Server Console
      
$ node app.js
서버 실행 중...
> GET / 요청 수신
[서버] views/index.ejs 파일을 읽어서 데이터를 주입(Render)합니다.
> 순수 HTML 문자열 생성 완료! 브라우저로 응답 전송! ✅

문법 기호

역할

사용 예시

<%= 변수명 %>

값을 화면에 출력(렌더링)할 때 사용합니다. HTML 코드를 넣어도 텍스트로 이스케이프 처리하여 XSS 해킹을 방어합니다.

<h1><%= title %></h1>

<%- 변수명 %>

값을 출력하되, 이스케이프 처리를 하지 않고 진짜 HTML 태그로 렌더링시킵니다.

<%- htmlContent %>

<% 로직 %>

화면에 출력하지 않고, if문이나 for문 같은 자바스크립트 제어(로직)를 실행할 때 사용합니다.

<% if (user) { %>
  안녕!
<% } %>

/* === 1. app.js (서버 코드) === */ const express = require('express'); const app = express(); // 1. EJS를 템플릿 엔진으로 사용하겠다고 설정합니다. app.set('view engine', 'ejs'); app.get('/', (req, res) => { // DB에서 가져온 데이터라고 가정해봅시다. const data = { title: 'Minstudio', isLogged: true }; console.log('[서버] views/index.ejs 파일을 읽어서 데이터를 주입(Render)합니다.'); // 2. index.ejs 템플릿에 data 객체를 주입하여 렌더링 후 클라이언트에 전송합니다. res.render('index', data); }); app.listen(3000, () => console.log('서버 실행 중...')); /* === 2. views/index.ejs (템플릿 코드) === */ <h1><%= title %></h1> <% if (isLogged) { %> <button>로그아웃</button> <% } else { %> <button>로그인</button> <% } %>

minstudio

템플릿 엔진 활용 (EJS 등)

찍어내는 공장: 템플릿 엔진 (Template Engine)

EJS (Embedded JavaScript) 란?

EJS 템플릿 엔진 렌더링 시뮬레이션

Minstudio

템플릿 엔진 활용 (EJS 등)

찍어내는 공장: 템플릿 엔진 (Template Engine)

EJS (Embedded JavaScript) 란?

EJS 템플릿 엔진 렌더링 시뮬레이션

Minstudio