# 01.Thymeleaf ## Thymeleaf ## 기본 기능 * 사용 선언 ```html ``` * 속성 변경 ```html th:href="@{/css/bootstrap.min.css}" ``` * URL 링크 표현식 ```html th:href="@{/css/bootstrap.min.css}" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}" th:href="@{|/basic/items/${item.id}|}" ``` * 속성 변경 ```html th:onclick="|location.href='@{/basic/items/add}'|" ``` * 반복 출력 ```html ``` * 변수 표현식 ```html 10000 ``` * 속성 변경 ```html ``` ### 기본 표현식 ``` ㅇ 간단한 표현 - 변수 표현식: ${...} - 선택 변수 표현식: \*{...} - 메시지 표현식: #{...} - 링크 URL 표현식: @{...} - 조각 표현식: ~{...} ㅇ 리터럴 - 텍스트: 'one text', 'Another one!',… - 숫자: 0, 34, 3.0, 12.3,… - 불린: true, false - 널: null - 리터럴 토큰: one, sometext, main,… ㅇ 문자 연산 - 문자 합치기: + - 리터럴 대체: |The name is ${name}| ㅇ 산술 연산 - Binary operators: +, -, \*, /, % - Minus sign (unary operator): - ㅇ 불린 연산 - Binary operators: and, or - Boolean negation (unary operator): !, not ㅇ 비교와 동등 - 비교: >, <, >=, <= (gt, lt, ge, le) - 동등 연산: ==, != (eq, ne) ㅇ 조건 연산 - If-then: (if) ? (then) - If-then-else: (if) ? (then) : (else) - Default: (value) ?: (defaultvalue) ㅇ 특별한 토큰 - No-Operation: \_ ``` ### 텍스트 * 텍스트 출력 * 기본적으로 escape 를 제공 * escape : HTML 에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것 * HTML 엔티티 : `<` 문자를 태그의 시작이 아닌 문자로 표현하는 방법 ```html

th:text 사용 =
컨텐츠 안에서 직접 출력하기 = [[${data}]]

``` * Unescape * `th:text` --> `th:utext` * `[[...]]` --> `[(...)]` ```html

th:utext =
[(...)] = [(${data})]

``` ### SpringEL 표현식 **Object** * `${user.username}` = userA * `${user['username']}` = userA * `${user.getUsername()}` = userA **List** * `${users[0].username}` = userA * `${users[0]['username']}` = userA * `${users[0].getUsername()}` = userA **Map** * `${userMap['userA'].username}` = userA * `${userMap['userA']['username']}` = userA * `${userMap['userA'].getUsername()}` = userA **Safe Navigation Operator** ```html

``` * errors`?.` 은 errors 가 null 일때 NullPointerException 대신, null 을 반환하는 문법 [참고](https://docs.spring.io/spring-framework/docs/current/reference/html/core.html#expressions-operator-safe-navigation) **지역변수** ```html

first member name :

``` ### 기본 객체 **Thymeleaf 기본 객체** * `${#request}` * `${#response}` * `${#session}` * `${#servletContext}` * `${#locale}` **편의 객체** * HTTP 요청 파라미터 접근: `${param.paramData}` * HTTP 세션 접근: `${session.sessionData}` * 스프링 빈 접근: `${@helloBean.hello('Spring!')}` ### 유틸리티 객체와 날짜 * \#message : 메시지, 국제화 처리 * \#uris : URI 이스케이프 지원 * \#dates : java.util.Date 서식 지원 * \#calendars : java.util.Calendar 서식 지원 * \#temporals : 자바8 날짜 서식 지원 * \#numbers : 숫자 서식 지원 * \#strings : 문자 관련 편의 기능 * \#objects : 객체 관련 기능 제공 * \#bools : boolean 관련 기능 제공 * \#arrays : 배열 관련 기능 제공 * \#lists , #sets , #maps : 컬렉션 관련 기능 제공 * \#ids : 아이디 처리 관련 기능 제공, 뒤에서 설명 **Reference** > [타임리프 유틸리티 객체](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-utilityobjects) > > [유틸리티 객체 예시](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expressionutility-objects) ### URL 링크 * 단순 URL * /hello ```html ``` * query parameter * /hello?param1=data1\¶m2=data2 ```html ``` * path variable * /hello/data1/data2 ```html ``` * query parameter + path variable * /hello/data1?param2=data2 ```html ``` **Reference** > ### 리터럴 * 문자: 'hello' (문자 리터럴은 항상 작은따옴표로 감싸야 함) ```html ``` * 숫자: 10 * 불린: true , false * null: null ### 연산 * 산술 연산 ```html 10 + 2 = ``` * 비교 연산 ```html 1 >= 10 = ``` * 조건식 ```html (10 % 2 == 0) ? = ``` * Elvis 연산자 ```html ${data} = ``` * No-Operation ```html ${data} = 데이터가 없습니다. ``` ### 속성 값 설정 * 속성 설정 ```html ``` * 속성 추가 ```html
``` * checked 처리 ```html

``` ### 반복 * 반복 ```html username 0 ``` * 상태 유지 ```html ``` * index : 0부터 시작 * count : 1부터 시작 * size : 전체 사이즈 * even , odd : 홀/짝수 여부 * first , last :처음/마지막 여부 * current : 현재 객체 ### 조건부 평가 * if, unless ```html ``` * switch ```html 10살 20살 기타 ``` ### 주석 * 표준 HTML 주석 * 타임리프가 렌더링하지 않고 유지 ```html ``` * 타임리프 파서 주석 * 렌더링에서 주석 부분을 제거 (타임리프 주석) ```html html data ``` * 타임리프 프로토타입 주석 * 타임리프 렌더링을 거쳐야만 이 부분이 정상 렌더링 (HTML 에서만 주석 처리) ```html ``` ### 블록 * th:each 로 해결이 어려울 때 사용 ```html

name: age:

요약

``` ### JavaScript Inline * javascript inline ```html ``` * each ```html ``` ### 템플릿 조각 * `/resources/templates/template/fragment/footer.html` ```html ``` * `/resources/templates/template/fragment/fragmentMain.html` ```html Title

부분 포함

부분 포함 insert (div tag 안에 삽입)

부분 포함 replace (div tag 대체)

파라미터 사용

``` ### 템플릿 레이아웃 **동적인 레이아웃** * `/resources/templates/template/layout/base.html` * 레이아웃이라는 큰 틀 ```html 레이아웃 타이틀 ``` * `/resources/templates/template/layout/layoutMain.html` * 틀 안에 필요한 코드 조각들을 전달 * ::title 은 현재 페이지의 title tag 들을 전달 * ::link 은 현재 페이지의 link tag 들을 전달 ```html 메인 타이틀 메인 컨텐츠 ``` **메인 레이아웃** * `/resources/templates/template/layoutExtend/layoutFile.html` * 기본 레이아웃(header, footer) 틀은 유지하고 title, content 만 변경 ```html 레이아웃 타이틀

레이아웃 H1

레이아웃 컨텐츠

``` * `/resources/templates/template/layoutExtend/layoutExtendMain.html` * 기본 레이아웃 틀로 교체하는데 하는데 title, content 는 전달 ```html 메인 페이지 타이틀

메인 페이지 컨텐츠

메인 페이지 포함 내용

``` ## Form ### 입력 폼 처리 ```html ``` * `th:object` : 커맨드 객체를 지정 * `\*{...}` : 선택 변수 식 (th:object 에서 선택한 객체에 접근) * `th:field` : HTML 태그의 id , name , value 속성을 자동으로 생성 * 렌더링 전/후 ```html ``` ```html ``` ### 체크 박스 #### 단일 **Register** ```html

판매 오픈

``` * 타임리프가 자동으로 `` 생성 * 체크 박스를 체크할 경우 on 을 전달하지만, 체크하지 않을 경우 값 자체를 전달하지 않음 -> 이 경우 hidden type 의 \_name input 태그를 사용하게 되면, false 로 값을 전달 (\_open=on) **View** ```html

판매 오픈

``` #### 멀티 (참고) @ModelAttribute 를 사용하면 해당 Controller 호출 시 regions() 에서 반환한 값이 자동으로 Model에 항상 담기게 됨 ```java @ModelAttribute("regions") public Map regions() { Map regions = new LinkedHashMap<>(); regions.put("SEOUL", "서울"); regions.put("BUSAN", "부산"); regions.put("JEJU", "제주"); return regions; } ``` **Register** ```html

서울

``` * 타임리프는 each로 체크박스 생성 시 동적으로 id에 순번을 매겨준다. `#ids`는 동적으로 생성된 id를 인식 * result ```html ``` **View** ```html

서울

``` * 타임리프는 `th:field`에 지정한 값과 `th:value`의 값을 비교해서 체크를 자동으로 처리 ### 라디오 버튼 ```java public enum ItemType { BOOK("도서"), FOOD("식품"), ETC("기타"); // NAME(description) private final String description; ItemType(String description) { this.description = description; } public String getDescription() { return description; } } ``` ```html

BOOK

``` * 라디오 버튼은 항상 하나의 값이 선택되어야 하므로 히든 버튼을 따로 생성하지 않음. ### 셀렉트 박스 **Register** ```html ``` ## Reference > [공식 사이트](https://www.thymeleaf.org/) > > [공식 메뉴얼 - 기본 기능](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html) > > [공식 메뉴얼 - 스프링 통합](https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://jihunparkme.gitbook.io/docs/lecture/spring-mvc-part-2/01.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.