머스테치로 화면 구성하기

서버 템플릿 엔진과 머스테치

<aside> 💡 템플릿 엔진은 지정된 템플릿 양식 + 데이터 ⇒ HTML 문서를 출력하는 소프트웨어

</aside>

• 서버 템플릿 엔진
  • 서버에서 DB/API에서 가져온 데이터를 생성된 템플릿에 넣어 HTML 문서 변환후 클라이언트에게 전달
  • HTML 코드에서 고정으로 쓰는 부분은 템플릿으로, 동적인 부분만 템플릿의 특정부분에 끼워넣어 동작
  • Thymeleaf, JSP, Freemarker 등
• 클라이언트 템플릿 엔진
  • HTML 형태로 코드 작성이 가능, 데이터를 받아서 DOM 객체에 동적으로 그려주는 과정을 담당
  • 클라이언트에서 공통 프레임을 템플릿으로 만들고 서버에서 필요 데이터를 받은 후 이를 템플릿에 배치
  • Mustache, Squirrelly, 리액트나 뷰의 View 파일 등

Mustache

• 수많은 언어를 지원하는 가장 심플한 템플릿 엔진

• 장점 : 문법이 심플하며, 하나의 문법으로 클라이언트/서버 템플릿 모두 가능, 뷰와 서버의 명확한 역할 분리

• 📁 src/main/resources/templates 에 머스테치 파일을 두면 스프링 부트에서 자동 로딩

• 해당 머스테치에 URL을 맵핑하며, 이 맵핑은 web>Controller들에서 진행

• 프론트엔드 라이브러리(부트스트랩, 제이쿼리등) 사용방법

  • 외부 CDN 사용 ⇒ mustache 파일에 코드 한줄만 추가하면 됨
  • 직접 라이브러리를 받아서 사용

• index.js 코드