🔷 자바스크립트 인라인
<script th:inline="javascript"> var username = [[${user.username}]]; var age = [[${user.age}]]; //자바스크립트 내추럴 템플릿 var username2 = /*[[${user.username}]]*/ "test username"; //객체 var user = [[${user}]]; // each [# th:each="user, stat : ${userList}"] var user[[${stat.count}]] =[[${user}]]; [/] </script>🔸텍스트 렌더링 시
인라인 사용 전 : var username = userA; (렌더링 후 변수 이름이 그대로 남아있음)
인라인 사용 후 : var username = "userA";(변수 명이 아닌 "userA"라는 문자로 렌더링 됨)🔸 자바스크립트 내츄럴 템플릿
타임리프는 HTML파일을 직접 열어도 동작한다. -> 인라인 기능을 사용, 주석을 활용할 수 있다.
인라인 사용 전 : var username2 = /userA/ "test username"; (렌더링 내용이 주석처리 되면서 그래돌 해석됨)
인라인 사용 후 : var username2 = "userA"; (주석이 사라지고 "userA"가 적용됨)🔸 객체
객체를 JSON으로 자동 변환해준다.
인라인 사용 전 : var user = BasicController.User(username=userA, age=10); (toString()으로 호출된 값)
인라인 사용 후 : var user = {"username":"userA", "age":10};
🔷 템플릿
🔸 웹페이지에서 사용하는 공통영역들을 복사해서 사용하는 것은 상당히 비효율적인 일이다.
➡️ 템플릿 조각, 레이아웃 기능을 사용하면 편리하고 효율적으로 작업할 수 있다.<footer th:fragment="copy"> 이곳은 footer자리 </footer> <footer th:fragment="copyParam(param1, param2)"> <p>파라미터</p> <p th:text="${param1}"></p> <p th:text="${param2}"></p> </footer>
🔹 템플릿 조각
<h2>부분포함 insert</h2> <div th:insert="~{template/fragment/footer :: copy}"></div> // 현재 div태그 안에 추가된다. <h2>부분포함 replace</h2> <div th:replace="~{template/fragment/footer :: copy}"></div> // div태그를 대체한다.(div태그 사라짐) <h2>부분포함 단순표현식</h2> <div th:replace="template/fragment/footer :: copy"></div> <h2>파라미터 사용</h2> <div th:replace="~{template/fragment/footer :: copyParam('data1', 'data2')}"> </div> // 파라미터를 통해 동적으로 렌더링할 수 있다.
🔹 템플릿 레이아웃
🔸 템플릿 조각은 코드 일부를 가지고 와서 사용하는 것이라면, 코드조각을 레이아웃에 넘겨서 사용하는 방법이다.
--- base --- <head th:fragment="common_header(title, links)"> <meta charset="UTF-8"> <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}"/> --- Main --- <head th:replace="template/layout/base :: common_header(~{::title}, ~{::link})"> // ::title : 현재 페이지의 title태그들을 전달, ::link : 현재 페이지의 link태그들을 전달 <meta charset="UTF-8"> <title>메인 타이틀</title> <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"> <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}"> </head> <body> 메인 컨텐츠 </body>결과
<!DOCTYPE html> <html> <head> <title>메인 타이틀</title> <!-- 공통 --> <link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css"> <link rel="shortcut icon" href="/images/favicon.ico"> <script type="text/javascript" src="/sh/scripts/codebase.js"></script> <!-- 추가 --> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/themes/smoothness/jquery-ui.css"> </head> <body> 메인 컨텐츠 </body> </html>➡️ 공통부분은 유지, 추가로 전달한 link태그들이 포함되었다.
➡️ 더 확장한다면 만이 아니라 전체에 적용할 수도 있다.
백견이 불여일타