검색결과 리스트
글
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 5
인프런 강의 44일차.
- 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 1 (김영한 강사님)
- 1편에서 배운 MVC를 활용할 수 있는 기술 습득
- 타입 컨버터, 파일 업로드, 활용, 쿠키, 세션, 필터, 인터셉터, 예외 처리, 타임리프, 메시지, 국제화, 검증 등등
2. 타임리프 - 스프링 통합과 폼
2.1 프로젝트 설정
- MVC1 편에서 개발한 상품 관리 프로젝트를 약간 다듬어서 form-start 라는 프로젝트로 변환.
-샘플소스의 form-start 의 프로젝트를 form 로 변경 후 import
2.2 타임리프 스프링 통합
- 타임리프는 크게 2가지 메뉴얼을 제공한다.
- 기본 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
- 스프링 통합 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html
* 스프링 통합으로 추가되는 기능들
- 스프링의 SpringEL 문법 통합
- ${@myBean.doSomething()} 처럼 스프링 빈 호출 지원
- 편리한 폼 관리를 위한 추가 속성
> th:object (기능 강화, 폼 커맨드 객체 선택)
> th:field , th:errors , th:errorclass
- 폼 컴포넌트 기능
> checkbox, radio button, List 등을 편리하게 사용할 수 있는 기능 지원
- 스프링의 메시지, 국제화 기능의 편리한 통합
- 스프링의 검증, 오류 처리 통합
- 스프링의 변환 서비스 통합(ConversionService)
* 설정 방법
- 타임리프 템플릿 엔진을 스프링 빈에 등록하고, 타임리프용 뷰 리졸버를 스프링 빈으로 등록하는 방법
- https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#the-springstandarddialect
- https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#views-and-viewresolvers
- 스프링 부트는 이런 부분을 모두 자동화 해준다. build.gradle 에 다음 한줄을 넣어주면 Gradle은 타임리프와 관련된 라이브러리를 다운로드 받고, 스프링 부트는 앞서 설명한 타임리프와 관련된 설정용 스프링 빈을 자동으로 등록해준다.
> implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
2.2 입력 폼 처리
- 타임리프가 제공하는 입력 폼 기능을 적용해서 기존 프로젝트 폼 코드를 개선해보자.
- th:object : 커맨드 객체를 지정한다.
- *{...} : 선택 변수 식이라고 한다.th:object 에서 선택한 객체에 접근한다.
- th:field
> HTML 태그의 id , name , value 속성을 자동으로 처리해준다
* 렌더링 전 / 후 소스
<!-- 렌더링 전 -->
<input type="text" th:field="*{itemName}" />
<!-- 렌더링 후 -->
<input type="text" id="itemName" name="itemName" th:value="*{itemName}" />
* 등록 폼
- th:object 를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다. 등록 폼이기 때문에 데이터가 비어있는 빈 오브젝트를 만들어서 뷰에 전달하자
@GetMapping("/add")
public String addForm(Model model) {
model.addAttribute("item", new Item()); //타임리프 사용을 위해 빈 껍데기 Item 객체를 생성해서 addForm 으로 넘김
return "form/addForm";
}- hello.itemservice.web.form.FormItemController.java
- 상품 등록하는 addForm method 변경
<div class="py-5 text-center">
<h2>상품 등록 폼</h2>
</div>
<!-- 빈 껍데기 Item 객체를 th:object로 받아와서 사용 -->
<form action="item.html" th:action th:object="${item}" th:action method="post">
<div>
<label for="itemName">상품명</label>
<!--
th:field="${item.itemName}" 사용 시 id="itemName' name="itemName" value="itemName 값" 속성을 자동으로 만들어준다.
만약 form 에 th:action 속성이 있는 경우 th:field="*{itemName}" 으로 줄여서 사용이 가능하다. ( *의 의미는 th:object에 소속된 값이라는 것)
<input type="text" id="itemName" name="itemName" class="form-control" placeholder="이름을 입력하세요"> //최초 HTML
<input type="text" th:field="${item.itemName}" class="form-control" placeholder="이름을 입력하세요"> //id, name 속성을 th:field로 변환
-->
<input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요"> <!-- th:field를 사용했음에도 id를 사용한 이유는 label for가 id를 기준으로 찾기때문 -->
</div>
<div>
<label for="price">가격</label>
<!--<input type="text" id="price" name="price" class="form-control" placeholder="가격을 입력하세요">-->
<input type="text" id="price" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
</div>
<div>
<label for="quantity">수량</label>
<!--<input type="text" id="quantity" name="quantity" class="form-control" placeholder="수량을 입력하세요">-->
<input type="text" id="quantity" th:field="*{quantity}" class="form-control" placeholder="수량을 입력하세요">
</div>- resources/templates/form/addForm.html
- 타임리프를 사용한 등록 form HTML
@GetMapping("/{itemId}/edit")
public String editForm(@PathVariable Long itemId, Model model) {
Item item = itemRepository.findById(itemId);
model.addAttribute("item", item);
return "form/editForm";
}- hello.itemservice.web.form.FormItemController.java
- 상품 수정하는 editForm method
<div>
<label for="id">상품 ID</label>
<!-- th:field를 사용함으로써 id, name, value 속성을 한번에 설정 가능하다 -->
<!--<input type="text" id="id" name="id" class="form-control" value="1" th:value="${item.id}" readonly>-->
<input type="text" th:field="*{id}" class="form-control" value="1" readonly>
</div>
<div>
<label for="itemName">상품명</label>
<!--<input type="text" id="itemName" name="itemName" class="form-control" value="상품A" th:value="${item.itemName}">-->
<input type="text" th:field="*{itemName}" class="form-control" value="상품A" >
</div>
<div>
<label for="price">가격</label>
<!--<input type="text" id="price" name="price" class="form-control" value="10000" th:value="${item.price}">-->
<input type="text" th:field="*{price}" class="form-control" value="10000" ">
</div>
<div>
<label for="quantity">수량</label>
<!--<input type="text" id="quantity" name="quantity" class="form-control" value="10" th:value="${item.quantity}">-->
<input type="text" th:field="*{quantity}" class="form-control" value="10" >
</div>- resources/templates/form/editForm.html
- 타임리프를 사용한 수정 form HTML
- 수정 폼의 경우 id , name , value 를 모두 신경써야 했는데, th:field 덕분에 자동으로 속성이 부여되는 것을 확인할 수 있다
* 정리
- th:object , th:field 덕분에 폼을 개발할 때 약간의 편리함을 얻었다. 좀더 강력한 기능은 추후에 설명할 검증(Validation)에서 나타난다.
2.3 요구사항 추가
- 타임리프를 사용해서 폼에서 체크박스, 라디오 버튼, 셀렉트 박스를 편리하게 사용하는 방법을 학습해보자.
- 기존 상품 서비스에 다음 요구사항이 추가되었다.
- 판매 여부
> 판매 오픈 여부
> 체크 박스로 선택할 수 있다.
- 등록 지역
> 서울, 부산, 제주
> 체크 박스로 다중 선택할 수 있다.
- 상품 종류
> 도서, 식품, 기타
> 라디오 버튼으로 하나만 선택할 수 있다.
- 배송 방식
> 빠른 배송
> 일반 배송
> 느린 배송
> 셀렉트 박스로 하나만 선택할 수 있다.
package hello.itemservice.domain.item;
public enum ItemType {
BOOK("도서"), FOOD("음식"), ETC("기타");
private final String description;
ItemType(String description) {
this.description = description;
}
}
- hello.itemservice.domain.item.ItemType.java
- 상품 종류는 ENUM을 사용한다. 설명을 위해 description필드를 추가했다.
package hello.itemservice.domain.item;
import lombok.AllArgsConstructor;
import lombok.Data;
/**
* FAST : 빠른 배송
* NORMAL : 일반 배송
* SLOW : 느린 배송
*/
@Data
@AllArgsConstructor
public class DeliveryCode {
private String code;
private String displayName;
}
- hello.itemservice.domain.item.DeliveryCode.java
- 배송 방식은 DeliveryCode 라는 클래스를 사용한다.
- code 는 FAST 같은 시스템에서 전달하는 값이고, displayName 은 빠른 배송 같은 고객에게 보여주는 값이다.
package hello.itemservice.domain.item;
import lombok.Data;
import java.util.List;
@Data
public class Item {
private Long id;
private String itemName;
private Integer price;
private Integer quantity;
private Boolean open; //판매여부
private List<String> regions; //등록지역
private ItemType itemType; //상품 종류
private String deliveryCode; //배송 방식
public Item() {
}
public Item(String itemName, Integer price, Integer quantity) {
this.itemName = itemName;
this.price = price;
this.quantity = quantity;
}
}
- hello.itemservice.domain.item.Item.java
- ENUM , 클래스, String 같은 다양한 상황에 어떻게 폼의 데이터를 받을 수 있는지 하나씩 알아보자.
2.4 체크 박스 - 단일1
- 순수 HTML 체크 박스
<hr class="my-4">
<!-- 2.4 체크박스 단일 1 -->
<div>판매 여부</div>
<div>
<div class="form-check">
<input type="checkbox" id="open" name="open" class="form-check-input">
<label for="open" class="form-check-label">판매 오픈</label>
</div>
</div>- resources/templates/form/addForm.html
- 타임리프를 사용한 등록 form에 순수 HTML 체크박스 코드 추가
@PostMapping("/add")
public String addItem(@ModelAttribute Item item, RedirectAttributes redirectAttributes) {
log.info("item.open={}", item.getOpen()); //판매오픈 체크박스 값 확인
Item savedItem = itemRepository.save(item);
redirectAttributes.addAttribute("itemId", savedItem.getId());
redirectAttributes.addAttribute("status", true);
return "redirect:/form/items/{itemId}";
}- hello.itemservice.web.form.FormItemController.java
- 상품 추가하는 addItem method에 HTML 체크박스 값이 넘어왔는지 확인하기 위한 log 추가
* 실행 로그
- FormItemController : item.open=true //체크 박스를 선택하는 경우
- FormItemController : item.open=null //체크 박스를 선택하지 않는 경우
- 체크 박스를 체크하면 HTML Form에서 open=on 이라는 값이 넘어간다.
> 스프링은 on 이라는 문자를 true 타입으로 변환해준다. (스프링 타입 컨버터가 이 기능을 수행하는데, 뒤에서 설명한다)
- 체크 박스를 선택하지 않고 폼을 전송하면 open 이라는 필드 자체가 서버로 전송되지 않는다!!!
* HTTP 요청 메시지 로깅
- HTTP 요청 메시지를 서버에서 보고 싶으면 다음 설정을 추가하면 된다.
logging.level.org.apache.coyote.http11=debug
- resources/application.properties
* 로그 추가 후 실행 결과
- itemName=itemA&price=10000&quantity=10
- HTTP 메시지 바디를 보면 open 의 이름도 전송이 되지 않는 것을 확인할 수 있다.
- 서버에서 Boolean 타입을 찍어보면 결과가 null 인 것을 확인할 수 있다.
- HTML checkbox는 선택이 안되면 클라이언트에서 서버로 값 자체를 보내지 않는다.
> 수정의 경우에는 상황에 따라서 이 방식이 문제가 될 수 있다.
> 사용자가 의도적으로 체크되어 있던 값을 체크를 해제해도 저장시 아무 값도 넘어가지 않기 때문에, 서버 구현에 따라서 값이 오지 않은 것으로 판단해서 값을 변경하지 않을 수도 있다.
> 이런 문제를 해결하기 위해서 스프링 MVC는 약간의 트릭을 사용하는데, 히든 필드를 하나 만들어서, _open 처럼 기존 체크 박스 이름 앞에 언더스코어( _ )를 붙여서 전송하면 체크를 해제했다고 인식할 수 있다.
> 히든 필드는 항상 전송된다. 따라서 체크를 해제한 경우 여기에서 open 은 전송되지 않고, _open 만 전송되는데, 이 경우 스프링 MVC는 체크를 해제했다고 판단한다.
* 체크 해제를 인식하기 위한 히든 필드
<!-- 2.4 체크박스 단일 1 -->
<div>판매 여부</div>
<div>
<div class="form-check">
<input type="checkbox" id="open" name="open" class="form-check-input">
<input type="hidden" name="_open" value="on"/> <!-- 기존 form에 체크박스 값 검증용 히든 필드 추가 -->
<label for="open" class="form-check-label">판매 오픈</label>
</div>
</div>- resources/templates/form/addForm.html
- 타임리프를 사용한 등록 form에 순수 HTML 체크박스 히든 코드 추가
* 실행 로그
- FormItemController : item.open=true //체크 박스를 선택하는 경우
- FormItemController : item.open=false //체크 박스를 선택하지 않는 경우
* 체크 박스 체크
- open=on&_open=on
- 체크 박스를 체크하면 스프링 MVC가 open 에 값이 있는 것을 확인하고 사용한다. 이때 _open 은 무시한다
* 체크 박스 미체크
- _open=on
- 체크 박스를 체크하지 않으면 스프링 MVC가 _open 만 있는 것을 확인하고, open 의 값이 체크되지 않았다고 인식한다.
- 이 경우 서버에서 Boolean 타입을 찍어보면 결과가 null 이 아니라 false 인 것을 확인할 수 있다.
2.5 체크 박스 - 단일2
- 타임리프 기능 사용
- 개발할 때 마다 히든 필드를 추가하는 것은 상당히 번거로우니 타임리프가 제공하는 기능을 통해 자동으로 처리한다.
<!-- 2.5 체크박스 단일 2 (타임리프 사용) -->
<div>판매 여부</div>
<div>
<div class="form-check">
<input type="checkbox" id="open" th:field="*{open}" class="form-checkinput">
<label for="open" class="form-check-label">판매 오픈</label>
</div>
</div>- resources/templates/form/addForm.html
- 타임리프를 사용한 등록 form에 타임리프가 제공하는 체크 박스 코드 추가
* 렌더링 후 결과 HTML
<div class="form-check">
<input type="checkbox" id="open" class="form-check-input" name="open"
value="true">
<input type="hidden" name="_open" value="on"/>
<label for="open" class="form-check-label">판매 오픈</label>
</div>- 타임리프를 사용하면 체크 박스의 히든 필드와 관련된 부분도 자동으로 해결해준다.
* 실행 로그
- FormItemController : item.open=true //체크 박스를 선택하는 경우
- FormItemController : item.open=false //체크 박스를 선택하지 않는 경우
* 상품 상세 HTML에도 적용해보자
<hr class="my-4">
<!-- 2.5 체크박스 단일 2 (타임리프 사용) -->
<div>판매 여부</div>
<div>
<div class="form-check">
<input type="checkbox" id="open" th:field="${item.open}" class="formcheck-input" disabled> <!-- th:object를 사용하지 않기 때문에 *를 사용해서는 안된다. -->
<label for="open" class="form-check-label">판매 오픈</label>
</div>
</div>- resources/templates/form/item.html
- 상품 상세 HTML에 타임리프를 사용한 단일 체크박스 소스 적용
- disabled 를 사용해서 상품 상세에서는 체크 박스가 선택되지 않도록 했다
* 렌더링 후 결과 HTML
<hr class="my-4">
<!-- 2.5 체크박스 단일 2 (타임리프 사용) HTML 생성 결과 -->
<div class="form-check">
<input type="checkbox" id="open" class="form-check-input" disabled
name="open" value="true"
checked="checked">
<label for="open" class="form-check-label">판매 오픈</label>
</div>
* 타임리프의 체크 확인
- checked="checked" : 체크 박스에서 판매 여부를 선택해서 저장하면, 조회시에 checked 속성이 추가된다.
- 개발자가 직접 처리하려면 상당히 번거로운데, 타임리프의 th:field 를 사용하면, 값이 true 인 경우 자동으로 체크해준다.
* 상품 수정 HTML에도 적용해보자
<hr class="my-4">
<!-- 2.5 체크박스 단일 2 (타임리프 사용) -->
<div>판매 여부</div>
<div>
<div class="form-check">
<input type="checkbox" id="open" th:field="*{open}" class="form-check-input">
<label for="open" class="form-check-label">판매 오픈</label>
</div>
</div>- resources/templates/form/editForm.html
- 상품 수정 HTML에 타임리프를 사용한 단일 체크박스 소스 적용
public void update(Long itemId, Item updateParam) {
Item findItem = findById(itemId);
findItem.setItemName(updateParam.getItemName());
findItem.setPrice(updateParam.getPrice());
findItem.setQuantity(updateParam.getQuantity());
findItem.setOpen(updateParam.getOpen());
findItem.setRegions(updateParam.getRegions());
findItem.setItemType(updateParam.getItemType());
findItem.setDeliveryCode(updateParam.getDeliveryCode());
}- hello.itemservice.domain.item.ItemRepository.java
- 타임리프 체크박스 적용을 위한 update 메소드 수정
- open 이외에 나머지 필드도 업데이트 되도록 미리 넣어두자.
2.6 체크 박스 - 멀티
- 체크 박스를 멀티로 사용해서, 하나 이상을 체크할 수 있도록 해보자.
- 등록 지역
> 서울, 부산, 제주
> 체크 박스로 다중 선택할 수 있다.
@ModelAttribute("regions")
public Map<String, String> regions() {
//변수로 ModelAttribute가 호출될 시 자동으로 regions 변수가 선언되어 전달된다.
Map<String, String> regions = new LinkedHashMap<>(); //put하는 데이터의 순서 보장을 위해 linkedHashMap을 사용함.
regions.put("SEOUL", "서울");
regions.put("BUSAN", "부산");
regions.put("JEJU", "제주");
return regions;
}- hello.itemservice.web.form.FormItemController.java
- 등록지역 처리 메소드 추가
* @ModelAttribute의 특별한 사용법
- 등록 폼, 상세화면, 수정 폼에서 모두 서울, 부산, 제주라는 체크 박스를 반복해서 보여주어야 한다.
- 이렇게 하려면 각각의 컨트롤러에서 model.addAttribute(...) 을 사용해서 체크 박스를 구성하는 데이터를 반복해서 넣어주어야 한다.
- @ModelAttribute 는 이렇게 컨트롤러에 있는 별도의 메서드에 적용할 수 있다.
- 해당 컨트롤러를 요청할 때 regions 에서 반환한 값이 자동으로 모델( model )에 담기게 된다.
- 물론 이렇게 사용하지 않고, 각각의 컨트롤러 메서드에서 모델에 직접 데이터를 담아서 처리해도 된다.
<!-- 2.6 체크 박스 - 멀티 -->
<div>
<div>등록 지역</div>
<div th:each="region : ${regions}" class="form-check form-check-inline">
<input type="checkbox" th:field="*{regions}" th:value="${region.key}"
class="form-check-input">
<!--
멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다. 그런데 문제는 이렇게 반복해서 HTML 태그를
생성할 때, 생성된 HTML 태그 속성에서 name 은 같아도 되지만, id 는 모두 달라야 한다. 따라서
타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 th:for="${#ids.prev('regions')}"를 사용해 1 , 2 , 3 숫자를 뒤에 붙여준다
-->
<label th:for="${#ids.prev('regions')}" th:text="${region.value}" class="form-check-label">서울</label>
</div>
</div>- resources/templates/form/addForm.html
- 멀티 체크박스를 구현한 등록 form HTML
* each로 체크박스가 반복 생성된 렌더링 결과 HTML
<input type="checkbox" value="SEOUL" class="form-check-input" id="regions1" name="regions">
<input type="checkbox" value="BUSAN" class="form-check-input" id="regions2" name="regions">
<input type="checkbox" value="JEJU" class="form-check-input" id="regions3" name="regions">- id 뒤에 숫자가 추가됨.
- HTML의 id 가 타임리프에 의해 동적으로 만들어지기 때문에 으로 label 의 대상이 되는 id 값을 임의로 지정하는 것은 곤란하다.
- 타임리프는 ids.prev(...) , ids.next(...) 을 제공해서 동적으로 생성되는 id 값을 사용할 수 있도록 한다.
* 렌더링 후 결과 HTML
<!-- 2.6 체크 박스 - 멀티 렌더링 결과 HTML -->
<div>
<div>등록 지역</div>
<div class="form-check form-check-inline">
<input type="checkbox" value="SEOUL" class="form-check-input" id="regions1" name="regions">
<input type="hidden" name="_regions" value="on"/>
<label for="regions1" class="form-check-label">서울</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" value="BUSAN" class="form-check-input" id="regions2" name="regions">
<input type="hidden" name="_regions" value="on"/>
<label for="regions2" class="form-check-label">부산</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" value="JEJU" class="form-check-input" id="regions3" name="regions">
<input type="hidden" name="_regions" value="on"/>
<label for="regions3" class="form-check-label">제주</label>
</div>
</div>- label에 지정된 id 가 checkbox 에서 동적으로 생성된 regions1 , regions2 , regions3 에 맞추어 순서대로 입력되었음.
* 로그 출력
@PostMapping("/add")
public String addItem(@ModelAttribute Item item, RedirectAttributes redirectAttributes) {
log.info("item.open={}", item.getOpen()); //판매오픈 체크박스 값 확인
log.info("item.regions={}", item.getRegions()); //등록 지역 로그 추가
Item savedItem = itemRepository.save(item);
redirectAttributes.addAttribute("itemId", savedItem.getId());
redirectAttributes.addAttribute("status", true);
return "redirect:/form/items/{itemId}";
}- hello.itemservice.web.form.FormItemController.java
- addItem에 regions 확인하는 로그 추가
* 서울, 부산 체크했을 경우
- 파라미터 값 : regions=SEOUL&_regions=on®ions=BUSAN&_regions=on&_regions=on
- 로그 : item.regions=[SEOUL, BUSAN]
* 지역 선택하지 않았을 경우
- 파라미터 값 : _regions=on&_regions=on&_regions=on
- 로그 : : item.regions=[]
* 참고
- 체크를 하나도 하지 않았을 때 _regions 조차 보내지 않으면 결과는 null 이 된다.
- _regions 가 체크박스 숫자만큼 생성될 필요는 없지만, 타임리프가 생성되는 옵션 수 만큼 생성해서 그런 것이니 무시
<!-- 2.6 체크 박스 - 멀티 -->
<div>
<div>등록 지역</div>
<div th:each="region : ${regions}" class="form-check form-check-inline">
<input type="checkbox" th:field="${item.regions}" th:value="${region.key}" class="form-check-input" disabled>
<label th:for="${#ids.prev('regions')}" th:text="${region.value}" class="form-check-label">서울</label>
</div>
</div>- resources/templates/form/item.html
- 상품 상세 form에 멀티 체크박스 추가
* 타임리프의 체크 확인
- 타임리프는 th:field 에 지정한 값과 th:value 의 값을 비교해서 자동으로 checked 처리해준다
<!-- 2.6 체크 박스 - 멀티 -->
<div>
<div>등록 지역</div>
<div th:each="region : ${regions}" class="form-check form-check-inline">
<input type="checkbox" th:field="${item.regions}" th:value="${region.key}" class="form-check-input">
<label th:for="${#ids.prev('regions')}" th:text="${region.value}" class="form-check-label">서울</label>
</div>
</div>- resources/templates/form/editForm.html
- 상품 수정 form에 멀티 체크박스 추가
'Spring 정리' 카테고리의 다른 글
| 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 7 (0) | 2022.06.12 |
|---|---|
| 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 6 (0) | 2022.06.12 |
| 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 4 (0) | 2022.06.03 |
| 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 3 (0) | 2022.06.03 |
| 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 2 (0) | 2022.05.31 |
