역시나 이어서 타임리프에 대해 정리하겠다.
자바스크립트 인라인
타임리프에서 자바스크립트를 사용할려면 다음과 같이 사용하면된다.
<script th:inline="javascript">인라인 기능을 사용하지 않고 자바스크립트를 사용할 수 있기는 하지만 생각보다 신경써야하는 부분이 있다.
<script>
var username = [[${user.username}]];
</script>실행해보자.
다음과 같이 결과가 나오면서 자바스크립트 에러가 발생한다.
<script>
var username = userA;
</script>이유는 ""가 누락되었기 때문이다. username은 문자타입이어서 ""가 필요하다.
아래와 같이 수정해줘야 오류가 발생하지 않는다.
번거로운 작업이다.......................
<script>
var username = "[[${user.username}]]";
</script>이뿐만 아니라 내추럴 템플릿 적용x, 객체 toString() 등 여러 불편한 점들이 있겠지만 타임리프의 자바스크립트 인라인 기능을 사용하면 이러한 번거로운 작업없이 사용할 수 있다.
문자타입은 ""를 추가해주고 숫자 타입은 추가해주지 않는 등 이러한 작업들을 다 처리해준다.
<script th:inline="javascript">
var username = [[${user.username}]];
var age = [[${user.age}]];
var user = [[${user}]];
</script>또 객체를 toString() 형식이 아닌 JSON타입으로 출력해준다.
var user = [[${user}]]; 부분을 실행하고 패이지 소스를 보면 다음과 같이 나온다.
var user = {"username":"userA","age":10};만약 자바스크립트 인라인 기능을 사용하지 않으면 다음과 같이 toString()이 실행된 결과값이 나온다.
var user = BasicController.User(username=userA, age=10);템플릿 조각
말 그대로 조각, 조각을 한번 만들어두면 필요한 곳으로 가져와서 재활용할 수 있다.
타임리프는 이러한 기능을 수행할 수 있도록 템플릿 조각과 레이아웃 기능을 제공한다.
th:fragment는 템플릿 조각 이름을 준다고 생각하면된다.
footer.html
<footer th:fragment="copy">
footer 자리 입니다.
</footer>템플릿 조각을 가져와서 사용하는 방법은 아래와 같다.
template/fragment/footer는 파일 경로이다.
footer.html파일의 copy라는 조각을 가져오겠다 라는 의미로 생각하면된다.
<div th:insert="~{template/fragment/footer :: copy}"></div>
소스코드 결과
<div><footer>footer 자리 입니다.</footer></div>
insert는 현재 태그 안에 가져온 템플릿 조각을 삽입해준다.
그 다음 replace방법이 있다.
<div th:replace="~{template/fragment/footer :: copy}"></div>소스코드 결과
<footer>footer 자리 입니다.</footer>이름에서도 감이오지만 replace는 현재 태그를 템플릿 조각으로 교체하는 방법이다.
div태그가 footer태그로 교체되었다.
replace같은 경우 다음과같이 단순하게 표현할 수 있다.
<div th:replace="template/fragment/footer :: copy"></div>그리고 템플릿에 파라미터가 있는 조각일 경우 다음과 같이 가져올 수 있다.
파라미터가 있는 템플릿 조각
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리입니다.</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>파라미터가 있는 템플릿 조각 가져오기
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>소스코드 결과
<footer>
<p>파라미터 자리입니다.</p>
<p>데이터1</p>
<p>데이터2</p>
</footer>템플릿 레이아웃
더 나아가서 템플릿 조각을 레이아웃에 적용시켜보자.
동일한 헤더를 사용하지만 타이틀이나 링크와 같은 정보들은 각 페이지마다 다를 수 있다.
다시 정리하자면 어떤 레이아웃이 있고, 그 레이아웃을 사용하지만 변경이 필요한 부분은 바꿔끼고 싶을 수 있다.
예시를 보면 감이 잡힐 것이다.
이런 헤더 레이아웃이 있다고 하자.
<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>
위 헤더 레이아웃을 사용하고자 하지만 레이아웃 타이틀과 link를 변경하고싶을 땐
다음과 같이 작성해주면 된다.
<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>~{::title}에는 <title>메인 타이틀</title>이 태그가 넘어가고,
~{::link}에는 <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">,
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">2개가 넘어간다.그래서 결과적으로 렌더링된 소스 코드를 보면 다음과 같다.
<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>위에 템플릿 헤더 레이아웃과 비교하면 레이아웃 타이틀은 메인타이틀로 바뀌었고,
추가부분에 css링크가 추가된 것을 볼 수 있다.
기초적인 타임리프 문법에 대해서 알아보았고 모르는 문법이 나오거나 더 궁금하면 공식 메뉴얼을 참고하는 것을 추천한다.
