템플릿 엔진
템플릿 엔진은 일반적으로 웹개발에 있어 지정된 템플릿 양식과 데이터가 합쳐져 HTML문서를 출력하는 소프트웨어를 말합니다.
JSP 혹은 React, Vue를 떠올리면 됩니다.
이들은 모두 지정된 템플릿과 데이터를 이용해 HTML을 생성하는 템플릿 엔진이지만 전자는 서버 템플릿 엔진이며, 후자는 클라이언트 템플릿 엔진이라 불립니다.
서버 템플릿 엔진
JPS를 비롯한 서버 템플릿 엔진은 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환해 브라우저로 전달합니다.
반면 자바스크립트는 브라우저 위에서 작동합니다.
즉, JSP와 자바스크립트는 작동하는 영역이 다릅니다.
자바스크립트가 브라우저에서 작동이 될 땐, 이미 서버의 손을 벗어난 이후입니다.
<script type = "text/javascript>
$(document).ready(function(){
if (a == "1"){
<%
System.out.println("test");
%>
}
});위와 같은 원리로 위 코드에서 test는 if문과 관계없이 항상 출력될 것입니다.
클라이언트 템플릿 엔진
Vue나 React를 이용한 single page application에서는 브라우저에서 화면을 생성합니다.
즉 서버에서는 json 혹은 xml 형식의 데이터만 전달하고 클라이언트에서 조립합니다.
머스테치
머스테치는 수많은 언어를 지원하는 템플릿 엔진입니다.
그래서 자바에서는 서버 템플릿엔진으로, 자바스크립트에서는 클리어언트 템플릿 엔진으로 사용 할 수 있습니다.
머스테치의 장점은 다음과 같습니다.
- 문법이 심플합니다.
- 로직코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확하게 구분됩니다.
- Mustache.js와 Mustache.java가 모두 있어 한의 문법으로 클리어언트/서버템플릿을 모두 사용 가능합니다.
머스테치는 인텔리제이 플러그인으로 설치해 사용할 수 있습니다.
기본페이지 만들기
머스테치 의존성을 추가해야합니다.
build.gradle에 implementation('org.springframework.boot:spring-boot-starter-mustache')를 작성하고 내려받습니다.
머스테체의 위치는 기본적으로 src/main/resources/templates 입니다.
이 경로가 url에 매핑할 때 자동으로 앞에 붙어서 ViewResolver가 처리해주기 때문에 머스테치 파일은 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>다음과 같이 컨트롤러를 생성해서 URL을 매핑하겠습니다.
@Controller
public class IndexController {
@GetMapping("/")
public String index(){
return "index";
}
}테스트
@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = RANDOM_PORT)
public class IndexControllerTest {
@Autowired
private TestRestTemplate restTemplate;
@Test
public void 메인페이지_로딩(){
// when
String body = this.restTemplate.getForObject("/",String.class);
//then
assertThat(body).contains("스프링 부트로 시작하는 웹서비스");
}
}