EJS를 더 효과적으로 활용할 수 있는 팁과 패턴을 정리해 보았습니다. 필요에 맞게 골라 적용해 보세요.
1. 레이아웃/공통 템플릿 분리
- include로 헤더·푸터·네비게이션 같은 반복 구조를 분리
-
views/partials/ 폴더에 공통 부분을 모아두면 관리가 편리합니다.
<!-- views/partials/header.ejs -->
<header>
<h1><%= siteTitle %></h1>
<nav>…</nav>
</header>
<!-- views/index.ejs -->
<%- include('partials/header', { siteTitle: 'My Site' }) %>
<main>…</main>
<%- include('partials/footer') %>
2. 레이아웃 엔진 사용 (ejs-mate 등)
-
npm install ejs-mate를 쓰면 layout, block, extend 같은 문법으로 마치 Pug처럼 레이아웃 템플릿을 쓸 수 있습니다.
// app.js
const engine = require('ejs-mate');
app.engine('ejs', engine);
app.set('view engine', 'ejs');
<!-- views/layouts/main.ejs -->
<!DOCTYPE html><html><head><title><%- block('title') %></title></head>
<body>
<%- block('content') %>
</body></html>
<!-- views/home.ejs -->
<% layout('layouts/main') -%>
<% block('title') %>홈 페이지<% end %>
<% block('content') %>
<h2>Welcome!</h2>
<% end %>
3. 데이터 전달 & locals 활용
4. 조건문·반복문
5. HTML 이스케이프 vs. Raw 출력
6. 커스텀 헬퍼 함수
-
날짜 포맷, 문자열 자르기 등 자주 쓰는 로직은 app.locals나 별도 모듈에 정의
// app.js
const moment = require('moment');
app.locals.formatDate = date => moment(date).format('YYYY-MM-DD');
// view.ejs
<time><%= formatDate(post.createdAt) %></time>
7. EJS 캐싱 켜기
- 프로덕션에서는
app.set('view cache', true) 로 렌더링 속도 개선
- 개발 중에는 false로 두고, 캐시 때문에 변경이 안 보이는 현상 방지
8. 배열·객체 분해 및 기본값 활용
9. 커스텀 구분자(delimiters)
10. 복잡한 로직은 피하고 서비스 레이어로 분리
- 템플릿 안에 로직이 너무 많아지면 유지보수 어려워짐
- 데이터 가공은 컨트롤러나 서비스 함수에서 미리 처리해서 전달하는 게 바람직
위 팁들을 조합하면 EJS를 깔끔하고 효율적으로 활용할 수 있습니다.
필요한 부분만 골라 프로젝트에 적용해 보세요!