플러그인 추가 설치
(검색에 mustache라고 작성한 뒤, Handlebars/Mustache라고 적힌 파일을 설치하고 창을 닫습니다.)
1. 파일 생성 및 작성
resources 폴더에는 static 폴더와 templates 폴더가 있습니다.
- static 폴더 : 정적인 자원(파일)들을 저장하는 용도입니다.
- templates : 동적인 자원(파일)들을 저장하는 용도입니다.
templates 폴더 안에 있는 파일들은 기본적으로 숨김처리가 되어 외부에서 접근할 수 없습니다.
이 폴더는 주로 Thymeleaf, Mustache, Freemarker 등의 템플릿 엔진을 통해 서버 사이드에서 HTML을 렌더링하는데 사용됩니다.
이유:
- 보안: 템플릿 파일을 외부에서 직접 접근하지 못하도록 함으로써 보안을 강화합니다.
- 서버 사이드 렌더링: 템플릿 엔진은 서버에서 데이터를 이용해 HTML을 렌더링하고, 완성된 HTML을 클라이언트에게 전송합니다. 이 과정에서 템플릿 파일은 서버에서만 접근 가능합니다.
templates 폴더 안에 list.mustache 파일을 생성 및 작성합니다.
list.mustache 파일 내용:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>blog</title>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">홈</a>
</li>
<li>
<a href="#">글쓰기</a>
</li>
</ul>
</nav>
<hr>
<section>
<table border="1">
<tr>
<th>번호</th>
<th>제목</th>
<th></th>
</tr>
<tr>
<td>5</td>
<td>제목5</td>
<td><a href="#">상세보기</a></td>
</tr>
<tr>
<td>4</td>
<td>제목4</td>
<td><a href="#">상세보기</a></td>
</tr>
</table>
</section>
</body>
</html>위의 list.mustache 파일을 실행시키기 위해 컨트롤러 클래스의 내용을 추가적으로 작성합니다.
BoardController 작성 내용 :
@RequiredArgsConstructor// final이 붙어있는 변수의 생성자를 만들어준다
@Controller
public class BoardController {
private final BoardService boardService;
// 컨트롤러는 view resolver 클래스를 가지고 있고, return 문자열과 동일한 파일을 찾아서 실행한다.
@GetMapping("/")
public String list() {
return "list";
}
}
간단하게 경로를 / 하나로 작성하였으며, 해당 요청을 받으면 list 파일의 내용을 보여줄 수 있도록 구성하였습니다.
return 할 문자열 값을 보여줄 파일의 이름 (확장자 제외) 만 작성하면, 해당하는 이름의 뷰 내용을 브라우저에서 출력할 수 있습니다.
컨트롤러는 클라이언트의 요청을 처리하고,
ViewResolver를 통해 논리적 뷰 이름을 실제 뷰 파일로 매핑하여 최종적으로 클라이언트에게 응답을 제공합니다.2. 출력 결과
localhost:8080/ 경로를 통해 확인 결과.
properties 파일에서 인코딩 설정을 하지 않아 한글이 모두 깨진 상태로 출력되는 모습입니다.
해당 문제를 해결하기 위해 properties 파일에 추가 내용을 작성하였습니다.
properties 파일 추가 내용:
3. properties 파일 수정 후 출력 결과
작성한 list.mustache 파일 내용이 한글 깨짐 없이 정상적으로 출력되는 것을 확인할 수 있습니다.
Share article