셀렉트 박스 셀렉트 박스는 여러 선택지 중에 하나를 선택할 때 사용할 수 있다. 셀렉트 박스를 자바 객체를 활용해서 개발해보자. 배송 방식 : 빠른 배송 ,일반 배송 ,느린 배송 - 셀렉트 박스로 하나만 선택할 수 있다. 예제 FormItemController - 추가 DeliveryCode 를 등록 폼, 조회, 수정 폼에서 모두 사용하므로 @ModelAttribute 의 특별한 사용법을 적용하자. 📌참고 @ModelAttribute 가 있는 deliveryCodes() 메서드는 컨트롤러가 호출 될 때 마다 사용되므로 deliveryCodes 객체도 계속 생성된다. 이런 부분은 미리 생성해두고 재사용하는 것이 더 효율적이다. addForm.html - 추가 타임리프로 생성된 HTML 인프런 김영한님의 S..
라디오 버튼 라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다. 라디오 버튼을 자바 ENUM을 활용해서 개발해보자 예제 FormItemController - 추가 itemTypes 를 등록 폼, 조회, 수정 폼에서 모두 사용하므로 @ModelAttribute 의 특별한 사용법을 적용하자. ItemType.values() 를 사용하면 해당 ENUM의 모든 정보를 배열로 반환한다. ➜ 예) [BOOK, FOOD, ETC] addForm.html - 추가 실행 결과, 폼 전송 itemType=FOOD //음식 선택, 선택하지 않으면 아무 값도 넘어가지 않는다. 로그 추가 log.info("item.itemType={}", item.getItemType()); 실행 로그 item.itemType..
체크 박스 - 멀티 체크 박스를 멀티로 사용해서, 하나 이상을 체크할 수 있도록 해보자. 등록 지역 : 서울, 부산, 제주 - 체크 박스로 다중 선택할 수 있다. FormItemController - 추가 @ModelAttribute의 특별한 사용법 등록 폼, 상세화면, 수정 폼에서 모두 서울, 부산, 제주라는 체크 박스를 반복해서 보여주어야 한다.이렇게 하려면 각각의 컨트롤러에서 model.addAttribute(...) 을 사용해서 체크 박스를 구성하는 데이터를 반복해넣어주어야 한다. @ModelAttribute 는 이렇게 컨트롤러에 있는 별도의 메서드에 적용할 수 있다. 이렇게하면 해당 컨트롤러를 요청할 때 regions 에서 반환한 값이 자동으로 모델( model )에 담기게 된다. 물론 이렇게 ..
체크 박스 - 단일 1 (단순 HTML체크 박스) addForm.html 추가 FormItemController 상품이 등록되는 곳에 @Slf4j 를 추가해 로그를 남겨서 값이 잘 전달되는지 확인 실행로그 FormItemController : item.open=true //체크 박스를 선택하는 경우 FormItemController : item.open=null //체크 박스를 선택하지 않는 경우 체크 박스를 체크하면 HTML Form에서 open=on 이라는 값이 넘어간다. 스프링은 on 이라는 문자를 true Type으로 변환한다. 📌주의 - 체크 박스를 선택하지 않을 때 HTML에서 체크 박스를 선택하지 않고 폼을 전송하면 open 이라는 필드 자체가 서버로 전송되지 않는다. 이런 문제를 해결하기 ..
요구사항 추가 타임리프를 사용해서 폼에서 체크박스, 라디오 버튼, 셀렉트 박스를 편리하게 사용하는 방법을 학습해보자. 기존 상품 서비스에 다음 요구사항이 추가되었다 ItemType - 상품 종류 상품 종류는 ENUM 을 사용한다. 설명을 위해 description 필드를 추가했다 배송 방식 - DeliveryCode 배송 방식은 DeliveryCode 라는 클래스를 사용한다. code 는 FAST 같은 시스템에서 전달하는 값이고, displayName 은 빠른 배송 같은 고객에게 보여주는 값이다. Item - 상품 ENUM , 클래스, String 같은 다양한 상황을 준비했다. 각각의 상황에 어떻게 폼의 데이터를 전달받을 수있는지 알아보자 인프런 김영한님의 Sping강의 기반으로 공부한 것을 작성한 블로..
📘입력 폼 처리 타임리프가 제공하는 입력 폼 기능을 적용해서, 기존 프로젝트의 폼 코드를 타임리프가 지원하는 기능을 적용해보자. th:object : 커맨드 객체를 지정한다. *{...} : 선택 변수 식이라고 한다. th:object 에서 선택한 객체에 접근한다. th:field : HTML 태그의 id, name , value 속성을 자동으로 처리해준다 렌더링 전 렌더링 후 📖등록 폼 th:object 를 적용하려면 먼저 해당 오브젝트 정보를 전달해야한다. 등록 폼이기 때문에 데이터가 비어있는 빈 오브젝트를 만들어 뷰에 전달해야한다. Controller 변경 ➜ addForm.html 변경 ➜ ✏️th:object="${item}" : : 에서 사용할 객체를 지정한다. 선택 변수 식(*{...})을 ..
타임리프 스프링 통합 타임리프는 크게 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:error..
템플릿 레이아웃 이전에는 일부 코드 조각을 가지고와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용하는 방법에 대해서 알아보자. 예를 들어서 View : layoutMain.html 메인 컨텐츠 렌더링 결과 : view-source:http://localhost:8080/template/layout 메인 컨텐츠 common_header(~{::title},~{::link}) 이 부분이 핵심이다. ➜ ::title 은 현재 페이지의 title 태그들을 전달한다. ➜ ::link 는 현재 페이지의 link 태그들을 전달한다 결과를 보자. 메인 타이틀이 전달한 부분으로 교체되었다. 공통 부분은 그대로 유지되고, 추가 부분에 전달한 들이 포함된 것을 확인할 수 있다. 이 방식은 사..
