mustache(템플릿엔진)

2023. 6. 1. 17:44 Template Engine/Handlebars, Mustache

컨트롤러에서 mustache라는 템플릿엔진에 데이터를 전달해, 동적인 HTML을 만들어내는 법을 배운다.

MVC의 개념

MVC는 한 곳에서 많은 로직을 처리하는 대신, 각 코드의 역할을 분담하기 위해 등장했다.

  • Controller : 최초 진입 지점. 사용자의 입력 값이 유효한 지를 검증하고, 사용자가 입력한 데이터를 Model에 전달하고, Model의 처리 결과에 따라 이동할 View를 결정하는 역할
  • Model : 실질적인 비즈니스 로직을 구현하는 역할을 담당함. 비즈니스 로직 처리 결과를 DB에 저장하고 조회하는 역할. 애플리케이션의 엔진이라 할 수 있음.
  • View : Controller에 의해 전달된 데이터를 단순히 출력하는 역할

템플릿 엔진이란?

: 지정된 템플릿 양식과 데이터를 이용하여 HTML문서를 출력하는 소프트웨어.

  • 서버 템플릿엔진 : JSP, Freemarker ..
    • 서버에서 Java코드로 문자열을 만든 뒤, 문자열을 HTML로 변환해 브라우저로 전달함
  • 클라이언트 템플릿엔진 : View파일(리액트 등)

자바에서는 다양한 서버 템플릿 엔진이 존재함.

  • JSP, Velocity, Freemarker, Thymeleaf, Mustache .. 가 있음
    • 권장 : Mustache, Thymeleaf
    • Mustache(문법이 심플. JS와 Java 모두 지원. 인텔리제이 무료버전에서도 플러그인 지원)
    • Thymeleaf(스프링이 적극 지원 but 문법이 어려움. JS프레임워크와 비슷)

mustache(머스태시)

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

자바에서 사용될 때는 서버 템플릿 엔진으로 사용 가능.

  • Mustache 템플릿 파일을 호출하려면 반드시 컨트롤러를 통해 호출해야 한다.
  • 머스태시의 파일 위치는 기본적으로 scr/main/resources/templates이다.
  • 머스태시의 파일 확장자는 .mustache이다. (.html파일 확장자를 .mustache로 생성하면 된다)

설치

  1. 인텔리제이 플러그인 - mustache 검색 - "Handlebars/Mustache" 설치 후 재시작
  2. build.gradle에 mustache 의존성 등록 (dependencies에 추가) 후 gradle 업데이트
  3. compile('org.springframework.boot:spring-boot-starter-mustache')
  4. application.properties에 다음과 같이 설정한다.spring.mustache.cache=false
  5. (html 코드 수정시 매번 서버를 재시작하는 번거로움을 피하기 위한 작업이다)