πŸ“–
Aaron's TECH BOOK
  • Intro
    • About me
  • Lecture
    • Kubernetes
      • Begin Kubernetes
    • Kafka
      • Begin Kafka
    • Kotlin
      • TDD, Clean Code Preview
      • woowa Kotlin
    • Java
      • Multithread Concurrency
      • The Java
    • Toby
      • Toby Spring 6
      • Toby Spring Boot
    • MSA
      • 01.Micro Service
      • 02.DDD 섀계
      • 03.DDD κ΅¬ν˜„
      • 04.EDA κ΅¬ν˜„
    • Spring Boot
    • Spring Batch
    • Spring Core Advanced
    • Spring DB Part II
    • Spring DB Part I
    • JPA API and Performance Optimization
    • JPA Web Application
    • JPA Programming Basic
    • Spring MVC Part 2
      • 01.Thymeleaf
      • 02.ETC
      • 03.Validation
      • 04.Login
      • 05.Exception
    • Spring MVC Part 1
      • 01.Servlet
      • 02.MVC
    • Http
      • 01.Basic
      • 02.Method
      • 03.Header
    • Spring Core
    • Study
      • Concurrency issues
      • First Come First Served
      • Performance Test
      • TDD
      • IntelliJ
  • Book
    • Kafka Streams in Action
      • 01.μΉ΄ν”„μΉ΄ 슀트림즈
      • 02.μΉ΄ν”„μΉ΄ 슀트림즈 개발
      • 03.μΉ΄ν”„μΉ΄ 슀트림즈 관리
    • Effective Kotlin
      • 01.쒋은 μ½”λ“œ
      • 02.μ½”λ“œ 섀계
      • 03.νš¨μœ¨μ„±
    • 이벀트 μ†Œμ‹±κ³Ό MSA
      • 01.도메인 주도 섀계
      • 02.객체지ν–₯ 섀계 원칙
      • 03-04.이벀트 μ†Œμ‹±
      • 05.λ§ˆμ΄ν¬λ‘œμ„œλΉ„μŠ€ ν˜‘μ—…
      • 06.결과적 일관성
      • 07.CQRS
      • 08.UI
      • 09.ν΄λΌμš°λ“œ ν™˜κ²½
    • λͺ½κ³ DB μ™„λ²½ κ°€μ΄λ“œ
      • I. λͺ½κ³ DB μ‹œμž‘
      • II. λͺ½κ³ DB 개발
    • Kotlin Cookbook
      • μ½”ν‹€λ¦° 기초
      • μ½”ν‹€λ¦° κΈ°λŠ₯
      • ETC
    • Kotlin in Action
      • ν•¨μˆ˜/클래슀/객체/μΈν„°νŽ˜μ΄μŠ€
      • λžŒλ‹€μ™€ νƒ€μž…
      • μ˜€λ²„λ‘œλ”©κ³Ό κ³ μ°¨ ν•¨μˆ˜
      • μ œλ„€λ¦­μŠ€, μ• λ…Έν…Œμ΄μ…˜, λ¦¬ν”Œλ ‰μ…˜
    • Kent Beck Tidy First?
    • λŒ€κ·œλͺ¨ μ‹œμŠ€ν…œ 섀계 기초
      • 01.μ‚¬μš©μž μˆ˜μ— λ”°λ₯Έ 규λͺ¨ ν™•μž₯μ„±
      • 02.개랡적인 규λͺ¨ μΆ”μ •
      • 03.μ‹œμŠ€ν…œ 섀계 κ³΅λž΅λ²•
      • 04.처리율 μ œν•œ μž₯치 섀계
      • 05.μ•ˆμ • ν•΄μ‹œ 섀계
      • 06.ν‚€-κ°’ μ €μž₯μ†Œ 섀계
      • 07.유일 ID 생성기 섀계
      • 08.URL 단좕기 섀계
      • 09.μ›Ή 크둀러 섀계
      • 10.μ•Œλ¦Ό μ‹œμŠ€ν…œ 섀계
      • 11.λ‰΄μŠ€ ν”Όλ“œ μ‹œμŠ€ν…œ 섀계
      • 12.μ±„νŒ… μ‹œμŠ€ν…œ 섀계
      • 13.검색어 μžλ™μ™„μ„± μ‹œμŠ€ν…œ
      • 14.유튜브 섀계
      • 15.ꡬ글 λ“œλΌμ΄λΈŒ 섀계
      • 16.배움은 κ³„μ†λœλ‹€
    • μ‹€μš©μ£Όμ˜ ν”„λ‘œκ·Έλž˜λ¨ΈπŸ“–
    • GoF Design Patterns
    • 도메인 주도 개발 μ‹œμž‘ν•˜κΈ°
      • 01.도메인 λͺ¨λΈ μ‹œμž‘ν•˜κΈ°
      • 02.μ•„ν‚€ν…μ²˜ κ°œμš”
      • 03.μ• κ·Έλ¦¬κ±°νŠΈ
      • 04.리포지터리와 λͺ¨λΈ κ΅¬ν˜„
      • 05.Spring Data JPAλ₯Ό μ΄μš©ν•œ 쑰회 κΈ°λŠ₯
      • 06.μ‘μš© μ„œλΉ„μŠ€μ™€ ν‘œν˜„ μ˜μ—­
      • 07.도메인 μ„œλΉ„μŠ€
      • 08.μ• κ·Έλ¦¬κ±°νŠΈ νŠΈλžœμž­μ…˜ 관리
      • 09.도메인 λͺ¨λΈκ³Ό λ°”μš΄λ””λ“œ μ»¨ν…μŠ€νŠΈ
      • 10.이벀트
      • 11.CQRS
    • Effective Java 3/E
      • 객체, 곡톡 λ©”μ„œλ“œ
      • 클래슀, μΈν„°νŽ˜μ΄μŠ€, μ œλ„€λ¦­
    • μ†Œν”„νŠΈμ›¨μ–΄ μž₯인
    • ν•¨κ»˜ 자라기
    • Modern Java In Action
      • 01.기초
      • 02.ν•¨μˆ˜ν˜• 데이터 처리
      • 03.슀트림과 λžŒλ‹€λ₯Ό μ΄μš©ν•œ 효과적 ν”„λ‘œκ·Έλž˜λ°
      • 04.맀일 μžλ°”μ™€ ν•¨κ»˜
    • Refactoring
      • 01.λ¦¬νŽ™ν„°λ§ 첫 번째 μ˜ˆμ‹œ
      • 02.λ¦¬νŽ™ν„°λ§ 원칙
      • 03.μ½”λ“œμ—μ„œ λ‚˜λŠ” μ•…μ·¨
      • 06.기본적인 λ¦¬νŽ™ν„°λ§
      • 07.μΊ‘μŠν™”
      • 08.κΈ°λŠ₯ 이동
      • 09.데이터 쑰직화
      • 10.쑰건뢀 둜직 κ°„μ†Œν™”
      • 11.API λ¦¬νŒ©ν„°λ§
      • 12.상속 닀루기
    • 객체지ν–₯의 사싀과 μ˜€ν•΄
      • 01.ν˜‘λ ₯ν•˜λŠ” κ°μ²΄λ“€μ˜ 곡동체
      • 02.μ΄μƒν•œ λ‚˜λΌμ˜ 객체
      • 03.νƒ€μž…κ³Ό 좔상화
      • 04.μ—­ν• , μ±…μž„, ν˜‘λ ₯
      • 05.μ±…μž„κ³Ό λ©”μ‹œμ§€
      • 06.객체 지도
      • 07.ν•¨κ»˜ λͺ¨μœΌκΈ°
      • 뢀둝.좔상화 기법
    • Clean Code
    • μžλ°” ORM ν‘œμ€€ JPA ν”„λ‘œκ·Έλž˜λ°
Powered by GitBook
On this page
  • Thymeleaf
  • κΈ°λ³Έ κΈ°λŠ₯
  • κΈ°λ³Έ ν‘œν˜„μ‹
  • ν…μŠ€νŠΈ
  • SpringEL ν‘œν˜„μ‹
  • κΈ°λ³Έ 객체
  • μœ ν‹Έλ¦¬ν‹° 객체와 λ‚ μ§œ
  • URL 링크
  • λ¦¬ν„°λŸ΄
  • μ—°μ‚°
  • 속성 κ°’ μ„€μ •
  • 반볡
  • 쑰건뢀 평가
  • 주석
  • 블둝
  • JavaScript Inline
  • ν…œν”Œλ¦Ώ 쑰각
  • ν…œν”Œλ¦Ώ λ ˆμ΄μ•„μ›ƒ
  • Form
  • μž…λ ₯ 폼 처리
  • 체크 λ°•μŠ€
  • λΌλ””μ˜€ λ²„νŠΌ
  • μ…€λ ‰νŠΈ λ°•μŠ€
  • Reference
  1. Lecture
  2. Spring MVC Part 2

01.Thymeleaf

Thymeleaf

κΈ°λ³Έ κΈ°λŠ₯

  • μ‚¬μš© μ„ μ–Έ

    <html xmlns:th="http://www.thymeleaf.org"></html>
  • 속성 λ³€κ²½

    th:href="@{/css/bootstrap.min.css}"
  • URL 링크 ν‘œν˜„μ‹

    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}|}"
  • 속성 λ³€κ²½

    th:onclick="|location.href='@{/basic/items/add}'|"
  • 반볡 좜λ ₯

    <tr th:each="item : ${items}"></tr>
  • λ³€μˆ˜ ν‘œν˜„μ‹

    <td th:text="${item.price}">10000</td>
  • 속성 λ³€κ²½

    <input
      type="text"
      id="price"
      name="price"
      value="10000"
      th:value="${item.price}"
    />

κΈ°λ³Έ ν‘œν˜„μ‹

γ…‡ κ°„λ‹¨ν•œ ν‘œν˜„
  - λ³€μˆ˜ ν‘œν˜„μ‹: ${...}
  - 선택 λ³€μˆ˜ ν‘œν˜„μ‹: \*{...}
  - λ©”μ‹œμ§€ ν‘œν˜„μ‹: #{...}
  - 링크 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 μ—”ν‹°ν‹° : < 문자λ₯Ό νƒœκ·Έμ˜ μ‹œμž‘μ΄ μ•„λ‹Œ 문자둜 ν‘œν˜„ν•˜λŠ” 방법

    <ul>
      <li>th:text μ‚¬μš© = <span th:text="${data}"></span></li>
      <li>컨텐츠 μ•ˆμ—μ„œ 직접 좜λ ₯ν•˜κΈ° = [[${data}]]</li>
    </ul>
  • Unescape

    • th:text --> th:utext

    • [[...]] --> [(...)]

    <ul>
      <li>th:utext = <span th:utext="${data}"></span></li>
      <li><span th:inline="none">[(...)] = </span>[(${data})]</li>
    </ul>

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

<div th:if="${errors?.containsKey('globalError')}"></div>

μ§€μ—­λ³€μˆ˜

<div th:with="first=${users[0]}">
  <p>first member name : <span th:text="${first.username}"></span></p>
</div>

기본 객체

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

URL 링크

  • λ‹¨μˆœ URL

    • /hello

      <a th:href="@{/hello}"></a>
  • query parameter

    • /hello?param1=data1&param2=data2

      <a th:href="@{/hello(param1=${param1}, param2=${param2})}"></a>
  • path variable

    • /hello/data1/data2

      <a
        th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}"
      ></a>
  • query parameter + path variable

    • /hello/data1?param2=data2

      <a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}"></a>

Reference

λ¦¬ν„°λŸ΄

  • 문자: 'hello' (문자 λ¦¬ν„°λŸ΄μ€ 항상 μž‘μ€λ”°μ˜΄ν‘œλ‘œ 감싸야 함)

    <span th:text="'hello'"></span>
  • 숫자: 10

  • 뢈린: true , false

  • null: null

μ—°μ‚°

  • μ‚°μˆ  μ—°μ‚°

    10 + 2 = <span th:text="10 + 2"></span>
  • 비ꡐ μ—°μ‚°

    <!-- 
      > (gt)
      < (lt)
      >= (ge)
      <= (le)
      ! (not)
      == (eq)
      != (neq, ne)`
    -->
    1 >= 10 = <span th:text="1 >= 10"></span>
  • 쑰건식

    (10 % 2 == 0) ? = <span th:text="(10 % 2 == 0)?'짝수':'ν™€μˆ˜'"></span>
  • Elvis μ—°μ‚°μž

    <!-- 데이터가 없을 경우 μ„€μ • λ¬Έμžμ—΄ 좜λ ₯ -->
    ${data} = <span th:text="${data}?: '데이터가 μ—†μŠ΅λ‹ˆλ‹€.'"></span>
  • No-Operation

    <!-- 데이터가 없을 경우 tag 데이터 κ·ΈλŒ€λ‘œ 좜λ ₯ (Thymeleaf κ°€ μ‹€ν–‰λ˜μ§€ μ•ŠλŠ” 것 처럼 λ™μž‘) -->
    ${data} = <span th:text="${data}?: _">데이터가 μ—†μŠ΅λ‹ˆλ‹€.</span>

속성 κ°’ μ„€μ •

  • 속성 μ„€μ •

    <input type="text" name="mock" th:name="userA" />
  • 속성 μΆ”κ°€

    <input type="text" class="text" th:classappend="large" /><br />
  • checked 처리

    <input type="checkbox" name="active" th:checked="true" /><br />
    <input type="checkbox" name="active" th:checked="false" /><br />
    <input type="checkbox" name="active" th:checked="${isChecked}" /><br />

반볡

  • 반볡

    <tr th:each="user : ${users}">
      <td th:text="${user.username}">username</td>
      <td th:text="${user.age}">0</td>
    </tr>
  • μƒνƒœ μœ μ§€

    <!-- μƒλž΅ μ‹œ userStat 둜 μ‚¬μš© -->
    <tr th:each="user, state : ${users}"></tr>
    • index : 0λΆ€ν„° μ‹œμž‘

    • count : 1λΆ€ν„° μ‹œμž‘

    • size : 전체 μ‚¬μ΄μ¦ˆ

    • even , odd : 홀/짝수 μ—¬λΆ€

    • first , last :처음/λ§ˆμ§€λ§‰ μ—¬λΆ€

    • current : ν˜„μž¬ 객체

쑰건뢀 평가

  • if, unless

    <span th:text="'μ–΄λ₯Έ'" th:if="${user.age gt 20}"></span>
    <span th:text="'μ–΄λ₯Έ'" th:unless="${user.age le 20}"></span>
  • switch

    <td th:switch="${user.age}">
      <span th:case="10">10μ‚΄</span>
      <span th:case="20">20μ‚΄</span>
      <span th:case="*">기타</span>
    </td>

주석

  • ν‘œμ€€ HTML 주석

    • νƒ€μž„λ¦¬ν”„κ°€ λ Œλ”λ§ν•˜μ§€ μ•Šκ³  μœ μ§€

    <!-- <span th:text="${data}"></span> -->
  • νƒ€μž„λ¦¬ν”„ νŒŒμ„œ 주석

    • λ Œλ”λ§μ—μ„œ 주석 뢀뢄을 제거 (νƒ€μž„λ¦¬ν”„ 주석)

    <!--/* [[${data}]] */-->
    
    <!--/*-->
    <span th:text="${data}">html data</span>
    <!--*/-->
  • νƒ€μž„λ¦¬ν”„ ν”„λ‘œν† νƒ€μž… 주석

    • νƒ€μž„λ¦¬ν”„ λ Œλ”λ§μ„ κ±°μ³μ•Όλ§Œ 이 뢀뢄이 정상 λ Œλ”λ§ (HTML μ—μ„œλ§Œ 주석 처리)

    <!--/*/
    <span th:text="${data}">html data</span>
    /*/-->

블둝

  • th:each 둜 해결이 μ–΄λ €μšΈ λ•Œ μ‚¬μš©

<th:block th:each="user : ${users}">
  <div>
    name: <span th:text="${user.username}"></span> age:
    <span th:text="${user.age}"></span>
  </div>
  <div>μš”μ•½ <span th:text="${user.username} + ' / ' + ${user.age}"></span></div>
</th:block>

JavaScript Inline

  • javascript inline

    <script th:inline="javascript">
      var username = [[${user.username}]];
      var age = [[${user.age}]];
      //μžλ°”μŠ€ν¬λ¦½νŠΈ λ‚΄μΆ”λŸ΄ ν…œν”Œλ¦Ώ
      var username2 = /*[[${user.username}]]*/ "test username";
      //객체
      var user = [[${user}]];
    </script>
    
    <!--
        var username = "userA";
        var age = 10;
        var username2 = "userA";
        var user = {"username":"userA","age":10};
    -->
  • each

    <script th:inline="javascript">
      [# th:each="user, stat : ${users}"]
      var user[[${stat.count}]] = [[${user}]];
      [/]
    </script>
    <!--
      var user1 = {"username":"userA","age":10};
      var user2 = {"username":"userB","age":20};
      var user3 = {"username":"userC","age":30};
    -->

ν…œν”Œλ¦Ώ 쑰각

  • /resources/templates/template/fragment/footer.html

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
      <body>
        <footer th:fragment="copy">ν‘Έν„° 자리 μž…λ‹ˆλ‹€.</footer>
    
        <footer th:fragment="copyParam (param1, param2)">
          <p>νŒŒλΌλ―Έν„° 자리 μž…λ‹ˆλ‹€.</p>
          <p th:text="${param1}"></p>
          <p th:text="${param2}"></p>
        </footer>
      </body>
    </html>
  • /resources/templates/template/fragment/fragmentMain.html

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
      <head>
        <meta charset="UTF-8" />
        <title>Title</title>
      </head>
      <body>
        <h1>λΆ€λΆ„ 포함</h1>
        <h2>λΆ€λΆ„ 포함 insert (div tag μ•ˆμ— μ‚½μž…)</h2>
        <div th:insert="~{template/fragment/footer :: copy}"></div>
    
        <h2>λΆ€λΆ„ 포함 replace (div tag λŒ€μ²΄)</h2>
        <div th:replace="~{template/fragment/footer :: copy}"></div>
    
        <h1>νŒŒλΌλ―Έν„° μ‚¬μš©</h1>
        <div
          th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"
        ></div>
      </body>
    </html>

ν…œν”Œλ¦Ώ λ ˆμ΄μ•„μ›ƒ

동적인 λ ˆμ΄μ•„μ›ƒ

  • /resources/templates/template/layout/base.html

    • λ ˆμ΄μ•„μ›ƒμ΄λΌλŠ” 큰 ν‹€

    <html xmlns:th="http://www.thymeleaf.org">
      <head th:fragment="common_header(title,links)">
        <title th:replace="${title}">λ ˆμ΄μ•„μ›ƒ 타이틀</title>
    
        <!-- 곡톡 -->
        <link
          rel="stylesheet"
          type="text/css"
          media="all"
          th:href="@{/css/awesomeapp.css}"
        />
        <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
        <script
          type="text/javascript"
          th:src="@{/sh/scripts/codebase.js}"
        ></script>
    
        <!-- μΆ”κ°€ -->
        <th:block th:replace="${links}" />
      </head>
    </html>
  • /resources/templates/template/layout/layoutMain.html

    • ν‹€ μ•ˆμ— ν•„μš”ν•œ μ½”λ“œ 쑰각듀을 전달

    • ::title 은 ν˜„μž¬ νŽ˜μ΄μ§€μ˜ title tag 듀을 전달

    • ::link 은 ν˜„μž¬ νŽ˜μ΄μ§€μ˜ link tag 듀을 전달

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
      <head
        th:replace="template/layout/base :: common_header(~{::title},~{::link})"
      >
        <title>메인 타이틀</title>
        <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
        <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}" />
      </head>
      <body>
        메인 컨텐츠
      </body>
    </html>

메인 λ ˆμ΄μ•„μ›ƒ

  • /resources/templates/template/layoutExtend/layoutFile.html

    • κΈ°λ³Έ λ ˆμ΄μ•„μ›ƒ(header, footer) 틀은 μœ μ§€ν•˜κ³  title, content 만 λ³€κ²½

    <!DOCTYPE html>
    <html
      th:fragment="layout (title, content)"
      xmlns:th="http://www.thymeleaf.org"
    >
      <head>
        <title th:replace="${title}">λ ˆμ΄μ•„μ›ƒ 타이틀</title>
      </head>
      <body>
        <h1>λ ˆμ΄μ•„μ›ƒ H1</h1>
        <div th:replace="${content}">
          <p>λ ˆμ΄μ•„μ›ƒ 컨텐츠</p>
        </div>
        <footer>λ ˆμ΄μ•„μ›ƒ ν‘Έν„°</footer>
      </body>
    </html>
  • /resources/templates/template/layoutExtend/layoutExtendMain.html

    • κΈ°λ³Έ λ ˆμ΄μ•„μ›ƒ ν‹€λ‘œ κ΅μ²΄ν•˜λŠ”λ° ν•˜λŠ”λ° title, content λŠ” 전달

    <!DOCTYPE html>
    <html
      th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title}, ~{::section})}"
      xmlns:th="http://www.thymeleaf.org"
    >
      <head>
        <title>메인 νŽ˜μ΄μ§€ 타이틀</title>
      </head>
      <body>
        <section>
          <p>메인 νŽ˜μ΄μ§€ 컨텐츠</p>
          <div>메인 νŽ˜μ΄μ§€ 포함 λ‚΄μš©</div>
        </section>
      </body>
    </html>

Form

μž…λ ₯ 폼 처리

<form action="item.html" th:action th:object="${item}" method="post">
  <div>
    <label for="itemName">μƒν’ˆλͺ…</label>
    <input
      type="text"
      id="itemName"
      th:field="*{itemName}"
      class="formcontrol"
      placeholder="이름을 μž…λ ₯ν•˜μ„Έμš”"
    />
  </div>
</form>
  • th:object : μ»€λ§¨λ“œ 객체λ₯Ό μ§€μ •

  • \*{...} : 선택 λ³€μˆ˜ 식 (th:object μ—μ„œ μ„ νƒν•œ 객체에 μ ‘κ·Ό)

  • th:field : HTML νƒœκ·Έμ˜ id , name , value 속성을 μžλ™μœΌλ‘œ 생성

  • λ Œλ”λ§ μ „/ν›„

    <input type="text" th:field="*{itemName}" />
    <input type="text" id="itemName" name="itemName" th:value="*{itemName}" />

체크 λ°•μŠ€

단일

Register

<div>
  <div class="form-check">
    <input
      type="checkbox"
      id="open"
      th:field="*{open}"
      class="form-checkinput"
    />
    <label for="open" class="form-check-label">판맀 μ˜€ν”ˆ</label>
  </div>
</div>
  • νƒ€μž„λ¦¬ν”„κ°€ μžλ™μœΌλ‘œ <input type="hidden" name="_open" value="on"/> 생성

    • 체크 λ°•μŠ€λ₯Ό 체크할 경우 on 을 μ „λ‹¬ν•˜μ§€λ§Œ, μ²΄ν¬ν•˜μ§€ μ•Šμ„ 경우 κ°’ 자체λ₯Ό μ „λ‹¬ν•˜μ§€ μ•ŠμŒ -> 이 경우 hidden type 의 _name input νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜κ²Œ 되면, false 둜 값을 전달 (_open=on)

View

<div>
  <div class="form-check">
    <input
      type="checkbox"
      id="open"
      th:field="${item.open}"
      class="form-check-input"
      disabled
    />
    <label for="open" class="form-check-label">판맀 μ˜€ν”ˆ</label>
  </div>
</div>

λ©€ν‹°

(μ°Έκ³ ) @ModelAttribute λ₯Ό μ‚¬μš©ν•˜λ©΄ ν•΄λ‹Ή Controller 호좜 μ‹œ regions() μ—μ„œ λ°˜ν™˜ν•œ 값이 μžλ™μœΌλ‘œ Model에 항상 λ‹΄κΈ°κ²Œ 됨

@ModelAttribute("regions")
public Map<String, String> regions() {
    Map<String, String> regions = new LinkedHashMap<>();
    regions.put("SEOUL", "μ„œμšΈ");
    regions.put("BUSAN", "λΆ€μ‚°");
    regions.put("JEJU", "제주");
    return regions;
}

Register

<div th:each="region : ${regions}" class="form-check form-check-inline">
  <input
    type="checkbox"
    th:field="*{regions}"
    th:value="${region.key}"
    class="form-check-input"
  />
  <label
    th:for="${#ids.prev('regions')}"
    th:text="${region.value}"
    class="form-check-label"
    >μ„œμšΈ</label
  >
</div>
  • νƒ€μž„λ¦¬ν”„λŠ” each둜 μ²΄ν¬λ°•μŠ€ 생성 μ‹œ λ™μ μœΌλ‘œ id에 μˆœλ²ˆμ„ 맀겨쀀닀. #idsλŠ” λ™μ μœΌλ‘œ μƒμ„±λœ idλ₯Ό 인식

  • result

    <input
      type="checkbox"
      value="SEOUL"
      class="form-check-input"
      id="regions1"
      name="regions"
    />
    <input
      type="checkbox"
      value="BUSAN"
      class="form-check-input"
      id="regions2"
      name="regions"
    />
    <input
      type="checkbox"
      value="JEJU"
      class="form-check-input"
      id="regions3"
      name="regions"
    />

View

<div th:each="region : ${regions}" class="form-check form-check-inline">
  <input
    type="checkbox"
    th:field="${item.regions}"
    th:value="${region.key}"
    class="form-check-input"
    disabled
  />
  <label
    th:for="${#ids.prev('regions')}"
    th:text="${region.value}"
    class="form-check-label"
    >μ„œμšΈ</label
  >
</div>
  • νƒ€μž„λ¦¬ν”„λŠ” th:field에 μ§€μ •ν•œ κ°’κ³Ό th:value의 값을 λΉ„κ΅ν•΄μ„œ 체크λ₯Ό μžλ™μœΌλ‘œ 처리

λΌλ””μ˜€ λ²„νŠΌ

public enum ItemType {

    BOOK("λ„μ„œ"), FOOD("μ‹ν’ˆ"), ETC("기타"); // NAME(description)

    private final String description;

    ItemType(String description) {
        this.description = description;
    }

    public String getDescription() {
        return description;
    }
}
<div th:each="type : ${itemTypes}" class="form-check form-check-inline">
  <input
    type="radio"
    th:field="*{itemType}"
    th:value="${type.name()}"
    class="form-check-input"
  />
  <label
    th:for="${#ids.prev('itemType')}"
    th:text="${type.description}"
    class="form-check-label"
  >
    BOOK
  </label>
</div>
  • λΌλ””μ˜€ λ²„νŠΌμ€ 항상 ν•˜λ‚˜μ˜ 값이 μ„ νƒλ˜μ–΄μ•Ό ν•˜λ―€λ‘œ νžˆλ“  λ²„νŠΌμ„ λ”°λ‘œ μƒμ„±ν•˜μ§€ μ•ŠμŒ.

μ…€λ ‰νŠΈ λ°•μŠ€

Register

<select th:field="*{deliveryCode}" class="form-select">
  <option value="">==배솑 방식 선택==</option>
  <option
    th:each="deliveryCode : ${deliveryCodes}"
    th:value="${deliveryCode.code}"
    th:text="${deliveryCode.displayName}"
  >
    FAST
  </option>
</select>

Reference

Last updated 1 year ago

errors?. 은 errors κ°€ null μΌλ•Œ NullPointerException λŒ€μ‹ , null 을 λ°˜ν™˜ν•˜λŠ” 문법

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax
μ°Έκ³ 
νƒ€μž„λ¦¬ν”„ μœ ν‹Έλ¦¬ν‹° 객체
μœ ν‹Έλ¦¬ν‹° 객체 μ˜ˆμ‹œ
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#link-urls
곡식 μ‚¬μ΄νŠΈ
곡식 메뉴얼 - κΈ°λ³Έ κΈ°λŠ₯
곡식 메뉴얼 - μŠ€ν”„λ§ 톡합