[스프링 부트] 10. 뷰 구현

lhs

Nov 17, 2024

Contents

1. Mustache 2. BoardController 3. application.properties 4. 출력 확인

1. Mustache

File > Settings > Plugins에서 Mustache 플러그인을 설치한다.

/resources/templates폴더에 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

templates 폴더는 직접 접근할 수 없으며, mustache 파일은 뷰 템플릿 엔진을 통해 처리되므로 반드시 컨트롤러를 통해 접근해야 한다.

2. BoardController


@RequiredArgsConstructor
@Controller
public class BoardController {
    private final BoardService boardService;
    @GetMapping("/")
    public String list() {
        return "list";
    }
}

@GetMapping("/") : HTTP GET 요청이 / 경로로 들어오면 해당 메서드가 실행되도록 매핑하는 어노테이션

list() : / 경로로 GET 요청이 들어오면 호출되는 메서드

return "list" : 템플릿 파일명을 반환

ViewResolver는 설정된 접두사(src/main/resources/templates/)와 접미사(.mustache)를 결합하여 해당 템플릿 파일을 찾고, 이를 렌더링하여 클라이언트에 반환한다.

3. application.properties


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

server.servlet.encoding.charset=utf-8 : 요청과 응답의 문자 인코딩을 UTF-8로 설정

server.servlet.encoding.force=true : 기본 인코딩을 강제로 UTF-8로 설정

[스프링 부트] 10. 뷰 구현

1. Mustache

2. BoardController

3. application.properties

4. 출력 확인

More articles

[스프링 부트] 12. 뷰 렌더링

[스프링 부트] 11. Repository 구현 및 테스트

[스프링 부트] 9. 더미데이터 생성

[스프링 부트] 8. 테이블 생성