[Spring Boot] 04장. 머스테치로 화면 구성하기 - 서버 템플릿 엔진과 머스테치 소개

🌱  이번 장의 스터디 범위

• 서버 템플릿 엔진과 클라이언트 템플릿 엔진의 차이
• 머스테치의 기본 사용 방법

🌱   템플릿 엔진

• 템플릿 엔진 : 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력(생성)하는 소프트웨어 
• 즉, 웹 사이트의 화면을 어떤 형식으로 만들지 도와주는 양식

🌱   템플릿 엔진 - 서버 템플릿 엔진

• 서버 템플릿 엔진 : JSP, Freemarker
• 프론트엔드의 자바스크립트가 작동하는 영역(브라우저)과 JSP가 작동하는 영역(서버)은 다름
• 서버 템플릿 엔진은 서버에서 구동하며 Java  코드로 문자열을 만든 뒤 문자열을 HTML로 변환해 브라우저에 전달해 화면 생성
• 반면 자바스크립트는 서버가 아닌 브라우저 위에서 작동하므로 서버 템플릿 엔진으로만 제어 가능 (서버 템플릿 엔진이 필수)

🌱   템플릿 엔진 - 클라이언트 템플릿 엔진

• 클라이언트 템플릿 엔진 : 리액트, 뷰의 View 파일
• 클라이언트 템플릿 엔진인 Vue.js, React.js를 이용한 SPA(Single Page Application)는 브라우저에서 화면 생성
• 즉 서버에서 벗어나서 화면 구성 가능
• 서버에서는 Json 혹은 Xml 형식의 데이터만 전달하고 클라이언트에서 조립

🌱   머스테치란

• 수많은 언어를 지원하는 가장 심플한 템플릿 엔진
• 머스테치는 루비, 자바스크립트, 파이썬, PHP, 자바, 펄, Go, ASP 등의 언어를 지원
• 자바(Mustache.java)는 서버 템플릿 엔진으로, 자바스크립트(Mustache.js)는 클라이언트 템플릿 엔진으로 모두 사용 가능
• 문법이 다른 엔진에 비해 심플하며 로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 분명하게 분리되는 장점
• 즉, 템플릿 엔진이 화면 역할에만 충실할 수 있음

🌱   머스테치 플러그인 설치

• Marketplace에서 mustache 검색을 통해 플러그인 설치 후 재시작