본 게시물은 스스로의 공부를 위한 글입니다.
틀린 내용이 있을 수 있습니다.
📌자바스크립트 인라인
-
타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
-
자바스크립트 인라인 기능은 다음과 같이 적용하면 된다.
<script th:inline="javascript">
-
텍스트 렌더링
var username = [[${user.username}]];- 인라인 사용 전 ->
var username = userA; - 인라인 사용 후 ->
var username = "userA"; - 렌더링 결과가 문자타입이면 자동으로
""을 포함해준다. - 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다. 예)
"->\"
-
내추럴 템플릿
- 주석을 활용할 수 있게 해준다.
var username2 = /*[[${user.username}]]*/ "test username";- 인라인 사용 전 ->
var username2 = /*userA*/ "test username"; - 인라인 사용 후 ->
var username2 = "userA";
- 인라인 사용 전 ->
-
객체
- 타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동으로 변환해준다.
- 인라인 사용 전은 객체의 toString()이 호출된 값이다.
인라인 사용 후는 객체를 JSON으로 변환해준다. var user = [[${user}]];- 인라인 사용 전
var user = BasicController.User(username=userA, age=10); - 인라인 사용 후
var user = {"username":"userA","age":10};
- 인라인 사용 전
- 자바스크립트 인라인 each
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]📌템플릿 조각
- 웹 페이지를 개발할 때는 공통 영역이 많이 있다.
- 이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율적이다.
- 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.
<!--/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</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
</body>
</html>🎈결과
-
부분 포함 insert: 현재 태그 내부에 추가한다.
<h2>부분 포함 insert</h2> <div> <footer> 푸터 자리 입니다. </footer> </div>
- 부분 포함 replace: 현재 태그를 대체
<h2>부분 포함 replace</h2>
<footer>
푸터 자리 입니다.
</footer>- 부분 포함 단순 표현식:
~{...}를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있다.
<h2>부분 포함 단순 표현식</h2>
<footer>
푸터 자리 입니다.
</footer>- 파라미터 사용: 파라미터를 전달해서 동적으로 조각을 렌더링 할 수도 있다.
<h1>파라미터 사용</h1>
<footer>
<p>파라미터 자리 입니다.</p>
<p>데이터1</p>
<p>데이터2</p>
</footer>📌템플릿 레이아웃1
<!-- 템플릿 레이아웃!! -->
<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 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>-
common_header(~{::title},~{::link})이 부분이 핵심이다.
::title은 현재 페이지의 title 태그들을 전달한다.
::link는 현재 페이지의 link 태그들을 전달한다 -
쉽게 이야기해서 레이아웃 개념을 두고, 그 레이아웃에 필요한 코드 조각을 전달해서 완성하는 것으로 이해하면 된다.
📌템플릿 레이아웃2
<html>전체로 레이아웃을 확장해보자
<!--레이아웃-->
<!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><!--사용할 곳-->
<!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>- page수가 많고 관리가 필요하다 -> 레이아웃 사용
- 복잡하지만 관리가 쉽다.
- page수가 별로 없다 -> 템플릿 조각 사용
- 단순하지만 코드 중복이 생긴다.
인프런의 '스프링 MVC 2편(김영한)'을 스스로 정리한 글입니다.
자세한 내용은 해당 강의를 참고해주세요.
I Think So!