템플릿 엔진

  • 템플릿 엔진

    • 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어

  • 서버 템플릿 엔진

    • JSP(View의 역할만 하도록 구성할 경우), Freemarker 등
    • 서버에서 구동
    • 서버에서 Java 코드 문자열을 만든 뒤, 이 문자열을 HTML로 변환하여 브라우저로 전달

  • 클라이언트 템플릿 엔진

    • React, Vue, Angular
    • 브라우저에서 작동
    • SPA(Single Page Application)는 브라우저에서 화면을 생성
    • 이런 경우 서버에서 Json 또는 XML 형식의 데이터만 전달하고 클라이언트에서 조립
    • 자바스크립트 프레임워크에서 서버 사이드 렌더링(Server Side Rendering)을 지원
      (자바스크립트 프레임워크의 화면 생성 방식을 서버에서 실행하는 것)

Mustache

  • 머스테치의 장점

    • 문법이 다른 템플릿 엔진보다 심플
    • 로직 코드를 사용할 수 없어 View 의 역할과 서버의 역할을 명확하게 구분
    • Mustache.js와 Mustache.java 2가지가 있어, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능

  • 그외 템플릿 엔진

    • JSP, Velocity
      • 스프링 부트에서는 권장하지 않는 템플릿 엔진
    • Freemarker
      • 템플릿 엔진으로는 과라게 많은 기능을 지원
      • 높은 자유도로 인하여 숙련도가 낮을 수록 Freemarker안에 비즈니스 로직이 추가될 확률이 높음
    • Thymeleaf
      • HTML 태그에 속성으로 템플릿 기능을 사용하는 방식이 어려울 수 있음
      • Vue.js 태그 속성 방식과 비슷

Mustache 의존성 추가

  • spring-boot-starter-mustache 의존성 추가
    • SpringBoot에서 공식 지원하는 템플릿 엔진
dependencies {
    ...
    compile('org.springframework.boot:spring-boot-starter-mustache')

    ...
}

Mustache Plugin 설치

  • Mustache 플러그인
    • IntelliJ community 버전에서 지원
    • 문법체크, HTML 문법 지원, 자동완성을 지원

기본 페이지 만들기

  • IndexController
@Controller
public class IndexController {
    @GetMapping
    public String index() {
        return "index";
    }
}
  • header.mustache
<!DOCTYPE HTML>
<html>
    <head>
        <title>스프링부트 웹서비스</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body>
  • footer.mustache
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

        <!--index.js 추가-->
        <script src="/js/app/index.js"></script>
    </body>
</html>
  • index.mustache
{{>layout/header}}

<h1>스프링 부트로 시작하는 웹 서비스 No. 3</h1>

{{>layout/footer}}

View Resolver

  • Mustache starter로 인한 View Resolver가 하는 일
    • 컨트롤러에서 문자열을 반환할 때 앞의 경로와 뒤의 파일 확장자는 자동으로 지정된다.
    • prefix: src/main/resources/templates
    • suffix: .mustache
    • index를 반환하는 경우 'src/main/resources/templates/index.mustache'로 전환

IndexControlerTest

  • 기본 페이지 테스트 코드
    • restTemplate.getForObject("/")를 호출하는 경우 index.mustache에 포함된 코드 확인
@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = RANDOM_PORT)
public class IndexControllerTest {
    @Autowired
    private TestRestTemplate restTemplate;

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

        // then
        assertThat(body).contains("스프링 부트로 시작하는 웹 서비스");
    }
}
  • IndexController 브라우저 확인

index.mustache 확인

'Spring > SpringBoot' 카테고리의 다른 글

[SpringBoot] 게시글 전체 조회  (0) 2020.05.29
[SpringBoot] 게시글 등록  (0) 2020.05.29
[SpringBoot] JPA Auditing  (0) 2020.05.28
[SpringBoot] Posts API 만들기  (2) 2020.05.28
[SpringBoot] 설정파일 yaml로 변경하기  (0) 2020.05.28

+ Recent posts

티스토리툴바