머스테치

템플릿 엔진

- 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어

 

예전에 Jsp, Freemaker 등(서버 템플릿 엔진)

요즘은 리액트, 뷰의 View 파일(클라이언트 템플릿 엔진)

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

<script type="text/javascript">

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

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

 

서버 템플릿 엔진을 이용한 화면 생성은 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달한다.

 

앞선 코드는 HTML을 만드는 과정에서 문자열 출력을 실행할 뿐인 단순한 문자열이다.

 

반면에 자바스크립트는 브라우저 위에서 작동하는데 앞에서 작성된 자바스크립트 코드가 실행되는 장소는 서버가 아닌 브라우저이다. 즉, 브라우저에서 작동될 때는 서버 템플릿 엔진의 손을 벗어나서 제어할 수가 없는 것이다.

 

흔히 이야기하는 Vue.js나 React.js를 이용한 SPA는 브라우저에서 화면을 생성한다. 즉, 서버에서 이미 코드가 벗어난 경우다. 그래서 아래 사진과 같이 서버에서는 Json 혹은 Xml 형식의 데이터만 전달하고 클라이언트에서 조립한다.

머스테치

- 수많은 언어(루비, 자바스크립트, 파이썬, PHP, 자바, 펄, Go, ASP 등)를 지원하는 가장 심플한 템플릿 엔진

- 그러다 보니 자바에서 사용될 때는 서버 템플릿 엔진으로, 자바스크립트에서 사용될 때는 클라이언트 템플릿 엔진으로 모두 사용할 수 있다.

 

자바 진영에서 JSP, Velocity, Freemaker, Thymeleaf 등 다양한 서버 템플릿 엔진이 존재

단점

- JSP, Velocity: 스프링부트에서 권장하지 않는 템플릿 엔진

- Freemarker: 템플릿 엔진으로는 너무 과하게 많은 기능을 지원, 높은 자유도로 인해 숙련도가 낮을수록 Freemarker 안에 비즈니스 로직이 추가될 확률이 높다.

- Thymeleaf: 스프링 진영에서 적극적으로 밀고 있지만 문법이 어렵다. HTML 태그에 속성으로 템플릿 기능을 사용하는 방식이 기존 개발자분들께 높은 허들로 느껴지는 경우가 많다. 실제로 사용한 사람들은 자바스크립트 프레임워크를 배우는 느낌이라고 한다. 물론 Vue.js를 사용해 본 경험이 있어 태그 속성 방식이 익숙한 분이라면 선택해도 된다.

 

반면 머스테치의 장점은 아래와 같다

 

- 문법이 다른 템플릿 엔진보다 심플하다.

- 로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확하게 분리

- Mustache.js와 Mustache.java 2가지가 다 있어서, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능하다.

- 인텔리제이 커뮤니티 버전을 사용해도 플러그인을 사용할 수 있다.

 

템플릿 엔진은 화면 역할에만 충실하는 게 좋다는 말이 있고 너무 많은 기능을 제공하면 API와 템플릿 엔진, 자바스크립트가 서로 로직을 나눠 갖게 되어 유지보수하기가 굉장히 어렵다.

 

//build.gradle

compile('org.springframework.boot:spring-boot-starter-mustache') //머스테치 스타터 의존성

 

머스테치 파일 위치 기본적으로 src/main/resources/templates

-> 이 위치에 index.mustache 파일을 두면 스프링 부트에서 자동으로 로딩