<![CDATA[
<p><span style="color: #000000;" data-ke-size="size16"><span style="background-color: #ffffff;">Thymeleaf는 View Template Engine으로 JSP, Freemarked와 같이 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 한다. </span></span><span style="color: #000000;" data-ke-size="size16"><span style="background-color: #ffffff;">Thymeleaf는 웹 뿐만 아니라 다른 환경을 위한 최신의 서버-사이드 자바 Template Engine이며, HTML, CSS, XM, JS 및 Text까지  포함한다. Thymeleaf의 목표는 유지관리가 쉬운 템플릿 생성 방법을 제공하는 것이며, 실제로 템플릿에 영향을 주지 않는 (HTML의 구조 유지)방식을 사용한다. 즉, Natural Templates 개념을 기반으로 한다. <br><span style="color: #000000; background-color: #ffffff;" data-ke-size="size16">Thymeleaf</span>의 주 목표는 템플릿을 만들 때 유지관리가 쉽도록 하는 것이다. 이를 위해 디자인 프로토타입으로 사용되는 템플릿에 영향을 미치지 않는 방식인 Natural Templates을 기반으로 한다. Natural Templates은 기존 HTML 코드와 구조를 변경하지 않고 덧붙이는 방식이다. <br><br>Thymeleaf의 장점 <br> - 코드를 변경하지 않기 때문에 디자인 팀과 개발 팀 간의 협업이 쉽다. <br> - JSP와 달리 Servlet Code로 변환되지 않기 때문에 비즈니스 로직과 분리되어 View에 집중할 수 있다. <br> - 서버상에서 동작하지 않기 때문에 서버없이 화면을 확인할 수 있다. 그래서 더미 데이터를 넣고 화면 디자인 및 테스트에 용이하다.</span></span></p><p> </p><p><span style="color: #000000;" data-ke-size="size16"><span style="background-color: #ffffff;">* Thymeleaf에서</span> 자주 사용하는 문법. 대부분의 html 속성을 <span style="background-color: #dddddd;"> th:예약어 </span>로 변경할 수 있다.  </span><b></b> <br><html lang="en" xmlns:th="<a href="http://www.thymeleaf.org" target="_blank" class="ke-link">http://www.thymeleaf.org</a>"> <br>  : 타임리프의 th 속성을 사용하기 위해 선언된 네임스페이스이다. <br><br>th:text <br>  : 타임리프는 ${} 표현식을 사용하여 자바 컨트롤러에서 전달받은 데이터에 접근할 수 있다. <br>  : text 속성은 일반적인 텍스트 형식으로 데이터를 화면에 출력한다.</p><p>  : <div th:text="${data}"></div><br><br>th:if, th:unless <br>  : th:if는 if 문과 동일하고, th:unless는 else 문과 같다고 볼 수 있다.</p><p>   : <span th:if="${userNum} == 1"></span>  <br>     <span th:unless="${userNum} == 2"></span></p><p> </p><p>th:switch, th:case <br>  : <th:block th:switch="${num}">  <br>        <span th:case="1">처리1</span>  <br>        <span th:case="2">처리2</span>  <br>    </th:block> <br>  : switch case문으로 제어할 태그를 th:block으로 설정하고 그 안에 코드를 작성한다. <br>  : num라는 변수의 값이 1이거나 2일때 동작한다.</p><p><br>th:each <br> : 컬렉션 객체를 반복처리 한다. 자바의 forEach와 유사한 기능이다.</p><p> : <li <span style="color: #333333; background-color: #f9f9f9;" data-ke-size="size16">th:each="article : ${articleList}"></li></span><br><br>th:fragment <br>  : <head>태그에 해당 속성을 사용해서 fragment의 이름을 지정한다. <br>  : fragment는 다른 HTML에서 include 또는 replace 속성을 사용해서 적용할 수 있다.</p><p>  : <footer th:fragment="footer"><p>바닥글</p></footer><br><br>th:block <br>  : 영역을 지정해서 명령을 주는 기능이다. 해당 기능은 동적인 처리가 필요할 때 사용된다.</p><p>  :  <th:block th:fragment="footer"><br><br>th:replace <br>  : JSP의 <include> 태그와 유사한 속성이다. <br>  : th:fragment을 통해 설정한 이름을 찾아 해당 코드로 치환한다. <br>  : <div th:replace="~{/common/footer :: footer}"></div>  </p><p><br>th:href <br>  : <a> 태그의 href 속성과 동일한 기능을 수행한다. <br>  : 웹 애플리케이션을 구분하는 Context Path를 포함한다.</p><p>  : <a th:href="@{/boardlist?id=${id}}">go</a></p><p>  : <span style="color: #333333; background-color: #ffffff;" data-ke-size="size16"><a </span><span style="color: #333333; background-color: #f9f9f9;" data-ke-size="size16">th:href="@{/boardlist(id= ${id})}">go</a></span><br><br>th:action <br>  : <form> 태그 사용시 해당 경로로 요청을 보낼 때 사용한다. <br><br>th:object <br>  : 컬렉션 객체 데이터를 th:object에 설정해둔 객체로 받아들인다. <br>  : 즉, 컨트롤러와 뷰(화면) 사이의 DTO클래스의 객체이다.</p><p> </p><p>th:field <br>  : 위의 th:object 속성을 이용하면, th:field를 이용해서 HTML 태그에 멤버 변수를 매핑 할 수 있다. <br>  : th:field을 이용한 사용자 입력 필드(input, textarea 등)는 id, name, value 속성 값이 자동으로 매핑된다. <br>  : 그러므로 각 속성을 따로 지정할 필요가 없다. th:field는 ${}표현식이 아닌, *{}표현식을 사용한다. <br>  : th:object와 th:field는 컨트롤러에서 특정 클래스의 객체를 전달 받은 경우에만 사용 가능하다.</p><p><br>th:field <br>  : 위의 th:object 속성을 이용하면, th:field를 이용해서 HTML 태그에 멤버 변수를 매핑 할 수 있다. <br>  : th:field을 이용한 사용자 입력 필드(input, textarea 등)는 id, name, value 속성 값이 자동으로 매핑된다. <br>  : 그렇기에, 각 속성을 따로 지정할 필요가 없다. th:field는 ${}표현식이 아닌, *{}표현식을 사용한다. <br>  : th:object와 th:field는 컨트롤러에서 특정 클래스의 객체를 전달 받은 경우에만 사용 가능하다. <br><br>th:checked <br>  : checkbox의 경우, th:checked 속성을 이용해서 조건이 "true"에 해당하면, checked 속성을 적용한다. <br><br>th:inline="javascript" <br>  : <script> 태그에 th:inline 속성을 javascript로 지정한 후 자바스크립트를 사용할 수 있다. <br><br></p><p>th:with="${}" <br>  : 변수형태의 값을 재정의하는 속성이다. 즉, th:with를 이용하여 새로운 변수값을 생성할 수 있다. <br>  : <div th:with=”userId=${number}” th:text=”${usesrId}”> <br><br>th:value="${}" <br>  : input의 value에 값을 삽입할 때 사용한다. 여러 개의 값을 넣을 땐 + 기호를 사용한다. <br>  : <input type="text" id="userId" th:value="${userId} + '의 이름 ${userName}"/> <br><br>#numbers.sequest(start, end, step) <br>  : 타임리프는 #numbers라는 숫자 포맷 메소드를 지원한다. #numbers에는 다양한 메소드가 있는데 가장 많이 사용하는 것이 #numbers.sequece이다. #numbers.sequece 메소드는 start, end, step을 이용하여 원하는 범위에 대해 시퀀스를 생성해준다.</p><p> </p><p> </p><p>참고 : <b>Thymeleaf</b>에서 a 태그를 작성할 때는 th:href="@{ }" 을 이용하여 작성한다.<br>🏃‍♀️ 특정 url로 이동 : <a th:href="@{https://localhost/detail}">상세보기</a><br>🏃‍♀️ 현재 서버 내에서 이동 : <a th:href="@{/board/list}">게시글 목록</a><br>🏃‍♀️ 파라미터를 넘길 시 : <a th:href="@{/board/view(id = ${board.id})}">상세보기</a><br>🏃‍♀️ 파라미터를 여러 개 넘길 시 : <a th:href="@{/board/view(id = ${board.id}, writer = ${board.writer}})}">상세보기</a><br>🏃‍♀️ PathVariable 사용 시 : <a th:href="@{/board/view/{id}(id = ${board.id})}">상세보기</a></p><p> </p><p> </p><p>참고 : <b>Thymeleaf</b> 문법 중 변수 및 메세지 표현 방식의 이해</p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 88.6789%;" border="1" data-ke-style="style12"><tbody><tr><td style="width: 14.6099%; text-align: center;">표현</td><td style="width: 36.4539%; text-align: center;">설   명</td><td style="width: 48.7943%; text-align: center;">예    제</td></tr><tr><td style="width: 14.6099%; text-align: center;">@{ ... }</td><td style="width: 36.4539%;">URL 링크 표현식</td><td style="width: 48.7943%;">th:href="@{/css/bootstrap.min.css}"<br>th:href="@{/{itemId}/edit(itemId=${item.id})}"</td></tr><tr><td style="width: 14.6099%; text-align: center;">| ... |</td><td style="width: 36.4539%;">literal 대체</td><td style="width: 48.7943%;">th:text="|Hello ${user.name}!|"<br>(= th:text="'Hello '+${user.name}+'!'"</td></tr><tr><td style="width: 14.6099%; text-align: center;">${ ... }</td><td style="width: 36.4539%;">변수</td><td style="width: 48.7943%;">th:text=${user.name}</td></tr><tr><td style="width: 14.6099%; text-align: center;">*{ ... }</td><td style="width: 36.4539%;">선택 변수</td><td style="width: 48.7943%;"><tr th:object="${items}"><br>  <td th:text="*{price}">5000</td><br></tr></td></tr><tr><td style="width: 14.6099%; text-align: center;">#{ ... }</td><td style="width: 36.4539%;">메시지.<br>properties 같은 외부 자원에서 코드에 해당하는 문자열 get.</td><td style="width: 48.7943%;">th:text="#{member.name}"</td></tr></tbody></table></div><p> </p><p> </p><p><span style="color: #5733b1; background-color: #f6e199;">참고 : Thymeleaf로 Javascript 적용 예  ~~~~~~~~~~~~~~</span></p><p style="text-align: start;">--- Controller 파일 내용 <br>@GetMapping("/hello")<br>public String abc(Model model) {<br>  model.addAttribute("msg", "자바스크립트 적용");<br>  return "/kbs";<br>}<br><br>--- kbs.html 파일 내용 <br><head><br><meta charset="UTF-8"><br><title>Insert title here</title><br><th:block th:layout:fragment="script"><br>  <script th:inline="javascript"><br>   let aa = [[${msg}]];<br>   alert(‎aa);<br>  </script><br></th:block><br></head></p><p style="text-align: start;"> </p><p style="text-align: start;"><span style="color: #8a3db6; background-color: #f6e199;">참고 : Thymeleaf에서 javascript 함수에 값 전달하는 방법 예 ~~~~~~~~~~~~~~~~</span><br><a th:xxxxonclick="|xxxxjavascript:page('${pageNum}')|">함수 호출</a>​ 이렇게 th:xxxxonclick과 함께 작성하면 된다.<br>또는 <br><a th:href="|xxxxjavascript:func('${pageNum}')|">함수 호출</a>​ 이렇게 a tag의 고유 클릭 이벤트를 사용해도 된다.<br><br>func는 javascript 함수의 이름이다.<br><script type="text/javascript"><br>    function func(no) {<br>        alert(‎no);<br>        let pageNo = no;<br>        location.href="http://localhost:80/list?page="+pageNo;<br>    }<br></script></p><p style="text-align: start;"> </p><p style="text-align: start;"><span style="color: #8a3db6; background-color: #f6e199;">참고 : <b>Thymeleaf</b>에서 Javascript를 사용하는 경우에 반복문 기술 방법</span><br>        let articleArr = new Array();<br>        let article = new Object();<br> <br>        /*[# th:each="article : ${articleList}"]*/<br>        article.id =  /*[[${article.id}]]*/;<br>        article.title =  /*[[${article.title}]]*/;<br>        article.cont =  /*[[${article.cont}]]*/;<br>        articleArr.push(article);<br>        /*[/]*/<br> </p><p style="text-align: start;"> </p><p style="text-align: start;"><span style="color: #333333; background-color: #a6bc00;">참고 : Thymeleaf로 css 적용 예  <span style="background-color: #a6bc00;" data-ke-size="size16"> ~~~~~~~~~~~~~~</span></span></p><p style="text-align: start;"><body><br>  어쩌구...<br>  <!-- 사용자 CSS 추가 --><br>  <th:block th:layout:fragment="css"><br>    <style><br>       #cont{ font-size: 24pt; }<br>    </style><br>  </th:block><br><br>  <div id="cont">바디영역</div><br>  어쩌구...<br></body></p><p style="text-align: start;"> </p><p style="text-align: start;"> </p><p style="text-align: start;"><span style="color: #333333; background-color: #a6bc00;" data-ke-size="size16">참고 : 스타일시트 파일 작성 후 css 적용 예  </span><span style="background-color: #a6bc00;" data-ke-size="size16"> ~~~~~</span></p><p style="text-align: start;">스타일시트 파일은 static 폴더에 저장한다. style.css의 내용은 다음과 같다. <br>파일명 위치 : /프로젝트명/src/main/resources/static/style.css <br><br>input[type=submit] { margin-top:10px; } <br>textarea { width:100%; }</p><div class="figure-img" data-ke-type="image" data-ke-style="alignLeft" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/ygGb/d084d57db425b8e42a81516c06b1217e1b4a080c" class="txc-image" width="196" height="136" data-img-src="https://t1.daumcdn.net/cafeattach/ygGb/d084d57db425b8e42a81516c06b1217e1b4a080c" data-origin-width="216" data-origin-height="150"></div><p style="text-align: start;">---템플릿에 스타일 적용하기--- <br>파일명: /sbb/src/main/resources/templates/list.html <br><br><link rel="stylesheet" type="text/css" th:href="@{/style.css}"> <br><br><h1>스타일 적용하기</h1> <br><form th:action="@{|/product/detail/${product.id}|}" method="post"> <br>    <input type="text" name="name" id="name"> <br>    <textarea name="content" id="content" rows="5" cols="100"></textarea> <br>    <input type="submit" value="등록"> <br></form> <br>템플릿 상단에 style.css를 사용할수 있는 링크를 추가했다. <br>static 폴더가 리소스의 root이기 때문에 th:href="@{/style.css}"로 사용해야 한다.</p><p style="text-align: start;"> </p><p style="text-align: start;"> </p><p style="text-align: start;"><span style="color: #333333; background-color: #a6bc00;" data-ke-size="size16">참고 : Bootstrap으로 스타일 적용 예  </span><span style="background-color: #a6bc00;" data-ke-size="size16"> ~~~~~~~~~~</span></p><div class="figure-img" data-ke-type="image" data-ke-style="alignLeft" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/ygGb/eb61860e77b99606b7e6a79160cb317cbd95c5e6" class="txc-image" width="180" height="140" data-img-src="https://t1.daumcdn.net/cafeattach/ygGb/eb61860e77b99606b7e6a79160cb317cbd95c5e6" data-origin-width="218" data-origin-height="169"></div><p style="text-align: start;"><link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}"></p><p style="text-align: start;"><div class="container my-3"> <br>    <table class="table"> <br>        <thead class="table-dark"> <br>            <tr> <br>                <th>번호</th><th>이름</th><th>등록일시</th> <br>            </tr> <br>        </thead> <br>        <tbody> <br>            <tr th:each="product, loop : ${productList}"> <br>                <td th:text="${loop.count}"></td> <br>                <td> <br>                    <a th:href="@{|/product/detail/${product.id}|}" th:text="${product.subject}"></a> <br>                </td> <br>                <td th:text="${#temporals.format(product.createDate, 'yyyy-MM-dd HH:mm')}"></td> <br>            </tr> <br>        </tbody> <br>    </table> <br></div><br>날짜 및 시간를 보기 좋게 출력하기 위해 타임리프의 #temporals.format 을 사용할 수 있다.  <br>형식 : #temporals.format(날짜객체, 날짜포맷) - 날짜객체가 포맷에 맞게 변환됨.</p><p style="text-align: start;"> </p><p style="text-align: start;"> </p><p style="text-align: start;"><span style="background-color: #f89009;"><b>타임리프의 템플릿 상속에 대한 이해  ~~~~~~~~~~~</b></span></p><p style="text-align: start;">템플릿 레이아웃 : 여러 템플릿에서 같은 디자인 레이아웃을 적용하는 일반적으로 공통적인 레이아웃을 정의하고 공유하게 된다.</p><div class="figure-img" data-ke-type="image" data-ke-style="alignLeft" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/ygGb/06747cade90284f71721f602cf8e2d8a67e7f622" class="txc-image" width="268" height="92" data-img-src="https://t1.daumcdn.net/cafeattach/ygGb/06747cade90284f71721f602cf8e2d8a67e7f622" data-origin-width="402" data-origin-height="138"></div><p style="text-align: start;">이 때 유효한 라이브러리로 타임리프 레이아웃 다이얼렉트가 있다. </p><p>Dependency 추가 <br>     - spring-boot-starter-thymeleaf  : thymeleaf 뷰 템플릿 엔진 기본 라이브러리<br>     - thymeleaft-layout-dialect : thymeleaf를 이용한 layout 라이브러리</p><p><span style="color: #7f0055;">dependencies</span> {</p><p><span style="color: #000000;">   implementation</span> <span style="color: #2a00ff;">'org.springframework.boot:spring-boot-starter-thymeleaf'</span></p><p><span style="color: #000000;">   implementation</span> <span style="color: #2a00ff;">'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'</span></p><p style="text-align: start;">   ...</p><p style="text-align: start;">하고 <b><span style="color: #ee2323;">해당프로젝트에서 우측 버튼 클릭 후 메뉴에서   Gradle- Refresh Gradle Project를 선택</span></b>한다.</p><p style="text-align: start;"> </p><p style="text-align: start;">예시 코드 <br>HomeController.java <br>@Controller <br>public class HomeController { <br>    @GetMapping("/page1") <br>    public String page1() { <br>        return "page1"; <br>    } <br>    @GetMapping("/page2") <br>    public String page2() { <br>        return "page2"; <br>    } <br>} <br>Controller에 page1, page2를 매핑해 주었다. 이제 page1과 page2에 공통으로 들어갈 템플릿을 만들어 적용할 것이다. <br><br>layout.html <br><!DOCTYPE html> <br><html lang="en"> <br><head> <br>    <meta charset="UTF-8"> <br>    <title>layout</title> <br></head> <br><body> <br><h1>공통으로 들어가는 부분</h1> <br><br><!-- 기본 템플릿 안에 삽입될 내용 Start --> <br><th:block layout:fragment="content"></th:block> <br><!-- 기본 템플릿 안에 삽입될 내용 End --> <br></body> <br></html> <br><br>page1 <br><html layout:decorate="~{layout}"> <br><div layout:fragment="content"> <br>    <h1>page1</h1> <br></div> <br></html> <br><br>page2 <br><html layout:decorate="~{layout}"> <br><div layout:fragment="content"> <br>    <h1>page2</h1> <br></div> <br></html> <br>설명 : page1과 page2의 <html layout:decorate="~{layout}"> 부분에 공통 템플릿인 layout.html이 들어가고, <br>layout.html의 <th:block layout:fragment="content"></th:block>부분에 page1과 page2의 div엘리먼트가 삽입되어 하나의 페이지를 완성시키는 것이다.</p><p style="text-align: start;"> </p><p style="text-align: start;"><a href="https://velog.io/@gimminjae/Thymeleaf-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%83%81%EC%86%8D-%EA%B3%B5%ED%86%B5-%ED%85%9C%ED%94%8C%EB%A6%BF" target="_blank" class="ke-link">https://velog.io/@gimminjae/Thymeleaf-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%83%81%EC%86%8D-%EA%B3%B5%ED%86%B5-%ED%85%9C%ED%94%8C%EB%A6%BF</a></p><p style="text-align: start;"> </p><p style="text-align: start;"> </p><p style="text-align: start;"><span style="color: #000000; background-color: #f3c000;">참고 : session 읽기 예   </span></p><p style="text-align: start;">java 파일에서 </p><p style="text-align: start;">@PostMapping("login") <br>public String login(HttpSession session, @RequestParam("id")String id, @RequestParam("pwd")String pwd){ <br>   if(id.equals("kor") && pwd.equals("111")) { <br>      session.setAttribute("idkey", id); <br>      return "redirect:/list"; <br>   }else { <br>      return "redirect:/err.html"; <br>   } <br>}</p><p style="text-align: start;"> </p><p style="text-align: start;">html 파일에서 </p><p style="text-align: start;"><div th:if="${#session.getAttribute('idkey') == null}"> <br>        <a href="login.html">로그인 하세요</a> <br></div></p><p style="text-align: start;"> </p><p style="text-align: start;"> </p><p style="text-align: start;">Thymeleaf 사용 단편 예제</p><p style="text-align: start;"><a href="https://s-yeonjuu.tistory.com/6" target="_blank" class="ke-link">https://s-yeonjuu.tistory.com/6</a></p><p style="text-align: start;"><a href="https://nomoreft.tistory.com/64" target="_blank" class="ke-link">https://nomoreft.tistory.com/64</a></p><p style="text-align: start;"> </p><p style="text-align: start;">Tutorial: Thymeleaf + Spring</p><p style="text-align: start;"><a href="https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html" target="_blank" class="ke-link">https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html</a></p><p style="text-align: start;"> </p><p style="text-align: start;">* 스프링 부트와 JPA, Thymeleaf를 이용한 게시판 개발<br><a href="https://developer-rooney.tistory.com/153?category=496529" target="_top" class="ke-link">https://developer-rooney.tistory.com/153?category=496529</a></p><p style="text-align: start;"> </p><p style="text-align: start;"><a href="https://github.com/hojunnnnn/board" target="_top" class="ke-link">https://github.com/hojunnnnn/board</a></p><p style="text-align: start;"> </p><p style="text-align: start;"> </p><p style="text-align: start;"> </p>
<!-- -->
]]>
카페 게시글
Spring
Thymeleaf 기본 문법과 활용 방법
ParkYK
추천 1
조회 784
23.04.05 15:13
댓글 0
다음검색
