tymeleaf
1.thymeleaf - 기본기능
Java 11 설치IDE: IntelliJ 또는 Eclipse 설치스프링 부트 스타터 사이트로 이동해서 스프링 프로젝트 생성https://start.spring.ioProject: Gradle - Groovy Project Language: JavaSpring
2.text, utext
타임리프는 기본적으로 HTML 테그의 속성에 기능을 정의해서 동작한다.HTML의 콘텐츠에 데이터를 출력할 때는 다음과 같이 th:text를 사용한다.<span ht:text="${data}"></span>HTML 테그의 속성이 아니라 HTML 콘텐츠 영역안에
3.변수 - SpringEL
변수 표현식 : ${...}/resources/templates/basic/variable.htmluser.username : user의 username을 프로퍼티 접근 user\['username'] : 위와 같음 user.getUsername() user.getUs
4.기본 객체들
${${${${\`${📍 주의! - 스프링 부트 3.0스프링 부트 3.0 부터는 ${\`\`\`Caused by: java.lang.IllegalArgumentException: The 'request','session','servletContext' and 'res
5.유틸리티 객체와 날짜
타임리프는 문자, 숫자, 날짜, URI등을 편리하게 다루는 다양한 유틸리티 객체들을 제공한다.
6.URL 링크
타임리프에서 URL을 생성할 때는 @{...}문법을 사용하면 된다./resources/template/basic/link.html@{/hello} -> /hello@{/hello(param1=${parma1}, param2=${param2})}\-> /hello?par
7.리터널
리터널은 소스 코드상에 고정된 값을 말하는 용어이다.예를 들어서 다음 코드에서 "Hello"는 문자 리터널, 10,20는 숫자 리터널이다.🤞 참고 )이 내용이 쉬워 보이지만 처음 타임리프를 사용하면 많이 실수하니 잘 알아보자문자 : hello 숫자 : 10불린 : t
8.연산
타임리프 연산은 자바와 크게 다르지 않다.HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의!!/resources/templates/basic/operation.html비교연산 : HTML 엔티티를 사용해야 하는 부분을 주의하자\>(gt), <(
9.속성 값 설정
타임리프는 주로 HTML 태그에 th:\* 속성을 지정하는 방식으로 동작한다.th:\*로 속성을 적용하면 기존 속성을 대체한다.기존 속성이 없으면 새로 만든다./resources/templates/basic/attribute.htmlth:\* 속성을 지정하면 타임리프는
10.반복
타임리프에서 반복은 th:each를 사용한다. 추가로 반복해서 사용할 수 있는 여러 상태 값을 지원한다./resources/template/basic/each.html<tr th:each="user: ${users}">반복시 오른쪽 컨렉션(${users})의 값을
11.조건부 평가
타임리프의 조건식if,unless (if의 반대)/resources/templates/basic/condition.html타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다만약 다음 조건이 false인 경우 <span>...</span> 부분
12.주석
/resources/templates/basic/comments.html표준 HTML 주석자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다.파임리프 파서 주석타임리프 파서 주석은 타임리프의 진짜 주석. 렌더링에서 주석 부분은 제거한다.타
13.블록
<th:block>은 HTML 태그가 아닌 타임리프의 유일한 자체 태그다./resources/templates/basic/block.html타임리프의 특성상 HTML 태그안에 속성으로 기능을 정의해서 사용하는데, 위 예처럼 이렇게 사용하기 애매한 경우 사용하면 된
14.자바스크립트 인라인
타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공자바스크립트 인라인 기능은 다음과 같이 적용<script th:inline="javascript">/resources/templates/basic/javascript.ht
15.템플릿 조각
웹 페이지를 개발할 때는 공통 영역이 많이 있다.예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들이 있다. 이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적이다. 타임리프는
16.템플릿 레이아웃1
이전에는 일부 코드 조각을 가지고와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨 사용하는 방법에 대해 알아보자예를 들어 <head>에 공통으로 사용하는 css,js같은 정보들이 있는데,이러한 공통 정보들을 한 곳에 모아두고, 공통으로 사
17.템플릿 레이아웃2
앞서 이야기한 개념을 <head> 정도에만 적용하는게 아니라 <html> 전체에 적용할 수도 있다./resources/templates/template/layoutExtend/layoutFile.html생성 결과layoutFile.html을 보면 기본 레이아
18.스프링 통합과 폼
스프링 통합으로 추가되는 기능들 스프링의 SpringEL 문법 통합 ${@myBean.doSomething()}처럼 스프링 빈 호출 지원 편리한 폼 관리를 위한 추가 속성 th:object : 기능 강화, 폼 커멘드 객체 선택 th:field,th:errors,th:e
19.요구사항 추가
타임리프를 사용해서 폼에서 체크박스, 라디오 버튼, 셀렉트 박스를 편리하게 사용하는 방법을 학습해보자. 기존 상품 서비스에 다음 요구사항이 추가판매 여부판매 오픈 여부체크 박스로 선택할 수 있다. 등록 지역서울, 부산, 제주체크 박스로 다중 선택할 수 있다. 상품 종류
20.체크 박스 - 단일1
resources/templates/form/addForm.html상품이 등록되는 곳에 다음과 같이 로그를 남겨서 값이 잘 넘어오는지 확인해보자FormItemController에 @Slf4j 어노테이션 추가체크 박스를 체크하면 HTML Form에서 open=on이라는
21.체크 박스 - 단일2
개발 시 매번 hidden field 를 작성하긴 상당히 번거롭다.타임리프가 제공하는 폼기을을 사용하면 이런 부분을 자동으로 처리할 수 있다.체크 박스의 기존 코드를 제거하고 타임리프가 제공하는 체크 박스 코드로 변경<input type="hidden" name=
22.체크 박스 - 멀티
체크 박스를 멀티로 사용해서, 하나 이상을 체크할 수 있도록 해보자등록 지역서울, 부산, 제주체크 박스로 다중 선택할 수 있다등록 폼, 상세화면, 수정 폼에서 모두 서울, 부산, 제주라는 체크 박스를 반복해서 보여주어야 한다. 이렇게 하려면 각각의 컨트롤러에서 mode
23.라디오 버튼
라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다.라디오 버튼을 자바 ENUM을 활용해서 개발해 보자상품 종류도서, 식품, 기타라디오 버튼으로 하나만 선택할 수 있다.itemTypes를 등록 폼,조회, 수정 폼에서 모두 사용하므로 @ModelAttrib
24.셀렉트 박스
셀렉트 박스는 여러 선택지 중에 하나를 선택할 때 사용할 수 있다.셀렉트 박스를 자바 객체를 활용해서 개발해보자.배송방식빠른 배송일반 배송느린 배송셀렉트 박스로 하나만 선택할 수 있다.DeliveryCode 라는 자바 객체를 사용하는 방법으로 진행하겠다.Delivery