Thymeleaf14 [Thymeleaf] 라디오 버튼, 셀렉트 박스 라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다. 1. EnumType을 활용한 라디오 버튼 public enum ItemType { BOOK("도서"), FODD("음식"), ETC("기타"); private final String description; ItemType(String description) { this.description = description; } public String getDescription() { return description; } } //Controller @ModelAttribute("itemTypes") public ItemType[] itemTypes() { return ItemType.values(); } ItemType.values()를 사.. 2022. 1. 28. [Thymeleaf] 체크박스 1. 단일 체크 박스 (1) 순수 HTML 체크 박스 판매 오픈 //Controller 로깅 FormItemController : item.open=true //체크 박스를 선택하는 경우 FormItemController : item.open=null //체크 박스를 선택하지 않는 경우 체크 박스를 체크하면 HTML Form에서 open=on 이라는 값이 넘어간다. (브라우저에서 확인 가능) 스프링은 on이라는 문제를 true 타입으로 변환해준다. 스프링 타입 컨버터가 이 기능을 수행 * 주의 HTML에서 체크 박스를 선택하지 않고 폼을 전송하면 open이라는 필드 자체가 서버로 전송되지 않는다. Controller에서 로그를 찍어보면 체크를 하지 않았을 때 null로 값이 넘어간다. 수정의 경우에는 상.. 2022. 1. 28. [Thymeleaf] 입력 Form 처리 타임리프가 제공하는 입력 폼 기능들을 알아보자 1. th:object 커맨드 객체를 지정한다. 2. *{...} (선택 변수 식) th:object에서 선택한 객체에 접근한다. 3. th:field HTML 태그의 id, name, value 속성을 자동으로 처리해준다. (렌더링 전) (렌더링 후) Example th:object를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다. 등록 폼이기 때문에 Controller에서 데이터가 비어있는 빈 오브젝트를 만들어서 View로 전달한다. //Controller model.addAttribute("items", items); 상품명 가격 수량 th:obejct="${item}" 태그에서 사용할 객체를 지정한다. 태그 안에서 선택 변수 식 *{...}을 .. 2022. 1. 26. [Thymeleaf] 템플릿 조각, 레이아웃 웹 페이지를 개발할 때 공통 영역이 많이 있다. 이런 부분을 코드를 복사해서 사용한다면 변경 시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적이다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다. 1. 템플릿 조각 템플릿 조각은 일부 코드 조각을 가지고 와서 사용한다. th:fragment 다른 곳에 포함되는 코드 조각이다. 푸터 자리 입니다. 파라미터 자리 입니다. (1) 부분 포함 insert th:insert를 사용하면 현재 태크 div 내부에 추가한다. 푸터 자리 입니다. template/fragment/footer :: copy => template/fragment/footer.html 템플릿에 있는 th:fragment="copy"라는 부분을 템플릿 조각으로.. 2022. 1. 26. [Thymeleaf] 자바스크립트 인라인 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다. 인라인 사용 전 렌더링 결과를 보면 userA라는 변수 이름이 그대로 남아 있다. 타임리프 입장에서는 정확하게 렌더링 한 것이지만 기대한 값은 "userA"라는 문자이다. 결과적으로 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생한다. 숫자 age의 경우에는 "가 필요 없기 때문에 정상 렌더링 된다. 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 "를 포함해준다. 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리를 해준다. " => \" (2) 자바스크립트 내추럴 템플릿 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다. 주석을 활용해서 이 기능.. 2022. 1. 25. [Thymeleaf] 주석, 블록 (th:block) 1. 주석 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미한다. HTML 주석을 포함해서 타임리프가 제공하는 2가지 주석이 더 있다. Example //Controller model.addAttribute("data", "Spring!"); (1) 표준 HTML 주석 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다. 1. 표준 HTML 주석 브라우저로 확인하면 보이지 않는다. 하지만 소스보기를 통해 주석 처리되었는지 확인할 수 있다. (2) 타임리프 파서 주석 타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링 시에 주석 부분을 제거한다. html data 브라우저로 확인하면 보이지 않는다. 소스보기를 통해 확인하여도 코드 자.. 2022. 1. 25. 이전 1 2 3 다음 반응형
