템플릿 엔진 사용하기 (선택 사항) 🎨
지금까지 우리는 res.send()나 res.json()을 사용하여 간단한 문자열이나 JSON 데이터를 응답으로 보냈습니다. 하지만 실제 웹 애플리케이션에서는 사용자의 정보, 게시글 목록 등 동적인 데이터가 포함된 완전한 HTML 페이지를 생성하여 보내야 하는 경우가 많습니다.
이때 사용되는 것이 바로 템플릿 엔진입니다. 템플릿 엔진은 미리 정해진 템플릿 파일(HTML과 유사한 문법을 가짐)에 서버에서 만든 동적인 데이터(변수, 객체 등)를 결합하여 최종적인 HTML 문서를 생성하는 도구입니다.
Java 개발자를 위한 비유: Node.js의 템플릿 엔진은 Java 웹 개발에서의 JSP(JavaServer Pages) 나 Thymeleaf와 정확히 동일한 역할을 수행합니다. JSP 파일에 <%= ... %> 스크립틀릿을 사용하여 Java 변수를 출력하거나 JSTL을 사용하여 반복문, 조건문을 사용했던 것처럼, Node.js 템플릿 엔진도 템플릿 파일 안에 JavaScript 변수를 출력하고 제어 구조를 사용할 수 있는 문법을 제공합니다.
참고: 최근의 웹 개발 트렌드는 React, Vue, Angular 같은 프론트엔드 프레임워크가 브라우저에서 직접 UI를 렌더링(Client-Side Rendering)하고, Node.js 서버는 데이터만 제공하는 REST API 역할을 하는 경우가 많습니다. 하지만 서버에서 직접 HTML을 생성하는 이 방식(Server-Side Rendering, SSR)은 여전히 많은 경우에 유용하며, 특히 검색 엔진 최적화(SEO)나 첫 페이지 로딩 속도 개선에 장점이 있습니다.
1. 주요 템플릿 엔진
Node.js 생태계에는 여러 템플릿 엔진이 있지만, 가장 인기 있는 것들은 다음과 같습니다.
- EJS (Embedded JavaScript Templating): 가장 배우기 쉬운 엔진 중 하나입니다. 별도의 복잡한 문법 없이 일반 HTML 코드 안에 <% ... %> 태그를 사용하여 JavaScript 코드를 삽입하는 방식이라 JSP 경험자에게 매우 친숙합니다.
- Pug (구 Jade): 들여쓰기를 기반으로 하는 간결한 문법이 특징입니다. HTML 태그를 직접 사용하지 않아 코드가 매우 깔끔해지지만, 특유의 문법에 익숙해지는 데 시간이 걸릴 수 있습니다.
- Handlebars.js: {{...}} 형태의 표현식을 사용하며, 로직을 최소화하는 것을 지향합니다.
이 강좌에서는 Java 개발자에게 가장 직관적이고 친숙할 EJS를 중심으로 설명하겠습니다.
2. EJS 사용 단계
1단계: EJS 설치 먼저 NPM을 사용하여 EJS 패키지를 설치합니다.
npm install ejs
2단계: Express에 템플릿 엔진 설정 Express 앱에 어떤 템플릿 엔진을 사용할지, 그리고 템플릿 파일들이 어디에 있는지 알려주어야 합니다.
const express = require('express');
const path = require('path'); // 경로 관련 작업을 위해 path 모듈 사용
const app = express();
// 1. 사용할 템플릿 엔진을 'ejs'로 설정
app.set('view engine', 'ejs');
// 2. 템플릿 파일들이 위치할 디렉토리를 설정
// 기본값은 'views' 폴더이므로, 폴더 이름이 'views'라면 이 줄은 생략 가능합니다.
// path.join과 __dirname을 사용하면 어떤 운영체제에서도 안전하게 경로를 설정할 수 있습니다.
app.set('views', path.join(__dirname, 'views'));
// ... 나머지 앱 코드 ...
3단계: 템플릿 파일 작성 설정한 views 폴더 안에 .ejs 확장자를 가진 템플릿 파일을 만듭니다.
views/profile.ejs
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title><%= pageTitle %></title> <%-- <%= %>: 변수 값을 HTML로 출력 (이스케이프 처리됨) --%>
</head>
<body>
<h1><%= user.name %>님의 프로필</h1>
<% if (user.isAdmin) { %> <%-- <% %>: JavaScript 제어문 (출력되지 않음) --%>
<p><strong>관리자</strong> 계정입니다.</p>
<% } else { %>
<p>일반 사용자 계정입니다.</p>
<% } %>
<h3>최근 활동:</h3>
<ul>
<% activities.forEach(function(activity) { %>
<li><%= activity %></li>
<% }); %>
</ul>
<%- include('partials/footer') %> <%-- <%- include %>: 다른 EJS 파일을 포함 (부분 템플릿) --%>
</body>
</html>
views/partials/footer.ejs
<hr>
<footer>
<p>Copyright © 2025 My App</p>
</footer>
4단계: 라우트에서 템플릿 렌더링 res.render() 메소드를 사용하여 템플릿 파일을 렌더링하고 클라이언트에게 전송합니다.
app.get('/users/:username', (req, res) => {
const userData = {
name: req.params.username,
isAdmin: req.params.username === 'admin', // 간단한 예시 로직
};
const userActivities = [
'로그인했습니다.',
'게시글을 작성했습니다.',
'프로필을 업데이트했습니다.'
];
// res.render('템플릿_파일_이름', { 템플릿에_전달할_데이터_객체 });
res.render('profile', {
pageTitle: `${userData.name}의 프로필`,
user: userData,
activities: userActivities
});
});
res.render()의 두 번째 인자로 전달된 객체의 키(pageTitle, user, activities)들은 .ejs 파일 안에서 그대로 변수 이름으로 사용할 수 있게 됩니다.
이제 서버를 실행하고 브라우저에서 http://localhost:3000/users/Alice 나 http://localhost:3000/users/admin 으로 접속하면, 전달된 데이터에 따라 동적으로 생성된 HTML 페이지를 볼 수 있습니다.
템플릿 엔진을 사용하면 서버 측에서 데이터를 가공하여 완전한 형태의 웹 페이지를 만들어 제공할 수 있습니다. 이는 전통적인 웹 애플리케이션 개발 방식이며, 특정 시나리오에서는 여전히 매우 강력하고 효과적인 방법입니다.
'프로그래밍 > NODEJS 강좌 BY GEMINI' 카테고리의 다른 글
| RESTful API 설계 및 구현 🏗️ (1) | 2025.07.02 |
|---|---|
| 정적 파일 제공하기 (CSS, JavaScript, 이미지) 🖼️ (0) | 2025.06.23 |
| 미들웨어 (Middleware) 활용하기 🔗 (1) | 2025.06.16 |
| 라우팅 (Routing) 정의하기 🚦 (1) | 2025.06.12 |
| 5️⃣ Express.js로 강력한 웹 애플리케이션 구축하기 🌐 (1) | 2025.06.10 |