개발자되기 프로젝트

1. single checkbox addform.html에 추가 일단 순수 html로 작성. check box의 경우 name이 open이다. ->Item의 Boolean open에 참/거짓 값을 넘겨줌. 판매 여부 판매 오픈 controller에서 open 값이 잘 넘어오는지 확인하기 위해 log를 추가. @PostMapping("/add") public String addItem(@ModelAttribute Item item, RedirectAttributes redirectAttributes) { log.info("item.open={}", item.getOpen()); Item savedItem = itemRepository.save(item); redirectAttributes.addAttrib..

1. 요구사항 추가 판매 여부 판매 오픈 여부 체크 박스로 선택할 수 있다. 등록 지역 서울, 부산, 제주 체크 박스로 다중 선택할 수 있다. 상품 종류 도서, 식품, 기타 라디오 버튼으로 하나만 선택할 수 있다. 배송 방식 빠른 배송 일반 배송 느린 배송 셀렉트 박스로 하나만 선택할 수 있다. 예시 2. ItemType 상품 type을 enum으로 설명을 위해 description 추가함. public enum ItemType { BOOK("도서"), FOOD("음식"), ETC("기타"); private final String description; ItemType(String description) { this.description = description; } } 3. Delivery code /..

1. 입력 form 처리 th:object : 커맨드 객체를 지정한다. Controller에서 넘어오는 Model에 담긴 객체를 지정.(빈 객체도 가능) th:object를 사용하면 좋은 점이 뭘까? id와 name을 직접 입력해 주는데, 빈 객체를 model로 넘기고 th:object로 사용하면 객체의 필드명을 사용가능. 오류 가능성을 줄일 수 있음. form submit을 할 때, form의 데이터가 th:object에 설정해준 이름으로 객체가 넘어감. ex) th:object="${item}" --> controller에서 @ModelAttribute("item")으로 객체를 받을 수 있음. 이 때 필드명이 같으면 다른 객체에 매핑이 가능. -> @ModelAttribute("item") ItemS..

1. Thymeleaf 매뉴얼 기본 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 스프링 통합 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html 2. Spring 통합으로 추가되는 기능 스프링의 SpringEL 문법 통합 SpringEL 표현식 ~~.username : 프로퍼티 접근 -> user.getUsername() ~~['username'] -> user.getUsername() ~~.getUsername() -> -> getUsername() 직접 호출. ${@myBean.doSomething()} 처럼 스프링 빈 호출 지원 편리한 폼 관리를 위..

template layout 개념을 레이아웃 H1 레이아웃 컨텐츠 레이아웃 푸터 2. layoutExtendMain html 자체를 th:replace함. 뭐로? 위의 layoutFile로. 이 때 title, section 태그를 넘겨줌. 메인 페이지 컨텐츠 메인 페이지 포함 내용 3. 결과 레이아웃 H1 메인 페이지 컨텐츠 메인 페이지 포함 내용 레이아웃 푸터 4. GitHub : 210919 layout 2 GitHub - bsh6463/Thymeleaf Contribute to bsh6463/Thymeleaf development by creating an account on GitHub. github.com

fragment는 코드 조각을 가지고 와서 사용했다. 이번에는 코드 조각을 layout에 넘겨서 사용해보자. 예를 들어서 메인 컨텐츠 3. base.html layoutMain에서 title 태그와 link태그가 넘어온다. 레이아웃 타이틀로 넘어온 title 태그로 replace. link의 경우 th:block으로 지정했다. 넘어온 link tag를 가지고 th:block을 대체한다. 4. 결과 메인 컨텐츠 5. GitHub : 210919 layout 1 GitHub - bsh6463/Thymeleaf Contribute to bsh6463/Thymeleaf development by creating an account on GitHub. github.com

웹 페이지를 개발할 때는 공통 영역이 많음 예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들이 있다. 이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적이다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다. 주의! 템플릿 조각과 레이아웃 부분은 직접 실행해보아야 이해된다. 1. footer.html th:fragment="name"을통해 name 지정 가능. 푸터 자리 입니다. 파라미터 자리 입니다. 2. fragment.html fragment insert 하는 방법(html 추가) insert 지정한 에 끼워넣기 th:insert="~{경로 :: 이름}" th:insert="~{..

1. JAVA Script Inline Thymeleaf는 Javascript에서 Thymeleaf를 편리하게 사용할 수 있도록 해당 기능을 제공 4. javascript inline 적용 전 text var username = [[${user.username}]];​ text의 경우 "[[${user.username}]]"로 JavaScript에 전달되어야 함.. 랜더링 후 : 흠.."UserA"로 넘어가지 않아서 에러.. var username = UserA; Javascript natural template //자바스크립트 내추럴 템플릿 var username2 = /*[[${user.username}]]*/ "test username"; 자바스크립트는 "test username" 부분을 랜더링 후..