템플릿 엔진 및 mustache

템플릿 엔진

지정된 템플릿 양식과 데이터가 합쳐져 html 문서를 출력하는 소프트웨어. 웹 사이트의 화면을 어떤 형태로 만들지 도와주는 양식 

자바스크립트 작동 영역 != JSP 작동 영역 

서버 템플릿 엔진

서버 템플릿 엔진은 서버에서 구동됨 

서버 템플릿 엔진을 이용한 화면 생성 : 서버에서 Java코드로 문자열 생성 -> 문자열 html로 변환 -> 브라우저에 전달 

자바스크립트는 브라우저 위에서 작동. 자바스크립트가 실행되는 장소는 브라우저. 제어할 수 없음 

vue.js, react.js도 자바스크립트와 마찬가지 

자바 진영에서의 서버 템플릿 엔진들

-jsp,velocity: 스프링 부트에서는 지원하지 않음 

-freemarker : 과하게 많은 기능 제공. 

-thymeleaf: 문법이 어렵다. vue.js 경험(태그 속성 방식)이 있다면 사용해도 됨 

머스테치

html을 만들어주는 템플릿 엔진 다양한 언어를 지원하기 때문에 자바에서는 서버 템플릿 엔진 역할을, 자바스크립트에서 사용될 때는 클라이언트 템플릿 엔진 역할을 한다 

머스테치의 장점

• 문법이 비교적 심플하다
• 로직 코드를 사용할 수 없어 view역할과 서버의 역할 명확하게 분리 가능
• Mustache.js, Mustache.java 두가지 버전이 있어, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능 
• intellij community 버전에서도  플러그인 사용 가능 

 

머스테치 스타터로 인해 index controller에서 문자열을 반환할 때 다음이 자동으로 생성된다

• 파일 경로
• 파일 확장자 

 

프론트엔드 라이브러리를 사용할 수 있는 방법 두가지 

1. 외부 CDN 사용
2. 직접 라이브러리를 받아서 사용 

 

레이아웃 방식

공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식 

페이지 로딩 속도를 올리기 위해 header에는 css, footer에는 js를 넣음

css는 화면을 그리는 역할이므로 header에, js는 용량이 커질수록 Body 실행이 늦어지므로 body에 넣음 

jquery 다음으로 bootstrap.js이 실행되어야하므로 순서는 jquery -> bootstrap.js(bootstrap이 jquery에 의존한다)