Thymeleaf Tutorials
Thymeleaf
https://6161990src.tistory.com/81
5. 타임리프의 표현식
기본적 표현식
변수식 ${user.firstName}
타임리프에서는 변수식에 HTTP 세션(#httpSession)과 HTTP 요청(#httpServletRequest)을 비롯한 각종 타임리프가 관리하는 변수에 접근하거나 메서드를 실행할 수 있다.
선택 변수식 *{name}
변수식에서는 ${user.name}, ${user.age}, ${user.tel} 처럼 특정 객체의 프로퍼티에 연속으로 접근하고 싶을 때가 자주 있다. 이러한 경우에는 th:object 속성과 선택 변수식으로 조합해서 사용하면 변수식보다 간단하게 기술할 수 있다.
HTML요소에 th:object=${user}를 정의해두면 *{name}, *{address}, *{tel} 와 같이 user를 생략한 형태로 기술할 수 있다.
메시지식 #{status.reserved.message}
타임리프에서는 메시지를 키-값으로 관리한다. 메시지의 키 값(status.reserved.message)이으로 메시지 본문을 가져오고 싶을 때 메시지 식을 사용한다. 메시지에 삽입하는 매개변수는 #{home.welcome(${session.user.name})}과 같이 키 값의 뒷부분에 괄호를 붙이고 그 안에 매개변수 값을 나열하면된다.
링크 URL 식 @{/echo}
타임리프에서는 링크 URL을 이용해 지정한 URL(이 예에서는 /echo)이 시작되는 부분에 컨텍스트 경로를 추가할 수 있다. 예를 들어 컨텍스트 경로가 app이라면 app/echo가 된다.
리터럴
문자열을 표현하기 위한 텍스트 리터럴은 작은따옴표로 둘러싼다. 또한 값으로 포함된 작은 따옴표는 ‘\’로 이스케이프 해야한다.
- 텍스트 리터럴 : ‘spring framework’ , ‘I\’m a user’
- 수치 리터럴 : 0, 1.4, 2021
- 불린값 리터럴 : true, false
- Null 리터럴 : null
기본적인 연산자
- 산술 연산 : th:text=”${price} * ${num}”
- 논리 연산 : th:if=”${not todo.finished}”
- 마이너스 부호: th:text=”-10″
- 비교 연산 : th:if=”${items.count} gt 1″
타임리프는 마크업 언어이기 때문에 < 등으로 이스케이프해야한다.
- gt (>)
- lt (<)
- ge (>=)
- le (<=)
- not (!)
- eq (==)
- neq/ne(!=)
텍스트 연산자
- 텍스트 추가 th:text=” ‘ My name is ‘ + ${username}. “
- 텍스트 치환 th:text=” | My name is ${username} | “
조건 연산자
- 삼항 연산자 th:class=”${row.even}? ‘even’ : ‘odd'”
- 엘비스 연산자 th:text=”${username}? : ‘Sam Smith'”
5. HTML 요소의 출력 제어
조건에 따른 출력 여부 제어
- th:if 속성 값이 참인 경우에만 대상이 되는 HTML 요소를 출력한다.
- th:unless 속성 값이 거짓인 경우에만 대상이 되는 HTML 요소를 출력한다.
- th:switch 자식 요소에 기술된 th:case 속성의 값과 비교 평가를 하기 위한 값을 설정한다.
- th:case 부모 요소의 th:switch 속성 값의 경우에만 대상이 되는 HTML 요소를 출력한다.
th:if 예시
<div th:if="${not #strings.isEmpty(room.remark)}">
<label>비고</label>
<span th:text="*{room.remark}">비고가 입력되어 있으면 표시</span>
</div>
// #strings.isEmpty ?
타임리프가 제공하는 문자열을 위한 유틸리티. 문자열이 공백 또는 null인 경우에 참을 반환
th:switch / th:case 예시
<div th:switch="*{room.size}">
<label> 방 크기 </label>
<span th:case="'L'">대</span>
<span th:case="'M'">중</span>
<span th:case="'S'">소</span>
<span th:case="'*'">불명</span> // 어느 속성에도 해당하지 않을 때 *
</div>
반복 출력 제어
지정한 배열 값의 수만큼 HTML 요소를 반복 출력하는 것처럼 출력 반복을 제어할 수 있는 th:each.
th:each에는 다음과 같은 배열에 해당하는 타입을 지정해야한다.
- java.util.List 구현 클래스
- java.util.Iterable 구현 클래스
- java.util.Map 구현 클래스
- 배열
반복 출력 시의 메타정보
프로퍼티 | 설명 |
index | 현재 반복 인덱스(0부터 시작) |
count | 현재 반복 인덱스(1부터 시작) |
size | 반복 대상의 총 건수 |
current | 현재 반복 처리에서 취급하는 요소 값 |
odd | 현재 반복 처리에서 홀수 여부를 나타내는 논리 값 |
even | 현재 반복 처리에서 짝수 여부를 나타내는 논리 값 |
first | 현재 반복 처리에서 첫번째 여부를 나타내는 논리 값 |
last | 현재 반복 처리에서 마지막 여부를 나타내는 논리 값 |
th:each의 예
<tr th:each="prod : ${products}">
<td th:text="${prodStat.count}">1</td>
<td th:text="${prod.name}">Tomato</td>
<td th:text="${prod.price}">4980</td>
<td th:text="${prod.stock == 0? '품절' : prod.stock}">10</td>
</tr>
//2 라인
'반복 대상의 현재 값을 저장하는 변수명: 반복 대상의 배열 값' 형식으로 지정
products 리스트를 대상으로 현재 값을 저장하는 변수명을 prod로 정의
//3 라인
반복에 대한 메타 정보에 접근하려면 타임리프가 묵시적으로 생성한 변수를 이용(변수명에 접미사 Stat을 부여)
5. 스프링과의 연계
폼 객체와 바인딩
HTML 폼과 폼 객체의 연결은 th:object 속성과 th:field 속성을 사용한다.
- th:object HTML 폼에 연결되는 폼 객체를 지정하기 위한 속성
- th:field 입력 항목에 연결되는 폼 객체의 프로퍼티를 지정하기 위한 속성
<form th:action="@{/sample}" th:method="POST" th:object="${fruit}">
<input type="text" name="fruit" th:field="*{watermelon}" />
</form>
- th:object : 연결하고 싶은 폼 객체를 변수 식으로 사용해 지정한다. (변수식에는 모델에 저장한 폼 객체의 속성명을 지정)
- th:field : 연결하고 싶은 폼 객체의 프로퍼티를 선택 변수식으로 사용해 지정한다. (선택 변수식은 폼 객체의 프로퍼티명을 지정하며 중첩된 프로퍼티를 지정하는 경우에는 ‘.’로 프로퍼티명을 연결하면된다. th:field=”${fruit.watermelon}” )
입력 오류 표시
스프링 MVC의 입력값 검사 기능에서 발생한 오류 표시에는 th:errors , th:errorclass , #field 객체를 사용한다.
- th:errors 오류 메시지의 출력 대상을 지정하기 위한 속성
- th:errorclass 오류 발생 시 적용하는 css 클래스를 지정하기 위한 속성
- #field 오류 정보에 접근하기 위한 편리한 메서드를 제공하는 객체
<input type="text" name="text" th:field="*{text}" th:errorclass="fieldError"/>
<span th:errors="*{text}">오류메세지</span>
lecture4
lecture4
aj2-lecture4-springboot-thymeleaf
Indonesia Mount Lewotobi Laki-laki Volcano
Spring Initializr Modules
Spring Framework Modules
Term Project Group
Group1 – 강민지, 이서영, 임혜령, 황준하
Group2 – 강인후, 장윤정, 백지유, 홍정안
Group3 – 고동민, 박주영, 김지우2, 서동준
Group4 – 김동현, 윤성민, 김명제, 윤지용
Group5 – 김웅빈, 이재균, 성윤수, 안도현
Group6 – 박재홍, 오승민, 서종진, 양상훈
Group7 – 박종민, 박주양, 이동영, 박준성
Group8 – 리우치쒸엔, 지앙바오뤼
lecture3
lectrure3
aj2-lecture3-servlet-JSP
Term Project
2024 Project
Group1 – DOM (Dankook Open Market) 중고 물물교환 사이트 (쇼핑)
Group2 – DanMatching 단국대 스포츠 매칭 사이트 (스포츠)
Group3 – 아파트 실거래가 서비스 (국토교통부 API 아파트 실거래가)
Group4 – 미슐랭장고 재료기반 레시피추천 웹사이트 (음식)
Group5 – CarrerTime 취업자와 회사 매칭 웹사이트
Group6 – 고고그램 (게임)
Group7 – SOLL 주차플랫폼 서비스 (모두의 주차장 참고)
Group8 – 핫플시스템 (여행)
Group9 – 사람책 (브런치스트로 참고)
2022 Project
Group1 – 우리동네 위치기반 커뮤니티 (여행)
Group2 – 위치기반 병원 후기 웹사이트 (모두닥 참고)
Group3 – 영화정보 웹사이트 (네이버영화/IMDB 참고)
Group4 – 알고리즘 웹사이트 (백준알고리즘 참고)
Group5 – 게임추천 웹사이트
Group6 – FoodLab 음식후기 웹사이트 (망고플레이트, Yelp 참고)
Group7 – IT 이벤트 사이트 (onoffmix 참고)
Group9 – 아이돌 공식홈페이지와 팬카페커뮤니티 결합 웹사이트 (BTS weverse 참고)
2021 Project
Group1 – RedBeans 동아리 블로그 사이트
Group2 – Pastebin 텍스트공유 사이트
Group3 – EPL(유럽축구) 사이트
Group4 – 도서구매 사이트
Group5 – 내일로여행 여행일정 계획 사이트
2020 Project
Group1 – 유럽여행 Planner(기록) 사이트
Group2 – 3D 프린터모델 파일 공유 사이트
Group3 – 요기요/배달의민족같은 배달음식주문 사이트
Group4 – 에브리타임같은 동아리소모임 사이트
Group5 – 온라인후원(클라우드소싱) 사이트
Group6 – 방탈출카페 예약 사이트
2019 Project
Group1 – Pixabay같은 무료이미지제공 사이트
Group2 – 윤동주시인 특별전시회 웹사이트
Group3 – 단체티 쇼핑몰
Group4 – 화해같은 화장품 추천시스템 사이트
Group5 – 중고차 쇼핑몰
Group6 – 오늘 뭐 입지? 종합 패션쇼핑몰
Group7 – 알바몬같은 Job Finding Website
Group8 – 펜션예약 사이트
Group9 – 영화커뮤니티 사이트
Group10 – 왕초보개발자 게시판