머스테치로 화면 구성하기
머스테치란?
머스테치는 수많은 언어를 지원하는 가장 심플한 템플릿 엔진이다.
루비, 자바스크립트, 파이썬, PHP, 자바, 펄 ,Go, ASP 등 현존하는 대부분 언어를 지원한다.
그러다 보니 자바에서 사용될 때는 서버 템플릿 엔진으로 자바스크립트에서 사용될 때는 클라이언트
템플릿 엔진으로 모두 사용할 수 있다.
자바 진영에서는 JSP, Velocity, Freemarker, Thymeleaf 등 다양한 서버 템플릿 엔진이 존재한다.
템플릿 엔진단점
- JSP, Velocity : 스프링부트에서는 권장하지 않는 템플릿 엔진이다.
- FreeMarker : 템플릿 엔진으로는 너무 과하게 많은 기능을 지원한다. 높은 자유도로 인해
숙련도가 낮을수록 FreeMarker 안에 비즈니스 로직이 추가될 확률이 높다.
- Thymeleaf : 스프링 진영에서 적극적으로 밀고 있지만 문법이 어렵습니다. HTML 태그에
속성으로 템플릿 기능을 사용하는 방식이 기존 개발자분들께 높은 허들로 느껴
지는 경우가 많다. 실제로 사용해 봤다면 자바스크립트 프레임워크를 배우는
기분이라고 후기를 이야기도 한다. Vue.js를 사용해 봤다면 선택해도 괜찮다.
머스테치 장점
- 문법이 다른 템플릿 엔진보다 심플하다.
- 로직코드를 이용할 수 없어 View의 역할과 서버의 역할이 명확하게 분리된다.
- Mustache.js와 Mustache.java 2가지가 다 있어, 하나의 문법으로 클라이언트/서버
템플릿을 모두 사용 가능하다.
저자님은 템플릿 엔진은 화면 역할에만 충실해야 한다고 생각한다. 너무 많은 기능을 제공하면
API 와 템플릿 엔진, 자바스크립트가 서로 로직을 나눠 갖게되어 유지보수가 굉장히 어렵다고 한다.
머스테치 플러그인 설치
플레이스 마켓에서 머스테치 다운
그리고 Dependency 추가
머스테치의 파일 위치는 기본적으로 src/main/resources/templates 이다.
이 위치에 머스테치 파일을 두면 스피링 부트에서 자동으로 로딩 한다고 한다.
이제 index.mestache 파일 생성
(나는 처음에 new 메뉴에 mustache파일이 따로 있는줄 알았으나 그냥 File 눌러서 index.mustache 파일을 만들면 되는 거였다.)
HTML
web 폴더 아래 IndexController 추가
머스테치 스타터 덕분에 컨트롤러에서 문자열을 반환할 때 앞의 경로와 뒤의 파일 확장자는
자동으로 지정 되다고 한다. (뷰 리졸버 역할을 하나보다.)Spring 에서 예로들면
DispatcherServlet에 있는 뷰리졸버 역할도 같이 하는 것 같다.
바로 테스트 클래스를 만들었다.
HTML도 결국은 규칙이 있는 문자열 이기 때문에 TestRestTemplate을 통해 root(/)로 호출 했을때
index.mustache에 포함된 코드들이 있는지 확인하면 된다고 한다 그래서 위에 코드를 보면
contains로 Html코드 안 H1태그에 있는 문자열과 비교해 테스트 해본다.