[Web] 템플릿 엔진, JSP, Thymeleaf란? 서버 사이드 템플릿 엔진 vs 클라이언트 사이드 템플릿 엔진

템플릿 엔진이란?

템플릿 엔진은 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어 또는 소프트웨어 컴포넌트를 말한다. 특히, 웹 템플릿 엔진은 웹 문서가 출력되는 템플릿 엔진을 말한다. 

 

즉, 웹 템플릿 엔진은 지정된 템플릿 양식과 데이터가 합쳐져서 HTML 문서를 출력하는 소프트웨어를 말한다. 이후 웹 템플릿 엔진을 템플릿 엔진으로 부르겠다. 

 

 

서버 사이드 템플릿 엔진 vs 클라이언트 사이드 템플릿 엔진

[그림 1] 서버 사이드 템플릿 엔진

서버 사이드 템플릿 엔진은 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 템플릿(Template)에 넣어 HTML 문서를 만들어 클라이언트에 전달해주는 역할을 한다. 즉, HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿의 특정 부분에 끼워 넣는 방식으로 동작한다.

 

이러한 서버 사이드 템플릿 엔진으로는 JSP, Thymeleaf, Velocity, Freemarker 등이 있다.

 

[그림 2] 클라이언트 사이드 템플릿 엔진

클라이언트 사이드 템플릿 엔진은 HTML 형태로 코드를 작성할 수 있으며 동적으로 DOM을 그리게 해주는 역할을 한다.

즉, 데이터를 받아 DOM 객체에 동적으로 그려주는 프로세스를 담당한다. 예를 들어, 웹 페이지 내에 여러 카테고리 중 하나를 선택할때마다 같은 형식의 프레임에 내용만 바뀌어 변경되는 경우가 있다. 이때 클라이언트는 매번 템플릿을 입력하거나 바꾸기보다는 Script 타입을 템플릿으로 미리 만들어 사용하며 안의 내용을 replace 하는 식으로 동작한다.

 

DOM이란? 

DOM은 Document Object Model의 약자이다. 직역하면 문서 객체 모델이다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 좁은 의미로 보자면 document 객체와 관련된 객체의 집합을 의미할 수도 있다. 

 

이러한 클라이언트 사이드 템플릿 엔진으로는 Mustache, Squirrelly 등이 있다.

 

템플릿 엔진을 사용하는 이유

1. 많은 코드를 줄일 수 있다.

템플릿 엔진을 사용하면 기존의 HTML에 비하여 간단한 문법을 사용한다. 따라서 코드를 훨씬 간결하게 작성할 수 있다.

 

2. 재사용성이 높다.

웹 페이지는 똑같은 디자인의 페이지에 데이터만 바뀌는 경우가 매우 많다. 이럴 때 템플릿 엔진을 사용하면 미리 템플릿을 만들어 놓고 데이터를 바꿔가면서 수많은 페이지를 만들어 낼 수 있으므로 효율적이다.

 

3. 유지보수에 용이하다.

하나의 템플릿을 미리 만들어 놓고 관리하는 것은 수백개의 비슷한 모양의 HTML 페이지를 관리하는 것보다 훨씬 효율적이다.

 

 

JSP(Java Server Page)란?

 

[그림 3] JSP

JSP는 자바 언어를 기반으로 하는 서버 사이드 스크립트 언어이다. JSP는 HTML 코드에 Java 코드를 넣어 동적인 웹 페이지를 생성할 수 있다. 서블릿과 비슷한 역할을 한다. 

 

참고 : 

[Web] 서블릿(Servlet)이란? 서블릿 컨테이너란?

 

 

서블릿이 Java 코드에 HTML 코드가 들어가는 형태라면, JSP는 HTML 코드에 Java 코드가  들어가는 구조이다. JSP는 WAS(Web Application Server)에 의하여 서블릿 클래스로 변환되어 사용된다.

 

JSP는 다음과 같은 특징을 가진다.

 

1. WAS가 이미 만들어놓은 객체를 사용한다. (참고: https://www.javatpoint.com/jsp-implicit-objects )

2. 사용자 정의 태그(custom tags)를 사용하여 보다 효율적으로 웹사이트를 구성한다.

3. HTML 코드 안에 Java 코드가 있으므로 HTML 코드를 작성하기 쉽다.

4. 서블릿과 달리 JSP는 수정된 경우 재배포할 필요없이 WAS가 알아서 처리해준다.

 

 

 

Thymeleaf란?

 

[그림 4] Thymeleaf

Thymeleaf는 서버 사이드 템플릿 엔진의 일종이다. Spring boot에서 공식적으로 지원하고 권장하는 템플릿 엔진은 JSP가 아닌 Thymeleaf이다. Thymeleaf는 MVC 기반 웹 애플리케이션의 뷰 레이어에서 XHTML/HTML5를 서비스하는데 적합하다. 스프링 프레임워크와 완전한 통합 기능을 제공한다.

 

이전에는 웹 개발에 있어 JSP를 많이 사용했다. 하지만 JSP는 성능과 기능면에서 다른 템플릿 엔진에 밀려 사장되어 가는 추세이다. Thymeleaf는 JSP를 완전히 대체하는 것을 목표로 하며, 브라우저에서 직접 열 수 있고 웹페이지로 올바르게 표시되는 템플릿 파일인 Natural Template 이라는 개념을 구현한다. 

 

Thymeleaf는 다음과 같은 특징을 가진다.

 

1. HTML5 용 자바 템플릿 엔진

2. 웹 및 오프라인 환경 모두에서 작동 가능하다.

3. 서블릿 API에 대한 하드 종속성 없음

4. 방언 혹은 사투리 기능(dialects)이라 불리는 모듈형 형상 집합에 기초한다.

5. 전체 국제화를 지원한다.

 

 

---

참고

1.https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%84%9C%EB%B2%84_%ED%8E%98%EC%9D%B4%EC%A7%80

2. https://en.wikipedia.org/wiki/Thymeleaf