๐ŸŒธ [SPRING BOOT] | Thymeleaf .zip

0
post-thumbnail

  • ์ด ๊ธ€์˜ ์‚ฌ์ง„์€ ๋ชจ๋‘ ๋„๋น„๋ž‘๋‹˜์˜ [Spring ํ”„๋กœ์ ํŠธ] Spring Boot์—์„œ ํƒ€์ž„๋ฆฌํ”„(Thymeleaf) ์‚ฌ์šฉํ•˜๊ธฐ๊ธ€์—์„œ ์บก์ณํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ง€์‹๊ณผ ๊ฟ€ํŒ์ด ๋„˜์น˜๋Š” "๋„๋น„์˜ ๋ธ”๋กœ๊ทธ" ๋ฐฉ๋ฌธํ•˜๊ธฐ
"[Spring ํ”„๋กœ์ ํŠธ] Spring Boot์—์„œ ํƒ€์ž„๋ฆฌํ”„(Thymeleaf) ์‚ฌ์šฉํ•˜๊ธฐ" ๊ธ€ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ


  • ์ด ๊ธ€์˜ th:replace์„ค๋ช…์€ ๋ชจ๋‘ MHLab๋‹˜์˜ Thymeleaf์—์„œ ํ…œํ”Œ๋ฆฟ ํ˜•์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ(With thymeleaf-layout-dialect)๊ธ€์—์„œ ๊ฐ€์ ธ์˜จ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ง€์‹๊ณผ ๊ฟ€ํŒ์ด ๋„˜์น˜๋Š” "MHLab์˜ ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ" ๋ฐฉ๋ฌธํ•˜๊ธฐ

"Thymeleaf์—์„œ ํ…œํ”Œ๋ฆฟ ํ˜•์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ(With thymeleaf-layout-dialect)" ๊ธ€ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ


๐Ÿ”น Thymeleaf Simple expressions

โœ… Variable Expressions: ${...}

โœ… Selection Variable Expressions: *{...}

โœ… Message Expressions: #{...}

๐Ÿ”น ํƒ€์ž„๋ฆฌํ”„ ์ฃผ์š” ์‹ ์„ค๋ช…

์Šคํฌ๋ฆฐ์ƒท(31)
์Šคํฌ๋ฆฐ์ƒท(32)
์Šคํฌ๋ฆฐ์ƒท(33)

๐Ÿ”น th:replace

  • th:replace ์†์„ฑ์„ ํ†ตํ•ด ๊ฐ ๋ถ€๋ถ„์— ๋Œ€ํ•œ ๊ณตํ†ต ๋ ˆ์ด์•„์›ƒ์„ ์žฌ์ •์˜
  • ํ•ด๋‹น ์†์„ฑ์ด ์„ ์–ธ๋œ html ํƒœ๊ทธ๋ฅผ replace์— ์ •์˜๋œ ๋‹ค๋ฅธ html ํŒŒ์ผ๋กœ ์น˜ํ™˜ํ•˜๋Š” ๊ฒƒ์œผ๋กœ jsp์˜ include์™€ ๋น„์Šทํ•œ ๋™์ž‘์„ ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • th:replace ์†์„ฑ์˜ ๊ฒฝ๋กœ๋Š” Spring-boot์˜ ๊ธฐ๋ณธ ๊ฒฝ๋กœ์ธ templates ํ•˜์œ„์— ์ •์˜ํ•œ ๊ฒฝ๋กœ๋ฅผ ์ž‘์„ฑ ํ›„ :: ๋’ค์—๋Š” ์•„๋ž˜์—์„œ ์†Œ๊ฐœํ•  fragment์†์„ฑ์˜ ์ด๋ฆ„์„ ์ ์–ด์ค๋‹ˆ๋‹ค.
  • th:replace๋Š” fragment ํƒœ๊ทธ๋ฅผ ์ œ์™ธํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

๐Ÿ”น th:attr

    <span id="globalConst" 
          sec:authorize="isAuthenticated()" 
          th:with="auth=${#authentication.getPrincipal().getUser()}"
          th:attr="data-iuser=${auth.iuser}, 
                   data-writer=${auth.nm}, 
                   data-writer-profile=${auth.mainProfile}"></span>
  • th:attr="data-iuser=${auth.iuser}, data-writer=${auth.nm}, data-writer-profile=${auth.mainProfile}"
  • html์˜ ์š”์†Œ data-ooo์˜ ๊ฐ’์„ ์„œ๋ฒ„์—์„œ ๋ฐ›์€ model๊ฐ’์œผ๋กœ ํ•œ๊ฐœ ~ ์—ฌ๋Ÿฌ๊ฐœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค .

๐Ÿ”น th:class

<p th:class="${isAdmin} ? admin-class : user-class ">
   Some Text 2
</p>

๐Ÿ‘‡

<p class="admin-class">
   Some Text 2
</p>

๐Ÿ”น th:classappend

<p class ="base-class" th:classappend="${isAdmin} ? admin-class : user-class">
    Some Text 1
</p>

๐Ÿ‘‡

<p class ="base-class admin-class">
   Some Text 1
</p>
profile
๋ช‡ ๋ฒˆ์„ ๋„˜์–ด์ ธ๋„ ์•ž์œผ๋กœ ๊ณ„์† ๋‚˜์•„๊ฐ€์ž

0๊ฐœ์˜ ๋Œ“๊ธ€