템플릿 엔진의 종류와 장단점
1. 템플릿 엔진이란?
웹 페이지를 구성하는 주된 마크업 언어(Markup Language)는 HTML이며, 이는 정적인 언어입니다. 따라서, Javascript의 반복문을 사용하여 간단하게 처리할 수 있는 동적 연산을 HTML로 표현하려면 직접 코드를 작성해야 하는 불편함이 있습니다. 템플릿 엔진(Temlplate Engine)은 위에서 언급한 불편한 상황을 해소시키기 위한 도구이며, 템플릿 프로세서를 이용하여 웹 페이지를 동적으로 구현할 수 있는 시스템입니다. Node.js의 대표적인 템플릿 엔진으로는 Pug(Jade), EJS, Handlebars 등이 있으며, 이 중에서 Pug와 EJS가 가장 대중적으로 사용되고 있습니다.
2. Pug(Jade)
Pug는 기존의 Jade라는 이름에서 개명된 이름이며, 꾸준히 인기를 얻고 있는 Node.js 기반의 템플릿 엔진입니다. HTML과 Pug의 코드를 비교하면 다음과 같습니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<title>title</title>
<link rel="stylehsheet" href="/stylesheets/style.css" />
</head>
<body>
<div class="box">
<p>Hello World</p>
</div>
</body>
</html>
//- index.pug
<!DOCTYPE html>
html(lang="ko")
head
title=title
link(rel='stylesheet', href='/stylesheets/style.css')
body
div.box
p Hello World
위의 코드를 보면 알 수 있듯이 Pub는 HTML과는 별개의 문법을 갖고 있습니다. 이는 기존의 HTML을 간단하게 표현하고, 들여쓰기를 통해 계층구조를 나타내므로 가독성 향상을 기대할 수 있습니다. 또한, 정적인 부분과 동적인 부분을 따로 분리할 수 있으며, 다른 엔진에 비해 Google Trend 수치가 높다는 장점이 있습니다. 이러한 Pug의 고유한 문법은 장점으로 작용되기도 하나, HTML 기반의 템플릿을 사용해오던 디자이너 또는 개발자들 사이에서는 비교적 낯선 템플릿으로 인식될 수 있다는 부분이 단점으로 작용하기도 합니다.
3. EJS
EJS는 HTML 친화적인 템플릿으로, Pug의 고유 문법에 익숙하지 않은 개발자들이 주로 사용하는 템플릿 엔진입니다. 위의 HTML 코드를 ejs로 나타내면 다음과 같습니다.
<!-- header.ejs -->
<head>
<title>title</title>
<link rel="stylehsheet" href="/stylesheets/style.css">
</head>
<!-- body.ejs -->
<body>
<div class="box">
<p>Hello World</p>
</div>
</body>
<!-- index.ejs -->
<!DOCTYPE html>
<html lang="ko">
<% include header %>
<% include body %>
</html>
코드를 보면 알 수 있듯이 ejs는 HTML 문법을 그대로 사용하되, 추가로 Javascript 문법을 사욯할 수 있다는 특징이 있습니다. 또한, ejs의 문법은 Java 진영에서의 JSP와 매우 유사하다고 합니다. ejs의 문법은 HTML에 친화적인 개발자들 사이에서 장점으로 작용되기도 하나, 가독성면에서는 Pug에 비해 큰 이득을 볼 수 없다는 부분이 단점으로 작용하기도 합니다.
4. 최종 정리
템플릿 엔진을 사용하면 코드 간소화, 가독성 향상, 코드 재사용성 향상, 유지보수 효율성 향상 등의 효과를 기대할 수 있습니다. 이는 대부분의 템플릿 엔진이 지니고 있는 절대적인 특징이자 장점이라고 할 수 있습니다. 다만, 템플릿 엔진 간의 장점과 단점은 개발 환경, 개발자의 성향 등에 따라 상대적으로 작용할 수 있으므로 템플릿 엔진을 사용하여 팀 단위 프로젝트를 진행할 때에는 팀원들과의 합의점을 찾는 것이 더 중요하다고 생각합니다.