정적인 html 을 동적 html 둜 λ°”κΏ”λ³΄μž  

 

 

νƒ€μž„λ¦¬ν”„λŠ” 순수 HTML νŒŒμΌμ„ μ›Ή λΈŒλΌμš°μ €μ—μ„œ 열어도 λ‚΄μš©μ„ 확인할 수 있고, 

 

μ„œλ²„λ₯Ό 톡해 λ·° ν…œν”Œλ¦Ώμ„ κ±°μΉ˜λ©΄ λ™μ μœΌλ‘œ λ³€κ²½λœ κ²°κ³Όλ₯Ό 확인할 수 μžˆλ‹€.

 

순수 HTML을 κ·ΈλŒ€λ‘œ μœ μ§€ν•˜λ©΄μ„œ λ·° ν…œν”Œλ¦Ώλ„ μ‚¬μš©ν•  수 μžˆλŠ” νƒ€μž„λ¦¬ν”„μ˜ νŠΉμ§•μ„ λ„€μΈ„λŸ΄ ν…œν”Œλ¦Ώ

 

 

νƒ€μž„λ¦¬ν”„ κ°„λ‹¨νžˆ μ•Œμ•„λ³΄κΈ°

 

 

 

νƒ€μž„λ¦¬ν”„ μ‚¬μš© μ„ μ–Έ 

<html xmlns:th="http://www.thymeleaf.org">

 

 

속성 λ³€κ²½ - th:href

<link th:href="@{/css/bootstrap.min.css}"
        href="../css/bootstrap.min.css" rel="stylesheet">

 

λ·° ν…œν”Œλ¦Ώμ„ 거치면 th:href 의 값이 href 둜 λŒ€μ²΄λ˜λ©΄μ„œ λ™μ μœΌλ‘œ λ³€κ²½ν•  수 μžˆλ‹€.

 

λŒ€λΆ€λΆ„μ˜ HTML 속성을 th:xxx 둜 λ³€κ²½ν•  수 μžˆλ‹€.

 

 

 

 

 

μƒν’ˆ λͺ©λ‘ νŽ˜μ΄μ§€ 

 

 

μƒν’ˆ 등둝 λ²„νŠΌ html

<button class="btn btn-primary float-end" 
        onclick="location.href='addForm.html'" type="button">μƒν’ˆ 등둝</button>

 

 

 

λ²„νŠΌ ν΄λ¦­μ‹œ 정적 html -> addForm.html

 

 

 

 

속성 λ³€κ²½ - th:onclick

onclick="location.href='addForm.html'"
th:onclick="|location.href='@{/basic/items/add}'|"

 

 

 

λ¦¬ν„°λŸ΄ λŒ€μ²΄ - |...|

 

κ·Έλƒ₯ μ‚¬μš©ν•˜λ©΄ λ¬Έμžμ™€ ν‘œν˜„μ‹μ„ 각각 λ”°λ‘œ λ”ν•΄μ„œ μ‚¬μš©ν•΄μ•Ό ν•˜λ―€λ‘œ λ‹€μŒκ³Ό 같이 λ³΅μž‘ν•΄μ§„λ‹€

th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''"

 

 

λ¦¬ν„°λŸ΄ λŒ€μ²΄ 문법을 μ‚¬μš©ν•˜λ©΄, λ”ν•˜κΈ° 없이 νŽΈλ¦¬ν•˜κ²Œ μ‚¬μš©ν•  수 μžˆλ‹€.

th:onclick="|location.href='@{/basic/items/add}'|"

 

 

μƒν’ˆ 등둝 폼으둜 이동

basic/items/add

 

 

 

반볡 좜λ ₯ - th:each

<tr th:each="item : ${items}">

 

λͺ¨λΈμ— μžˆλŠ” items λ₯Ό κΊΌλ‚΄μ„œ item 에 λ„£μ–΄μ€Œ 

 

item λ³€μˆ˜μ— ν•˜λ‚˜μ”© ν¬ν•¨λ˜κ³ , 반볡문 μ•ˆμ—μ„œ item λ³€μˆ˜λ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.

 

 

 

λ³€μˆ˜ ν‘œν˜„μ‹ - ${...}

<td th:text="${item.price}">10000</td>

 

λͺ¨λΈμ— ν¬ν•¨λœ κ°’μ΄λ‚˜, νƒ€μž„λ¦¬ν”„ λ³€μˆ˜λ‘œ μ„ μ–Έν•œ 값을 μ‘°νšŒν•  수 μžˆλ‹€.

 

ν”„λ‘œνΌν‹° 접근법을 μ‚¬μš©ν•œλ‹€. ( item.getPrice() )

 

 

 

 

λ‚΄μš© λ³€κ²½ - th:text

<td th:text="${item.price}">10000</td>

 

λ‚΄μš©μ˜ 값을 th:text 의 κ°’μœΌλ‘œ λ³€κ²½ν•œλ‹€.


μ—¬κΈ°μ„œλŠ” 10000을 ${item.price} 의 κ°’μœΌλ‘œ λ³€κ²½ν•œλ‹€.

 

 

 

 

URL 링크 ν‘œν˜„μ‹2 - @{...}

th:href="@{|/basic/items/${item.id}|}"


URL 링크 ν‘œν˜„μ‹μ„ μ‚¬μš©ν•˜λ©΄ 경둜λ₯Ό ν…œν”Œλ¦Ώμ²˜λŸΌ νŽΈλ¦¬ν•˜κ²Œ μ‚¬μš©ν•  수 μžˆλ‹€.


경둜 λ³€μˆ˜( {itemId} ) 뿐만 μ•„λ‹ˆλΌ 쿼리 νŒŒλΌλ―Έν„°λ„ μƒμ„±ν•œλ‹€.

 


예)

th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"

 

생성 링크: http://localhost:8080/basic/items/1?query=test

 

 

 

 

th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
th:onclick="|location.href='@{|/basic/items/${item.id}/edit|}'|"

 

λ§ν¬ν‘œν˜„μ‹μ„ μ•ˆμ—λ„ λ¦¬ν„°λŸ΄ ν‘œκΈ°λ₯Ό μΆ”κ°€ν•΄μ£Όμ–΄μ•Ό ν•©λ‹ˆλ‹€.

 

즉, th:onclick, location.href 각각에 λ¦¬ν„°λŸ΄ ν‘œκΈ°κ°€ ν•„μš”ν•©λ‹ˆλ‹€.

 

 

 

 

 

 

 

 

 

 

 

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-1/dashboard

 

μŠ€ν”„λ§ MVC 1편 - λ°±μ—”λ“œ μ›Ή 개발 핡심 기술 - μΈν”„λŸ° | κ°•μ˜

μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ°œλ°œν•  λ•Œ ν•„μš”ν•œ λͺ¨λ“  μ›Ή κΈ°μˆ μ„ κΈ°μ΄ˆλΆ€ν„° μ΄ν•΄ν•˜κ³ , μ™„μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μŠ€ν”„λ§ MVC의 핡심 원리와 ꡬ쑰λ₯Ό μ΄ν•΄ν•˜κ³ , 더 κΉŠμ΄μžˆλŠ” λ°±μ—”λ“œ 개발자둜 μ„±μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€., -

www.inflearn.com

 

μ €μž‘μžν‘œμ‹œ (μƒˆμ°½μ—΄λ¦Ό)

'Spring > Spring MVC' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[μŠ€ν”„λ§ MVC] - 18. Redirect / Post -> Redirect -> Get  (1) 2023.02.18
[μŠ€ν”„λ§ MVC] - 17. @ModelAttribute / redirect  (0) 2023.02.18
[μŠ€ν”„λ§ MVC] - 15. HTTP 응닡 / HttpMessageConverter / ArgumentResolver  (0) 2023.02.17
[μŠ€ν”„λ§ MVC] - 14. HTTP message body λ₯Ό ν†΅ν•œ 데이터 μš”μ²­  (0) 2023.02.16
[μŠ€ν”„λ§ MVC] - 13. μš”μ²­ 맀핑 / μš”μ²­ νŒŒλΌλ―Έν„°  (0) 2023.02.16

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”