Controller 생성
# @RequiredArgsConstructor
Lombok 라이브러리의 @RequiredArgsConstructor 어노테이션은 final이 붙은 프로퍼티에 대한 생성자를 만들어준다.
# @Autowired
의존 관계를 주입하는 방법 중 하나이다. ItemRepository인 itemRepository를 생성자를 통해 가져오게 된다. 만약 생성자가 하나라면 @Autowired를 생략 가능하다.
# @PostConstruct
해당 빈의 의존관계가 모두 주입되고 나면 초기화 용도로 호출된다.
String을 반환하여 뷰를 호출하는 @GetMapping 하나를 생성한다. Controller에서 생성한 데이터를 뷰에다가 전달하기 위해 Model 객체를 선언하고, addAttribute 호출하여 Model 객체에 데이터를 담는다.
@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {
private final ItemRepository itemRepository;
// @Autowired
// public BasicItemController(ItemRepository itemRepository) {
// this.itemRepository = itemRepository;
// }
// 아이템 목록을 출력
@GetMapping
public String items(Model model) {
List<Item> items = itemRepository.findAll();
// items라는 String으로 items를 전달
model.addAttribute("items", items);
return "basic/item";
}
// Test용으로 itemRepository에 데이터 추가
@PostConstruct
public void init() {
itemRepository.save(new Item("testA", 10000, 10));
itemRepository.save(new Item("testB", 20000, 20));
}
}
Thymeleaf 사용 변경
basic/items을 반환하기 때문에 사전에 static 디렉터리에 넣어 놓은 정적인 items.html을 templates 디렉터리에 생성해야한다. templates 디렉터리에 저장되는 파일들은 동적으로 구성해줘야 하기 때문에 기존 코드를 수정한다.
Thymeleaf는 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 맡는다. 우리는 templates 디렉터리에 추가한 items 파일에 Thymeleaf 문법을 추가/수정 해줘야 한다.
Thymeleaf 사용 선언 구문이다.
<html xmlns:th="http://www.thymeleaf.org">
th:xxx가 붙은 부분은 서버 사이드에서 렌더링 되고, 기존 것을 대체한다. 만약 th:xxx가 없다면 기존 html의 xxx 속성이 그대로 사용된다.
<meta charset="utf-8">
<link href="../css/bootstrap.min.css"
th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
# 리터럴 대체 문법
다음 코드에는 리터럴 대체 문법인 |...| 가 사용되었다. Thymeleaf에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.
// 사용 전
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
// 사용 후
<span th:text="|Welcome to our application, ${user.name}!|"> <div class="col">
<button class="btn btn-primary float-end"
onclick="location.href='addForm.html'"
th:onclick="|location.href='@{/basic/items/add}'|" type="button">상품 등록</button>
</div>
# @{...} URL 링크
타임리프는 URL 링크를 사용하는 경우 @{...} 를 사용한다. 이것을 URL 링크 표현식이라 한다. URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다.
th:href="@{/css/bootstrap.min.css}"
다음과 같이 URL 경로를 템플릿처럼 편리하게 사용할 수 있다.
<td><a href="item.html" th:href="@{/basic/items/{itemId} (itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
경로 변수 {itemId} 뿐만 아니라 쿼리 파라미터도 생성할 수 있다. 예제는 다음과 같다.
http://localhost:8080/basic/items/1?query=test
-> th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
URL 링크를 리터럴 대체 문법을 통해 간단히 표현할 수 있다.
th:href="@{|/basic/items/${item.id}|}"
# th:each(반복), th:text(내용 변경)
모델의 items를 꺼내서 item에 넣어주는 반복 문법은 th:each를 사용한다.
모델에 포함된 값이나, Thymeleaf 변수로 선언한 값을 조회할 수 있으며, 이때 프로퍼티 접근법을 사용한다.
내용 변경은 th:text 구문을 사용하는데, 다음과 같이 선언될 경우 10000을 ${item.price}로 대체한다는 의미를 갖는다.
<tr th:each="item : ${items}">
<td><a href="item.html" th:href="@{/basic/items/{itemId} (itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
<td><a href="item.html" th:href="@{|/basic/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
<td th:text="${item.price}">10000</td>
<td th:text="${item.quantity}">10</td>
</tr>
'🌱 Spring > MVC ①' 카테고리의 다른 글
| [Spring] 상세, 추가, 수정 (PathVariable, ModelAttribute, Redirect) (0) | 2023.07.31 |
|---|---|
| [Spring] Item 도메인 개발 (0) | 2023.07.27 |
| [Spring] HTTP Message Converter (0) | 2023.07.24 |
| [Spring] HTTP 응답 _ HTTP API, 메시지 바디에 직접 입력 (0) | 2023.07.24 |
| [Spring] HTTP 응답 _ 정적 리소스, 뷰 템플릿 (0) | 2023.07.24 |
