스프링 부트에서 Mustache 사용하기

Spring

스프링 부트에서 Mustache 사용하기

자바니또 2021. 3. 13. 18:32

개요

이번 포스팅에서는 Mustache를 통해 화면 영역을 개발하는 방법을 배워본다. 서버 템플릿 엔진과 클라이언트 템플릿 엔진의 차이는 무엇인지 알아보고 Mustache의 장점을 알아보자.

서버 템플릿 엔진과 클라이언트 템플릿 엔진

일반적으로 웹 개발에 있어 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML문서를 출력하는 소프트웨어를 이야기한다. 템플릿 엔진은 구동되는 위치에 따라 서버에서 구동되는 서버 템플릿 엔진과 클라이언트에서 구동되는 클라이언트 템플릿 엔진으로 나뉘는데, 흔히 View의 역할로 사용하는 JSP와 Freemarker가 서버 템플릿 엔진이고 React와 Vue는 클라이언트 템플릿 엔진이라 할 수 있다.

<script type="text/javascript">

$(document).ready(function(){
    if(a=="1") {    // a가 "1"이면 
    <%
        System.out.println("test");    // "test"를 서버 콘솔에 출력
    %>
    }
});

다음은 JSP에서 Javascript를 사용하는 코드이다. 코드 작성자의 의도는 a가 "1"이면 test를 서버 콘솔에 출력하려는 것이다. 정상적으로 동작할까? 결과는 if문과 관계없이 무조건 test를 콘솔에 출력한다. 그 이유는 JSP와 Javascript가 작동하는 영역이 서로 다르기 때문이다.

코드 작성자는 View의 역할로 서버 템플릿 엔진인 JSP를 사용하고 있다. 서버 템플릿 엔진을 이용한 화면 생성은 서버에서 Java코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달한다. 즉, 서버에서 HTML을 만들어 클라이언트로 전달한다. 앞선 코드는 HTML을 만드는 과정에서 System.out.print("test");를 실행할 뿐이며, 이때의 자바스크립트 코드는 단순한 문자열로 취급된다.

브라우저는 서버가 전달한 HTML을 받고 그제서야 서버에서 문자열 취급 받던 Javascript 코드를 인식하고, 코드를 실행한다. 즉, 클라이언트 템플릿 엔진인 자바스크립트는 브라우저(클라이언트) 위에서 작동한다. 흔히 이야기하는 Vue.js나 React.js를 이용한 SPA는 브라우저에서 화면을 생성한다. 그래서 서버에서는 Json 혹은 Xml 형식의 데이터만 전달하고 클라이언트에서 조립한다.

머스테치란?

Mustache는 수많은 언어를 지원하는 가장 심플한 템플릿 엔진이다. 루비, 자바스크립트, 파이썬, PHP, 자바, 펄, Go, ASP등 현존하는 대부분 언어를 지원하고 있따. 그러다보니 자바에서 사용될 때는 서버 템플릿 엔진으로, 자바스크립트에서 사용될 때는 클라이언트 템플릿 엔진으로 모두 사용할 수 있다.

머스테치의 장점은 다음과 같다.

문법이 다른 템플릿 엔진보다 심플하다.
로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확하게 분리된다.
Mustache.js와 Mustache.java 2가지가 다 있어, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능하다.
인텔리제이 커뮤니티 버전에서 공식 지원한다. Thymeleaf나 JSP 등은 커뮤니티 버전에서 지원하지 않고 인텔리제이 얼티메이트 버전에서만 공식 지원한다.
스프링 부트에서 공식 지원하는 템플릿 엔진으로서, 의존성만 추가하면 추가 설정없이 사용할 수 있다. 따라서 버전 충돌을 신경쓰지 않아도 된다.

머스테치 사용하기

머스테치를 사용하기 위해서는 다음의 준비들이 필요하다.

Handlebars/Mustache 플러그인 설치하기
의존성 등록하기
머스테치 파일 생성

Handlebars/Mustache 플러그인 설치하기

머스테치 플러그인을 이용하면 머스테치의 문법체크, HTML 문법 지원, 자동완성 등이 지원된다.

의존성 등록하기

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

보는 것 처럼 머스테치는 스프링 부트에서 공식 지원하는 템플릿 엔진이다. 따라서 자동완성도 되고, 의존성 하나만 추가하면 다른 스타터 패키지와 마찬가지로 추가 설정 없이 사용가능하다. 별도로 스프링 부트 버전과의 충돌을 개발자가 신경쓰지 않아도 되는 장점도 있다.

머스테치 스타터 덕분에 컨트롤러에서 문자열을 반환할 때 앞의 경로와 뒤의 파일 확장자는 자동으로 지정된다.

머스테치 파일 생성

스프링 부트에서 머스테치 파일 위치는 기본적으로 src/main/resources/templates이다. 이 위치에 머스테치 파일을 두면 스프링 부트에서 자동으로 로딩한다. 만약 컨트롤러에서 "index"를 반환하면 src/main/resources/templates/index.mustache 로 전환되어 View Resolver가 처리하게 된다.

머스테치 문법

{{> }}
: {{> }}는 현재 머스테치 파일을 기준으로 다른 파일을 가져온다. 예를 들어 {{>layout/header}}라면 현재 파일위치/layout/header.mustache를 가져와서 붙인다는 의미이다.
{{# }}
: {{# }}는 스프링 부트의 Model에서 값을 가져오는 코드이다. 만약 값이 List타입이라면 순회를 한다. 예를 들어, {{#posts}}는 posts라는 리스트를 순회한다. 이때 엔드({{#/posts}} 가 있다. 또 다른 기능으로는 if의 역할을 하기도한다. 이때는 값이 있다면 시작태그와 종료 태그 사이에 있는 코드를 수행한다.
{{^ }}
: {{^ }}는 해당 값이 존재하지 않는 경우에 특정 기능을 하고싶을 때 사용한다. 시작 태그와 종료태그 사이의 코드를 수행한다.
{{ }}
: {{ }}는 리스트 순회시 리스트에서 추출한 객체의 필드를 사용한다. 예를 들어, {{#posts}} {{id}} {{#/posts}}는 posts리스트에서 뽑아낸 객체의 id를 가져온다. {{post.id}}는 객체의 필드에 바로 접근할 때 사용된다.

참고

스프링 부트와 AWS로 혼자 구현하는 웹 서비스

티스토리