머스테치란
서버 템플릿 엔진으로 가장 심플하게 나와서 사용되고 있으며, 자바스크립트에서 사용될 때는 클라이언트 템플릿 엔진으로 사용 할 수 있다.
현존 하는 대부분의 언어를 지원한다.
템플릿 엔진
지정된 템플릿 양식과 데이터를 합쳐서 HTML문서를 출력하는 소프트웨어를 말한다.
서버 템플릿엔진, 클라이언트 템플릿 엔진
두개의 차이는 어디서 구동이되는지 이다. 서버는 서버에서 코드로 문자열을 만든 후 html로 변환되는 것이고 클라이언트는 브라우저 위에서 작동하며 서버에 json, xml형식의 데이터만 전달한다.
종류는 서버: JSP, Freemarker, 클라이언트 : react, Vue 가 대표적이다.
머스테치 플러그인 설치
인텔리제이 플러그인에서 설치를 하면 된다.
무료버전에서도 공식지원을 하고 있다.
file -> settings -> plugin -> mustache 검색으로해서 설치 할 수 있다.
머스테치 사용법
- build.gradle에 의존성을 추가한다.
파일위치는 src/main/resources/templates 이고 확장자명은 .mustache이다.
TMI로 thymeleaf의 위치도 동일 위치에 존재한다.
index 메인 화면이다.
부트스트랩과 연동되어 사용이 되었고 해당문법은 https://mustache.github.io/ 통하여 github pages나 매뉴얼을 선택하여 확인 할 수 있다.
화면 연동
index page와 연결되는 controller이다.
부트스트랩 연동
나는 지금까지 부트스트랩을 다운받아 연결하여 header에 가지고 다니는 방법을 선택하여 개발하였는데 책에서는 외부 CDN을 사용하여 부스트트랩을 이용하였다.
(실제 서비스에서는 전자처럼 사용을 하는데 그이유는 CDN에 문제가생기면 의존성때문에 같이 문제가 발생되기 떄문이다.)
책을 읽으면서 중요한 부분이 있었는데 스크립트관련 연결 부분은 footer에 css관련된 부분은 header에 넣는 것이었다.
이유는 페이지 로딩속도를 향상시키는 부분인데 head가 먼저 실행이 끝나야 body가 실행되므로
불필요하게 js를 가져오면 모두 읽기전까지 로딩이 생긴다는 것이다.
참고로 나는 개발할때 당연히 header에 모아놔야지 관리가 된다고 생각을 했었다..
template 분리
실무에서 jsp를 사용했었는데 엣날 방식이지만 sitemash나 tiles, include 같은 방식으로 사용했는데 여기서도 유사한 방식으로 {{layout/header}}, {{layout/footer}}를 사용하여
진행했다.
1. header file
2. footer file
index javascript
index.js의 위치는 src/main/resources/static/ 위치에 존재한다.
index js에 main이 별도로 존재하는 이유는 브라우저의 스코프(scope)는 공용 공간으로 사용하기 때문에 나중에 로딩된 js의 init, save가 먼저 로딩된 js의 function을 덮는 일이 발생한다.
여러명이서 작업하는 프로젝트에서는 중복된 함수 이름이 발생되기 때문에 이런 문제를 피하려고 유효범위를 만들어 사용한다.
이번 챕터의 나의 생각
이책을 가지고 블로그를 쓰는 개발자들이 많은 것 같다. 게시판 작성 튜토리얼부터 책에 자세히 나와있으니 단순히 블로그 검색보다는 책을 읽는것을 추천한다.
그리고 여기에 나와있는 많은 개념들을 하나의 블로그에 기술하는것도 문제가 되지않을까 생각한다.
기본 index화면과 유사한 패턴으로 mustache파일들이 작성된다.
일단 여기서 mustache를 사용하건 thymeleaf를 사용하건, jsp를 사용하건 로딩속도에 대한문제가 정말 좋았다.
jpa를 실무에서 쓸수 있을지 없을지 모르겠지만 틈틈히 공부좀 해야겠다.
