Chapter 04. 머스테치로 화면 구성하기 (1)

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

 

템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 이야기.

 

JSP, Freemarker -> 서버 템플릿 엔지니어

React, 뷰의 View 파일들 -> 클라이언트 템플릿 엔지니어

 

둘 모두 결과적으로 지정된 템플릿과 데이터를 이용하여 HTML을 생성하는 템플릿 엔진이지만 차이가 있음

 

---

ex) 자바스크립트에서 JSP나 Freemarker처럼 자바 코드를 사용할 순 없나요?

<script type="text/javascript">

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

});

이 코드는 if문과 관계없이 무조건 test를 콘솔에 출력함

-> 그 이유는 프론트엔드의 자바스크립트가 작동하는 영역과  JSP가 작동하는 영역이 다르기 때문인데 JSP를 비롯한 서버 템플릿 엔진은 서버에서 구동.

 

JSP는 명확하게는 서버 템플릿 엔진은 아니지만,

View의 역할만 하도록 구성할 때는 템플릿 엔진으로써 사용할 수 있다.

이 경우엔 Spring + JSP를 사용한 경우로 보면 됨.

 

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

앞 코드는 HTML을 만드는 과정에서 System.out.println("test");를 실행할 뿐이며, 이때의 자바스크립트 코드는 단순한 문자열일 뿐임

서버 템플릿 엔진

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

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

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

클라이언트 템플릿 엔진

최근에는 리액트나 뷰와 같은 자바스크립트 프레임워크에서 서버 사이드 렌더링 지원.

자바스크립트 프레임워크의 화면 생성 방식을 서버에서 실행하는 것을 의미.

이는 V8 엔진 라이브러리들이 지원하기 때문이며, 스프링 부트에서 사용할 수 있는 대표적인 기술들로는 Nashorn, J2V8이 있다.

---

머스테치

머스테치란?

수많은 언어를 지원하는 가장 심플한 템플릿 엔진

-> 루비, 자바스크립트, 파이썬, PHP, 자바, 펄, Go, ASP 등 현존하는 대부분 언어를 지원하고 있음.

-> 자바에서 사용될 때 : 서버 템플릿 엔진

-> 자바스크립트에서 사용될 때 : 클라이언트 템플릿 엔진

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

 

템플릿 엔진들의 단점

• JSP, Velocity : 스프링 부트에서는 권장하지 않는 템플릿 엔진
• Freemarker : 템플릿 엔진으로는 너무 많은 기능을 지원. 높은 자유도로 인해 숙련도가 낮을수록 Freemarker 안에 비즈니스 로직이 추가될 확률이 높음
• Thymeleaf : 스프링 진영에서 적극적으로 밀고 있지만 문법이 어렵다. HTML 태그에 속성으로 템플릿 기능을 사용하는 방식.

머스테치의 장점

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

---

머스테치 플러그인 설치

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

- Thymeleaf나 JSP 등은 커뮤니티 버전에서 지원하지 않고 인텔리제이 얼티메이트 버전(유료)에서만 공식 지원

- 머스테치 플러그인을 사용하면 머스테치의 문법 체크, HTML 문법 지원, 자동 완성 등이 지원되니 개발할 때 큰 도움을 받을 수 있다.

머스테치 플러그인

 

출처 : 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 [이동욱 지음]