[스프링 부트] 7. View 설계

KangHo Lee

Nov 17, 2024

💡

프로젝트 생성 시 Mustache 의존성을 추가한 상태입니다.

IDE는 IntelliJ이며 Settings → plugins → Handlebars/Mustache 설치를 진행 해야 .mustache파일을 사용할 수 있습니다.

머스테치(.mustache) 파일은 동적 파일이기 때문에 resources\templates 폴더에 생성합니다.

list.mustache (View 파일)


<!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>

html 작성 → html 5 자동 완성 후 작성하면 됩니다.

💡

IntelliJ에서는 HTML 파일인 경우 화면 우측 상단에 크롬으로 미리보기 기능이 있어서 확장자를 잠시 html로 바꿔서 작성하는 것도 추천합니다.

<table> 태그

<table border=”1”>

테이블 테두리 설정

<tr>

테이블의 행을 정의합니다.

하나의 행은 여러 개의 셀을 포함할 수 있습니다.

<th>

테이블의 헤더 셀을 정의합니다.

기본적으로 텍스트가 굵게 표시되고 중앙에 정렬됩니다.

<td>

테이블의 데이터 셀을 정의합니다.

BoardController.java(Controller 파일)


@RequiredArgsConstructor 
@Controller 
public class BoardController {
    
    private final BoardService boardService;

    @GetMapping("/")
    public String list() {
        return "list";              
    }
}

template 폴더에서 이름이 list인 mustache 파일을 불러옵니다.

💡

mustache가 설치가 되었기 때문에 View Resolver가 따로 설정을 적지 않아도 .mustache파일을 찾아줍니다.

브라우저 화면에서 한글이 깨질 경우


# 0. UTF-8 설정
server.servlet.encoding.charset=utf-8
server.servlet.encoding.force=true

application.properties에 위 소스 코드를 추가합니다.

charset → 인코딩 형식 설정

force=true → 요청과 응답 모두 강제로 utf-8 형식으로 인코딩합니다.