- 서버 템플릿 엔진과 머스테치 소개
지정된 템플릿 양식과 데이터가 합쳐서 HTML 문서를 출력하는 소프트웨어를 이야기합니다.
- 서버 템플릿 엔진 : JSP, Freemarker 등
- 클라이언트 템플릿 엔진 : 리엑트(React), 뷰(Vue)의 View 파일들
※ 자주 올라오는 질문 : 자바스크립트에서 JSP나 Freemarker처럼 자바 코드를 사용할 순 없나요?
이에 대한 예시 코드는 다음과 같습니다.
<script type="text/javasceipt">
$(document).ready(function(){
if(a=="1"){
<%
System.out.println("test");
%>
}
});위 코드는 if문과 관계없이 무조건 test를 콘솔에 출력합니다. 이유는 프론트엔드의 자바스크립트(Nodejs가 아닙니다.)가 작동하는 영역과 JSP가 작동하는 영역이 다르기 때문인데, JSP를 비롯한 서버 템플릿 엔진은 서버에서 구동됩니다.
JSP는 명확하게는 서버 템플릿 엔진은 아니라고 합니다. View의 역할만 하도록 구성할 때 템플릿 엔진으로써 사용할 수 있습니다. 이 경우엔 Spring + JSP로 사용한 경우로 보면 됩니다.
서버 템플릿 엔진을 이용한 화면 생성은 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달합니다. 이 때의 자바스크립트 코드는 단순한 문자열일 뿐입니다.
자바스크립트는 브라우저 위에서 작동합니다. 그래서 실행되는 장소는 서버가 아닌 브라우저입니다.
- 머스테치란?
머스테치(mustache.github.io/)는 수많은 언어를 지원하는 가능 심플한 템플릿 엔진입니다. 자바에서는 JSP, Velocity, Freemarker, Thyeleaf 등 다양한 템플릿 엔진이 존재합니다. 그 중에서 머스테치의 장점은 다음과 같습니다.
- 문법이 다른 템플릿 엔진보다 심플합니다.
- 로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확하게 분리됩니다.
- Mustache.js와 Mustache.java 2가지가 다 있어, 하나의 문법으로 클라이언트/서버 템플릿 모두 사용 가능합니다.
템플릿 엔진은 화면 역할에만 충실해야 좋아도 합니다. 너무 많은 기능을 제공하면 API와 템플릿 엔진, 자바스크립
트가 서로 로직을 나눠 갖게 되어 유지보수하기가 굉장이 어렵습니다.
- 머스테치 플러그인 설치
- 기본 페이지 만들기
1. 머스테치 스타터 의존성 추가(build.gradle)
compile('org.springframework.boot:spring-boot-starter-mustache')스프링 부트에서 공식 지원하는 템플릿 엔진입니다.
※ Template Language 설정
머스테치의 파일 위치는 기본적으로 src/main/resources/templates 입니다. 이 위치에 머스테치 파일을 두면 스프링 부트에서 자동으로 로딩합니다. 첫 페이지를 담당할 index.mustache를 생성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>스프링 부트 웹 서비스</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
</head>
<body>
<h1>스프링 부트로 시작하는 웹 서비스</h1>
</body>
</html>2. 머스테치에 URL 매핑
- Controller에서 URL 매핑
package com.jordy.books.springboot.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {
@GetMapping("/")
public String Index(){
return "index";
}
}머스테치 스타터 덕분에 컨트롤러에서 문자열을 반환할 때 앞의 경로와 뒤의 파일 확장자는 자동으로 지정됩니다. 앞의 경로는 src/main/resources/templates/index.mustache로 전환되어 View Resolver가 처리하게 됩니다.
ViewResolver는 URL 요청의 결과를 전달할 타입과 값을 지정하는 관리자 격으로 볼 수 있습니다.
3. 테스트 코드로 검증
package com.jordy.books.springboot.web;
import org.assertj.core.api.Assertions;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.boot.test.web.client.TestRestTemplate;
import org.springframework.test.context.junit4.SpringRunner;
import java.util.Random;
@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
public class IndexControllerTest {
@Autowired
private TestRestTemplate restTemplate;
@Test
public void 메인페이지_로딩(){
//when
String body = this.restTemplate.getForObject("/",String.class);
//then
Assertions.assertThat(body).contains("스프링 부트로 시작하는 웹서비스");
}
}
실제로 URL 호출 시 페이지의 내용이 제대로 호출되는지에 대한 테스트 입니다. HTML도 결국은 규칙이 있는 문자열입니다. TestRestTemplate를 통해 "/"로 호출했을 때 index.mustache에 포함된 코드들이 있는지 확인하면 됩니다.
출처 :
[스프링 부트와 AWS로 혼자 구현하는 웹 서비스] 출간 후기
(출판사: 프리렉, 쪽수: 416, 정가: 22,000원) 서적 링크 오프라인 서점에는 2019.12.04 (수) 부터 올라갈 예정입니다. 강남 교보문고나 광화문 교보문고는 주말에도 올라올 순 있겠지만, 혹시 모르니
jojoldu.tistory.com
'스프링부트와 AWS로 구현하는 웹서비스' 카테고리의 다른 글
| [스프링부트/AWS] 4장 게시글 수정, 삭제 화면 만들기 3 (0) | 2021.04.04 |
|---|---|
| [스프링부트/AWS] 4장 게시글 등록 화면 만들기 2 (0) | 2021.03.21 |
| [스프링부트/AWS] 3장 스프링 부트에서 JPA로 데이터베이스 다뤄보자(2/2) - Spring 웹계층, CRUD API, Auditing (0) | 2021.02.25 |
| [스프링부트/AWS] 3장 스프링 부트에서 JPA로 데이터베이스 다뤄보자(1/3) - JPA (0) | 2021.02.23 |
| [스프링부트/AWS] 2장 스프링 부트에서 테스트 코드를 작성하자(2/2) - Lombok (0) | 2021.02.21 |
