서버 템플릿 엔진과 머스테치 소개
템플릿 엔진이란? 지정된 템플릿 양식과 데이터가 합쳐져 HTML문서를 출력하는 소프트웨어를 이야기한다.
템플릿 엔진은 서버 템플릿 엔진(JSP, Freemarker)과 클라이언트 템플릿 엔진(React, Vue)으로 나뉜다.
서버 사이드 템플릿 엔진은 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 템플릿(Template)에 넣어 HTML 문서를 만들어 클라이언트에 전달해주는 역할을 한다. 즉, 서버에서 구동된다.
클라이언트 사이드 템플릿 엔진은 HTML 형태로 코드를 작성할 수 있으며 동적으로 DOM을 그리게 해주는 역할을 한다.
즉, 데이터를 받아 DOM 객체에 동적으로 그려주는 프로세스를 담당한다. 즉, 브라우저 위에서 작동된다.
머스테치란?
머스테치는 수많은 언어를 지원하는 가장 심플한 템플릿 엔진이다.
자바에서 사용될 때는 서버 템플릿 엔진으로, 자바스크립트에서 사용될 때는 클라이언트 템플릿 엔진으로 모두 사용된다.
자바에는 JSP, Velocity, Freemarker, Thymeleaf 등 다양한 서버 템플릿 엔진이 존재한다.
하지만 이번 실습에서는 머스테치를 사용한다.
머스테치의 장점
- 문법이 다른 템플릿 엔진보다 심플하다.
- 로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확하게 분리된다.
- Mustache.js와 Mustache.java 2가지가 다 있어, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능하다.
기본 페이지 만들기
implementation 'org.springframework.boot:spring-boot-starter-mustache'머스테치를 사용할려면 이 의존성을 추가해야한다.
mustache 파일은 resources 파일에 templates 폴더에 들어간다.
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>이렇게 mustache 파일을 하나 만들고 IndexController를 하나 생성한다.
@Controller
public class IndexController {
@GetMapping("/")
public String index(Model model){
return "index";
}
}머스테치 스타터 덕분에 컨트롤러에서 문자열을 반환할 경우 앞의 경로와 뒤의 파일 확장자는 자동으로 지정된다.
즉 src/main/resources/templates/index.mustache로 리턴된다. 이렇게 되면 View Resolver가 처리한다.
View Resolver는 URL 요청의 결과를 전달할 타입과 값을 지정하는 관리자 격으로 볼 수 있다.
이제 이게 잘 출력되는지 직접 켜서확인하는 것이 아닌 Test 파일로 확인해볼려고 한다!!
IndexControllerTest 클래스
@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
assertThat(body).contains("스프링 부트로 시작하는 웹 서비스");
}
}SpringBootTest는 랜덤 포트로 설정해 랜덤으로 접근할 수 있게 만든다.
HTML도 결국 규칙이 있는 문자열이기 때문에 TestRestTemplate를 통해 "/"를 호출했을 때 index.mustache에 포함된 코드들이 있는지 확인할 수 있다. 여기서 스프링 부트로 시작하는 웹 서비스가 포함되어 있는지 검사하는 것이다!!
에러가 발생할 수 있다. 그 이유는 머스테치에서 한글이 깨질 수 있기 때문이다. 그 때는
server.servlet.encoding.force=true 이것을 application.properties에 추가해주면 된다!!
다음부터는 본격적으로 게시글 등록, 수정, 삭제 페이지를 만들어 볼 것이다.
'토이프로젝트 > 스프링 부트로 구현한 웹' 카테고리의 다른 글
| 머스테치로 화면 구성하기(3) 수정, 삭제 (0) | 2023.03.03 |
|---|---|
| 머스테치로 화면 구성하기(2) 등록, 조회 (0) | 2023.03.03 |
| JPA를 사용한 게시판 구현(2) - 등록/수정/조회 API 만들기 (1) | 2023.02.28 |
| JPA를 사용한 게시판 구현(1) (1) | 2023.02.27 |
| 스프링 부트 JPA를 사용해야하는 이유 (0) | 2023.02.27 |
