코드 그라데이션

셀렉트 박스 - 셀렉트 박스는 여러 선택지 중에 하나를 선택할 때 사용할 수 있다. - 이번시간에는 셀렉트 박스를 자바 객체를 활용해서 개발한다. 배송 방식 빠른 배송 일반 배송 느린 배송 셀렉트 박스로 하나만 선택할 수 있다. FormItemController 에 코드 추가 /** * 모델에 배송 코드 목록을 추가하는 메서드. * * @return 배송 코드 목록을 포함하는 List */ @ModelAttribute("deliveryCodes") public List deliveryCodes() { // 배송 코드 목록을 생성. List deliveryCodes = new ArrayList(); deliveryCodes.add(new DeliveryCode("FAST", "빠른 배송")); delive..

라디오 버튼 라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다. 라디오 버튼을 자바 ENUM을 활용해서 개발한다. 상품 종류 도서, 식품, 기타 라디오 버튼으로 하나만 선택할 수 있다. FormItemController - 추가 // @ModelAttribute 어노테이션이 적용된 메서드 // 이 메서드는 "itemTypes"라는 이름으로 모델에 데이터를 추가한다. @ModelAttribute("itemTypes") public ItemType[] itemTypes() { // ItemType 열거형(enum)의 모든 값을 배열로 반환. // ItemType.values() 메서드는 enum에서 정의한 모든 열거 상수를 배열로 제공. return ItemType.values(); } it..

체크 박스 - 멀티 체크 박스를 멀티로 사용해서, 하나 이상을 체크할 수 있도록. 등록 지역 서울, 부산, 제주 체크 박스로 다중 선택할 수 있다. 등록 폼 수정 @GetMapping("/add") public String addForm(Model model) { model.addAttribute("item", new Item()); Map regions = new LinkedHashMap(); // HashMap 쓰면 순서가 보장x regions.put("SEOUL", "서울"); regions.put("BUSAN", "부산"); regions.put("JEJU", "제주"); model.addAttribute("regions", regions); return "form/addForm"; } Map r..

체크 박스 - 단일 02 타임리프 개발할 때 마다 이렇게 히든 필드를 추가하는 것은 상당히 번거롭다. 타임리프가 제공하는 폼 기능을 사용하면 이런 부분을 자동으로 처리할 수 있다. 체크 박스 코드 추가 addForm.html 판매 여부 판매 오픈 이렇게 쓰거나 판매 여부 판매 오픈 이렇게 쓴다. 실행해서 페이지 소스 보기 눌러보면 타임리프 체크 박스 HTML 생성 결과 item.open도 true로 나온다. 반대로 체크 하지 않고 등록해서 확인해보면 item.open = false 나오는 것을 확인할 수 있음. 상품 상세에 적용 item.html 체크하고 등록한 경우 체크 없이 등록한 경우 주의 : item.html 에는 th:object 를 사용하지 않았기 때문에 th:field 부분에 ${item.o..

체크 박스 - 단일1 단순 HTML 체크 박스 resources/templates/form/addForm.html 추가 판매 여부 판매 오픈 resources/templates/form/addForm.html 전체 코드 상품 등록 폼 상품명 가격 수량 판매 여부 판매 오픈 상품 등록 취소 상품이 등록되는 곳에 다음과 같이 로그를 남겨서 값이 잘 넘어오는지 확인 FormItemController 추가 @Slf4j 클래스 레벨에 추가 @GetMapping("/add") public String addForm(@ModelAttribute Item item, Model model) { // 추가 // 로깅 추가 log.info("item.open={}", item.getOpen()); model.addAttri..

요구사항 추가 타임리프를 사용해서 폼에서 체크박스, 라디오 버튼, 셀렉트 박스를 편리하게 사용하는 방법을 학습하기 위한 작업 내용 이미지 예시 ItemType public enum ItemType { BOOK("도서"), FOOD("음식"), ETC("기타"); private final String description; // 설명 ItemType(String description) { // 생성자 this.description = description; } public String getDescription() { return description; } } DeliveryCode /** * FAST : 빠른 배송 * NORMAL : 일반 배송 * SLOW : 느린 배송 */ @Data @AllArgsC..

입력 폼 처리 지금부터 타임리프가 제공하는 입력 폼 기능을 적용해서 기존 프로젝트의 폼 코드를 타임리프가 지원하는 기능을 사용해서 효율적으로 개선해 나간다. 먼저, 미리 핵심요약 1. 2. 등록 폼 th:object 를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다. 등록 폼이기 때문에 데이터가 비어있는 빈 오브젝트를 만들어서 뷰에 전달한다. FormItemController 변경 @GetMapping("/add") public String addForm(Model model) { model.addAttribute("item", new Item()); return "form/addForm"; } form/addForm.html 변경 부분 그림으로 먼저 설명 addForm.html(전체) 상품 등록..

재구조화 실시 클래스 Item.java @Data @NoArgsConstructor public class Item { private Long id; private String itemName; private Integer price; private Integer quantity; public Item(String itemName, Integer price, Integer quantity) { this.itemName = itemName; this.price = price; this.quantity = quantity; } } ItemRepository.java @Repository // 인터페이스가 아니므로 붙인 듯. 안에 @Component 있음 public class ItemRepository { ..

타임리프 스프링 통합 타임리프는 크게 2가지 메뉴얼을 제공한다. 기본 메뉴얼 : https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html Tutorial: Using Thymeleaf 1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a www.th..

템플릿 레이아웃 02 템플릿 레이아웃 확장 01에서 정리한 개념을 레이아웃 H1 레이아웃 컨텐츠 레이아웃 푸터 /resources/templates/template/layoutExtend/layoutExtendMain.html 메인 페이지 컨텐츠 메인 페이지 포함 내용 실행 결과