본문 바로가기

개발/Spring

[SpringBoot] 머스테치 Mustache

 

 

 

서버 템플릿 엔진과 클라이언트 템플릿 엔진

  • 템플릿 엔진
    • 지정된 템플릿 양식과 데이터가 합쳐서 HTML문서를 출력하는 소프트웨어
    • 웹 사이트의 화면을 어떤 형태로 만들지 도와주는 양식
    • JSP, Freemarker, React, vue의 View 파일

 

  • 서버 템플릿 엔진
    • JSP(View 역할만 할 경우 템플릿 엔진), Freemarker 등
    • 서버에서 구동 - 서버에서 Java 코드로 문자열을 만든 뒤 HTML로 변환하여 브라우저로 전달

 

서버 템플릿 엔진

 

  • 클라이언트 템플릿 엔진
    • React, vue 등 SPA(Single Page Application)
    • 브라우저에서 화면을 생성 - 서버에서 이미 코드가 벗어남
    • 서버에서 JSON, XML 형식의 데이터를 전달 받아 조립
    • 자바스크립트 서버사이드 렌더링이 가능 - 나중에 시도해볼만 하다.

 

클라이언트 템플릿 엔진

 

 

 


 

 

 

머스테치

  • 수많은 언어를 지원하는 가장 심플한 템플릿 엔진
  • JSP와 같이 HTML을 만들어준다

 

  • 다른 템플릿 엔진의 단점
    • JSP, Velocity: 스프링 부트에서 권장하지 않음
    • Freemaker: 템플릿 엔진으로는 과한 기능, 높은 자유도로 숙련도가 낮을 수록 비즈니스 로직이 추가될 확률이 높다
    • Thymeleaf: 스프링 진영에서 밀고있지만 문법이 어렵다. 

 

  • 머스테치의 장점
    • 문법이 심플하다
    • 로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확하게 분리된다
    • Mustache.js와 Mustache.java 2가지가 있어 하나의 문법으로 클라이언트/서버 템플릿을 모두 이용 가능
    • 인텔리제이 커뮤니티 버전에서도 지원

 

  • 템플릿 엔진은 화면 역할에만 충실해야 한다고 생각
    • API, 템플릿 엔진, 자바스크립트가 서로 로직을 나눠 갖게 되면 유지보수가 어려워진다.

 

 


 

 

머스테치 사용하기

- 머스테치 플러그인 설치

 

- build.gradle에 등록

implementation('org.springframework.boot:spring-boot-starter-mustache')

 

- 머스테치 파일의 기본 위치 src/main/resources/templates: 스프링 부트에서 자동으로 로딩

- IndexController를 생성하여 url 매핑

@Controller
public class IndexController {

    @GetMapping("/")
    public String index() {
        return "index";
    }
}

* 머스테치 스타터로 인해 문자열을 반환하면 앞의 경로와 파일 확장자가 자동으로 지정

  • src/main/resources/templates/index.mustache로 전환되어 View Resolver가 처리
  • ViewResolver
    • URL 요청의 결과를 전달한 타입과 값을 지정하는 관리자 역할로 볼 수 있다.

 

- IndexContollerTest

@ExtendWith(SpringExtension.class)
@SpringBootTest(webEnvironment = RANDOM_PORT)
class IndexControllerTest {

    @Autowired
    private TestRestTemplate restTemplate;

    @Test
    public void testLoadingMainPage() {
        //when
        String body = this.restTemplate.getForObject("/", String.class);

        //then
        assertThat(body).contains("스프링 부트로 시작하는 웹 서비스");
    }
}

한글이 깨져서 테스트 실패

- 인텔리제이의 인코딩 설정 확인: UTF-8로 변경 완료

    -> 그래도 실패함

 

- application.yml에 서버 인코딩 설정 추가(charset: 은 생략해도 되긴 함)

server:
  servlet:
    encoding:
      charset: UTF-8
      force: true

 

테스트, 실제 화면 출력 모두 성공