템플릿 엔진이란?
일반적으로 웹 개발에 있어 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 이야기합니다.
서버 템플릿 엔진
서버 템플릿 엔진은 서버 측에서 HTML, CSS, JavaScript 등의 마크업 언어와 로직 코드를 조합하여 동적인 웹 페이지를 생성하는 역할을 합니다. 서버 템플릿 엔진을 사용하면, 서버에서 데이터를 처리하고 HTML 파일을 생성하여 클라이언트에게 전송하므로 초기 로딩 속도는 느리지만, SEO(Search Engine Optimization) 등의 문제를 해결할 수 있습니다.
스프링 부트에서는 다양한 서버 템플릿 엔진을 지원하며, 대표적으로 Thymeleaf, Freemarker, JSP 등이 있습니다. 이들 엔진은 모두 서버 측에서 데이터를 처리하고 HTML 파일을 생성하는 방식으로 동작하며, 마크업 언어와 로직 코드를 조합하여 동적인 웹 페이지를 생성할 수 있습니다.
스프링 부트에서는 JSP를 지원하기 위해 다음과 같은 의존성을 추가해야 합니다.
예시
dependencies {
implementation 'javax.servlet:jstl:1.2'
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
}이후, src/main/webapp/WEB-INF/views 폴더에 JSP 파일을 작성하여 사용할 수 있습니다. 예를 들어, 다음과 같은 JSP 파일을 작성하여 localhost:8080/example 경로에서 웹 페이지를 확인할 수 있습니다.
- 컨트롤러 작성
@Controller
public class ExampleController {
@GetMapping("/example")
public String example(Model model) {
model.addAttribute("title", "Example Title");
model.addAttribute("items", Arrays.asList("Item1", "Item2", "Item3"));
return "example";
}
}
- JSP 파일 작성(
example.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><c:out value="${title}" /></title>
</head>
<body>
<h1><c:out value="${title}" /></h1>
<ul>
<c:forEach items="${items}" var="item">
<li><c:out value="${item}" /></li>
</c:forEach>
</ul>
</body>
</html>
위 코드는 JSP를 사용하여 서버 템플릿 엔진을 구현하는 예시입니다. 컨트롤러에서 모델 객체에 데이터를 설정하고, JSP에서 JSTL(JSP Standard Tag Library) 문법을 사용하여 HTML 코드와 데이터를 조합하여 동적인 웹 페이지를 생성합니다.
위 코드에서 ${title}과 ${items}는 컨트롤러에서 설정한 모델 객체의 데이터를 참조합니다. JSTL 문법을 사용하여 JSP에서 데이터를 처리할 수 있습니다.
기존 서버 템플린 엔진들의 단점
-
JSP, Velocity: 스프링 부트에서는 권장하지 않는 템플릿 엔진입니다.
-
Freemarker: 템플릿 엔진으로는 너무 과하게 많은 기능을 지원합니다. 높은 자유도로 인해 숙련도가 낮을수록 Freemarker 안에 비즈니스 로직이 추가될 확률이 높습니다.
-
Thymeleaf: 스프링 진영에서 적극적으로 밀고 있지만 문법이 어렵습니다. HTML 태그 에 속성으로 템플릿 기능을 사용하는 방식이 기존 개발자분들께 높은 허들로 느껴지는 경우가 많습니다. 실제로 사용해 본 분들은 자바스크립트 프레임워크를 배우는 기분이 라고 후기를 이야기하기도 합니다. 물론 Vue . js 를 사용해 본 경험이 있어 태그 속성 방 식이 익숙한 분이라면 Thymeleaf 를 선택해도 됩니다.
대안으로 머스테치 사용하기
머스테치는 기존 템플릿과 비교했을 때 아래와 같은 장점을 가집니다.
-
문법이 다른 템플릿 엔진보다 심플합니다.
View Mustache . js 와 Mustache . java 템플릿을 모두 사용 가능합니다. -
로직 코드를 사용할 수 없어 VIEW의 역할과 서버의 역할이 명확하게 분리됩니다.
-
Mustache.js와 Mustache.java 2가지가 다 있어, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능합니다.
-
인텔리제이 커뮤니티 버전을 사용해도 플러그인을 사용할 수 있음.
클라이언트 템플릿 엔진
클라이언트 템플릿 엔진은 대표적으로 React, Vue.js, Angular 등이 있습니다. 이들 엔진은 모두 클라이언트 측에서 데이터를 처리하고 HTML 파일을 생성하는 방식으로 동작하며, 마크업 언어와 로직 코드를 조합하여 동적인 웹 페이지를 생성할 수 있습니다.
