[SpringBoot 실습] 서버 템플릿 엔진과 머스테치 소개

서버 템플릿 엔진과 머스테치 소개

이번에는 머스테치(Mustache)를 통해 화면 영역을 개발하는 방법을 배워보자.

 

 

템플릿 엔진이란 무엇인가?

웹 개발에 있어 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 이야기한다. 예전 스프링이나 서블릿을 사용했다면, JSP, Freemaker 등이 떠오를테고 요즘은 리액트, 뷰 등이 떠오를 것이다.

이것들 모두 결과적으로는 지정된 템플릿과 데이터 를 이용하여 HTML을 생성하는 템플릿 엔진이다.

 

다만 약간의 다른 점이 있는데,

• 서버 템플릿 엔진 : JSP, Freemaker
• 클라이언트 템플릿 엔진 : 리액트, 뷰

만약 아래와 같은 코드가 주어진다면 결과는 어떻게 되는 지 생각해보자.

<script type="text/javascript">

  $(document).ready(function() {
    if(a=="1") {
      <%
          System.out.println("test");
      %>
    }
  });

해당 코드는 if문에 상관없이 무조건 test가 콘솔에 출력된다. 그 이유는 프론트 엔드의 자바스크립트가 작동하는 영역과 JSP가 작동하는 영역이 서로 다르기 때문인데, JSP를 비롯한 서버 템플릿 엔진은 서버에서 구동되는 것이다.

 

서버 템플릿 엔진을 이용한 화면 생성은 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달 한다. 앞 코드를 다시 보면, HTML을 만드는 과정에서 System.out.println("test");를 실행할 뿐이고, 이때 자바스크립트 코드는 단순한 문자열일 뿐이다.

서버 템플릿 엔진

Server(Java 코드 실행) -> Java 코드 실행값 + HTML(JavaScript 문자)를 브라우저에서 실행

 

반면, 자바스크립트는 브라우저 위에서 작동한다

앞 코드에서 자바스크립트 코드가 실행되는 장소는 서버가 아닌 브라우저 이다. 즉, 브라우저에서 작동될 때는 서버 템플릿 엔진의 손을 벗어나 제어가 불가능한 것이다.

 

클라이언트 템플릿 엔진인 리액트나 뷰를 이용한 SPA는 브라우저에서 화면을 생성하므로, 서버에서 JSON 혹은 xml 형식으로 데이터만 전달하고 클라이언트에서 조립하는 방식을 사용하는 것이다.

클라이언트 템플릿 엔진

Server(Java 코드 실행) -> JSON || XML 형식으로 반환 -> JSON + HTML(JavaScript(VUE, REACT))를 브라우저에서 실행

예로, 최근엔 리액트가 뷰와 같은 자바스크립트 프레임워크에서 서버 사이드 렌더링을 지원하는 것을 볼 수 있다. 이 방식은 자바스크립트 프레임워크의 화면 생성 방식을 서버에서 실행하는 것을 말한다. 다만, 스프링 부트를 사용하면 자바스크립트를 서버사이드에서 렌더링하도록 구현하는 것은 많은 비용이 들므로 현재는 추천하지 않는다.

 

 

머스테치란

머스테치(http://mustache.github.io)는 수많은 언어를 지원하는 가장 심플한 템플릿 엔진이다. 이 엔진은 대부분의 언어를 지원하고 있어 자바에서 사용될 때는 서버 템플릿 엔진으로 사용되고, 자바스크립트에서 사용될 때는 클라이언트 템플릿 엔진으로 사용될 수 있다.

템플릿 엔진의 단점들을 살펴보자.

• JSP, Velocity : 스프링 부트에서는 권장하지 않는다.
• Freemarker : 템플릿 엔진으로는 과하게 많은 기능을 지원한다.
• Thymeleaf : 스프링에서 적극적으로 밀고 있으나 문법이 어렵다. 하지만 vue.js를 사용해본 경험이 있어 태그 속성 방식이 익숙하면 Thymeleaf도 사용하면 좋다.

머스테치의 장점을 살펴보자.

• 문법이 다른 템플릿 엔진보다 심플하다.
• 로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확히 구분된다.
• Mustache.js와 Mustache.java 2가지가 다 있어, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능하다.

템플릿 엔진은 화면 역할에만 충실한 것이 가장 좋다. 많은 기능을 제공하고 있으면 API와 템플릿 엔진, 자바스크립트가 서로 로직을 나눠 갖게 되어 유지보수할 때 어려운 점을 겪을 수 있다.

 

 

머스테치 플러그인 설치

Plugins -> Handlebars/Mustache 설치 -> 인텔리제이 재시작

프로젝트에서 머스테치를 사용할 수 있도록 의존성을 build.gradle에 등록

compile('org.springframework.boot:spring-boot-starter-mustache')

일반적으로 머스테치의 파일 위치는 기본적으로 src/main/resource/templates이고, 이 위치에 머스테치 파일을 두면 스프링 부트에서 자동으로 로딩한다.