컨트롤러 메서드 구현
사용자에게 뷰를 보여주기 위한 뷰 컨트롤러를 구현한다.
뷰 컨트롤러 메소드는 뷰의 이름을 반환하고, 모델 객체에 값을 담는다.
// dto - ArticleListViewResponse.java
@Getter
public class ArticleListViewResponse {
private final Long id;
private final String title;
private final String content;
public ArticleListViewResponse(Article article) {
this.id = article.getId();
this.title = article.getTitle();
this.content = article.getContent();
}
}- 뷰에게 데이터를 전달하기 위한 DTO 생성
// controller - BlogviewController.java
@RequiredArgsConstructor
@Controller // 뷰를 반환.
public class BlogViewController {
private final BlogService blogService;
@GetMapping("/articles")
public String getArticles(Model model) {
List<ArticleListViewResponse> articles = blogService.findAll()
.stream()
.map(ArticleListViewResponse::new)
.toList();
model.addAttribute("articles", articles);
return "articleList";
}
}-
addAttribute()
모델에 "articles" 키에 블로그 글들의 리스트를 저장한다. -
return "articleList";
resource/templates/articleList.html을 찾도록 뷰의 이름을 리턴해준다.
- @Controller vs @RestController
Spring MVC의 컨트롤러인 @Controller는 주로 View를 반환하기 위해 사용하고, 데이터를 반환을 해야할 때는 @ResponseBody를 추가적으로 활용하여 JSON, XML 같은 데이터들을 반환할 수 있도록 하는 것이다. 따라서 이러한 경우에는 @Controller와 @ResponseBody가 합쳐진 형태인 @RestController를 사용하는 것이다.
HTML 뷰 구현
// resources - templates - articleList.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>블로그 글 목록</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
<h1 class="mb-3">My Blog</h1>
<h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
</div>
<div class="container">
<div class="row-6" th:each="item : ${articles}">
<div class="card">
<div class="card-header" th:text="${item.id}">
</div>
<div class="card-body">
<h5 class="card-title" th:text="${item.title}"></h5>
<p class="card-text" th:text="${item.content}"></p>
<a th:href="#" class="btn btn-primary">보러가기</a>
</div>
</div>
<br>
</div>
</div>
</body>
-
link 태그
HTML 문서에서 외부 CSS 파일을 가져와 사용할 때 사용됩니다. 여기서는 Bootstrap의 CSS 파일을 가져와 사용하고 있다. href 속성은 링크할 외부 파일의 경로를 지정한다.rel은 링크된 문서와 현재 문서의 관계를 정의한다. 현재는 stylesheet로, 링크된 문서가 스타일 시트 파일임을 나타내고 있다. 이 속성 값은 외부 CSS 파일을 로드할 때 사용된다.
부트스트랩 : 웹 애플리케이션의 화면을 간편하게 만들 수 있게 해주는 라이브러리이다.
-
class 속성
버튼에 적용할 CSS 클래스를 지정한다.
-
th:each
"articles" 키에 담긴 데이터 개수만큼 반복한다. 클래스를 지정하여 버튼에 스타일을 적용하거나 다른 요소와 그룹화할 수 있거나, 버튼을 시각적으로 꾸밀 수 있다.
-
th:text
반복 대상 객체의 id, "text"를 출력한다.
해당 글은 다음 도서의 내용을 정리하고 참고한 글임을 밝힙니다.
신선영, ⌜스프링 부트 3 벡엔드 개발자 되기 - 자바 편⌟, 골든래빗(주), 2023, 384쪽
IT, 개발 관련 정보들을 기록하는 장소입니다.