서버 템플릿 VS 클라이언트 템플릿
템플릿 엔진이란 무엇일까? 일반적으로 웹 개발에 있어 템플릿 엔진이란 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 이야기한다. JSP,Freemarker / 리액트,뷰 등이 이에 해당된다.
나누어진 둘 모두 템플릿 엔진이긴 하지만 약간의 차이가 있다. 전자는 서버 템플릿 엔진이라 불리며, 후자는 클라이언트 템플릿 엔진이라 불린다.
서버 템플릿 엔진을 이용한 화면 생성은 서버에 HTML로 변환하여 브라우저로 전달한다. 즉 서버 사이드에서 구동이 된다.서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 넣어 html을 그려서 클라이언트에 전달해주는 역할을 한다.
반면에 자바스크립트는 브라우저 위에서 작동한다. 즉 브라우저에서 작동될 때는 서버 템플릿 엔진 손을 벗어나 제어할 수 없다.
흔히 이야기하는 뷰나 리액트를 이용한 SPA는 브라우저에서 화면을 생성한다. 그래서 서버에서는 Json 혹은 Xml 형식의 데이터만 전달하고 클라이언트에서 조립한다.
머스테치
머스테치는 수 많은 언어를 지원하는 가장 심플한 템플릿 엔진이다. 루비,자바스크립트,파이썬,PHP,자바,펄,GO,ASP 등 현존하는 대부분 언어를 지원하고 있다. 그러다보니 자바에서 사용 될 때는 서버 템플릿 엔진으로, 자바스크립트에서 사용 될 때는 클라이언트 템플릿엔진으로 모두 사용 될 수 있다.
템플린 엔진의 종류와 단점
- jsp, velocity : 스프링부트에서 권장하지 않음
- Freemarker : 너무 과하게 많은 기능, 숙련도가 낮아 Freemarker안에 비지니스 로직이 추가 될 확률이 높음
- Thymeleaf
스프링에서 적극적으로 밀고 있지만 문법이 어려움. HTML 태그에 속성으로 템플릿 기능을 사용하는 방식으로 배우기 어려움
머스테치의 장점
- 문법이 다른 템플릿 엔진보다 심플
- 로직 코드를 사용할 수 없어서 View의 역할과 서버의 역할을 명확하게 분리
- Mustache.js와 Mustache.java 2가지가 다 있어서, 하나의 문법으로 클라이언트/서버 템플릿 모두 사용 가능
- 인텔리제이 커뮤니티버전에서도 플러그인을 사용할 수 있음(jsp, Thymeleaf는 얼티메이트버전에서만 공식지원)
기본 페이지 만들기
가장 먼저 스프링 부트 프로젝트에 스타터 의존성을 build.gradle에 추가한다.
implementation('org.springframework.boot:spring-boot-starter-mustache')
머스테치는 스프링 부트에서 공식 지원하느 템플릿 엔진이므로 의존성 하나만 추가하면 다른 스타터 패키지와 마찬기로 추가설정 없이 설치가 끝이다.
머스테치의 파일 위치는 기본적으로 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>단순하게 h1 크기로 body를 출력하는 페이지이다. 이 머스테치를 이제 URL에 매핑하면된다.
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {
@GetMapping("/")
public String index(){
return "index";
}
}머스테치 스타터 덕분에 컨트롤러에서 문자열을 반환할때 앞의 경로와 두의 파일 확장자는 자동으로 지정된다.
이제는 테스트 코드를 만들어 검증을 해보도록 하겠다.
@ExtendWith(SpringExtension.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
public class IndexControllerTest {
@Autowired
private TestRestTemplate restTemplate;
@Test
public void GetIndex(){
//when
String body = this.restTemplate.getForObject("/",String.class);
//then
assertThat(body).contains("안녕하세요. 머스테치입니다.");
}
}HTML도 결국에는 규칙이 있는 문자열이다. TestRestTemplate를 통해 "/"을 호출 했을 떄 index.mustache에 포함된 코드들이 있는지 확인하면 된다. 전체코드를 전체다 검증할 필요가 없으니 "안녕하세요. 머스테치입니다." 문자열이 포함 되어있는지만 비교한다.
