Chapter 04. 머스테치로 화면 구성하기 - DoDaek/freelec-springboot2-webservice GitHub Wiki

• 일반적으로 웹 개발에 있어 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 이야기합니다.
• JSP, Freemarker 등을 떠올리거나 리액트( React ), 뷰( Vue )의 View 파일들을 떠올릴 수 있습니다.
• 둘 모두 결과적으로 지정된 템플릿과 데이터를 이용하여 HTML을 생성하는 템플릿 엔진입니다.
• 다만, 조금의 차이가 있습니다.
  • JSP, Freemarker -> 서버 템플릿 엔진
  • React, Vue -> 클라이언트 템플릿 엔진

<script type="text/javascript">

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

• 위 코드는 if문과 관계없이 무조건 test를 콘솔에 출력합니다.
• 이유는 프론트엔드의 자바스크립트( Nodejs가 아닙니다 )가 작동하는 영역과 JSP가 작동하는 영역이 다르기 때문인데 JSP를 비롯한 서버 템플릿 엔진은 서버에서 구동됩니다.
• 서버 템플릿 엔진을 이용한 화면 생성은 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달합니다.
• 앞선 코드는 HTML을 만드는 과정에서 System.out.println("test");를 실행할 뿐이며, 이때의 자바스크립트 코드는 단순한 문자열일 뿐입니다.
  • 반면에 자바스크립트는 브라우저 위에서 작동합니다.
• 앞서 작성된 자바스크립트 코드가 실행되는 장소는 서버가 아닌 브라우저입니다.
  • 즉, 브라우제에서 작동될 때는 서버 템플릿 엔진의 손을 벗어나 제어할 수가 없습니다.
• 흔히 이야기라는 Vue.js나 React.js를 이용한 SPA( Single Page Application )는 브라우저에서 화면을 생성합니다.
  • 즉, 서버에서 이미 코드가 벗어난 경우입니다.
  • 서버에서는 Json 혹은 Xml 형식의 데이터만 전달하고 클라이언트에서 조립합니다.

• 머스테치는 수많은 언어를 지원하는 가장 심플한 템플릿 엔진입니다.
• 루비, 자바스크립트, 파이썬, PHP, 자바, 펄, Go, ASP 등 현존하는 대부분 언어를 지원하고 있습니다.
• 자바에서 사용될 때는 서버 템플릿 엔진으로, 자바스크립트에서 사용될 때는 클라이언트 템플릿 엔진으로 모두 사용할 수 있습니다.
• 자바 진영에서는 JSP, Velocity, Freemarker, Thymeleaf 등 다양한 서버 템플릿 엔진이 존재합니다.
• 필자( 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 저자 )가 생각하는 템플릿 엔진들의 단점
  • JSP, Velocity
    • 스프링 부트에서는 권장하지 않는 템플릿 엔진입니다.
  • Freemarker
    • 템플릿 엔진으로는 너무 과하게 많은 기능을 지원합니다.
    • 높은 자유도로 인해 숙련도가 낮을수록 Freemarker 안에 비즈니스 로직이 추가될 확률이 높습니다.
  • Thymeleaf
    • 스프링 진영에서 적극적으로 밀고 있지만 문법이 어렵습니다.
    • 태그에 속성으로 템플릿 기능을 사용하는 방식이 기존 개발자분들께 높은 허들로 느껴지는 경우가 많습니다.
    • 실제로 사용해 본 분들은 자바스크립트 프레임워크를 배우는 기분이라고 후기를 이야기하기도 합니다.
    • 물론 Vue.js를 사용해 본 경험이 있어 태그 속성 방식이 익숙한 분이라면 Thymeleaf를 선택해도 됩니다.
• 머스테치의 장점
  • 문법이 다른 템플릿 엔지보다 심플합니다.
  • 로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확하게 분리됩니다.
  • Mustache.js와 Mustache.java 2가지가 다 있어, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 사능합니다.