티스토리 뷰
자바스크립트 인라인
타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
자바스크립트 인라인 기능은 다음과 같이 적용하면 된다.
<script th:inline="javascript">
BasicController 추가
@GetMapping("/javascript")
public String javascript(Model model) {
model.addAttribute("user", new User("userA", 10));
addUsers(model);
return "basic/javascript";
}
/resources/templates/basic/javascript.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 자바스크립트 인라인 사용 전 -->
<!--
이 부분은 자바스크립트 코드를 포함하는 부분입니다.
Thymeleaf 표현식을 자바스크립트 변수에 할당하고 있습니다.
- var username = [[${user.username}]]: Thymeleaf 표현식을 이용해 사용자의 이름을 가져와 자바스크립트 변수 username에 할당합니다.
- var age = [[${user.age}]]: 사용자의 나이를 가져와 자바스크립트 변수 age에 할당합니다.
- var username2 = /*[[${user.username}]]*/ "test username";: Thymeleaf의 내추럴 템플릿 주석을 사용하여 주석 처리된 부분입니다. 주석 내의 표현식은 주석 처리되며, 대신에 "test username" 문자열이 변수 username2에 할당됩니다.
- var user = [[${user}]]: 사용자 객체를 자바스크립트 변수 user에 할당합니다.
-->
<script>
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script>
<!-- 자바스크립트 인라인 사용 후 -->
<!--
이 부분은 자바스크립트 코드를 포함하는 부분입니다.
Thymeleaf의 th:inline="javascript" 속성을 사용하여 자바스크립트 인라인 모드로 작성되었습니다.
이 모드에서는 Thymeleaf 표현식을 직접 사용할 수 있습니다.
- var username = [[${user.username}]]: Thymeleaf 표현식을 이용해 사용자의 이름을 가져와 자바스크립트 변수 username에 할당합니다.
- var age = [[${user.age}]]: 사용자의 나이를 가져와 자바스크립트 변수 age에 할당합니다.
- var username2 = /*[[${user.username}]]*/ "test username";: 주석 처리된 부분을 주석 해제하고 사용자의 이름을 가져와 변수 username2에 할당합니다.
- var user = [[${user}]]: 사용자 객체를 자바스크립트 변수 user에 할당합니다.
-->
<script th:inline="javascript">
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script>
</body>
</html>
자바스크립트 인라인 사용 전 결과
<script>
var username = userA;
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = /*userA*/ "test username";
//객체
var user = BasicController.User(username=userA, age=10);
</script>
자바스크립트 인라인 사용 후 결과
<script>
var username = "userA";
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = "userA";
//객체
var user = {"username":"userA","age":10};
</script>
</body>
</html>
자바스크립트 인라인 사용 전
: 자바스크립트 코드 내에서 Thymeleaf 표현식을 사용하려면 주석 내에 변수 할당 및 표현식을 넣어야 한다.
이 경우, 내추럴 템플릿 주석을 사용하여 주석 처리된 부분에서도 주석 내부의 표현식을 활용할 수 있다.
자바스크립트 인라인 사용 후
: th:inline="javascript" 속성을 사용하여 자바스크립트 인라인 모드로 작성하면, Thymeleaf 표현식을 직접 사용할 수 있다.
이 모드에서는 주석 내부의 Thymeleaf 표현식을 그대로 활용할 수 있다.
텍스트 렌더링
자바스크립트 내추럴 템플릿
- 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다.
- 자바스크립트 인라인 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다.
객체
- 타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동으로 변환해준다.
자바스크립트 인라인 each
- 자바스크립트 인라인은 each를 지원하는데, 다음과 같이 사용한다.
/resources/templates/basic/javascript.html 에 추가
<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script>주석 추가 ver.
<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
[# th:each="user, stat : ${users}"]
/*
Thymeleaf에서 자바스크립트 인라인 모드로 설정한 부분입니다.
이 부분은 Thymeleaf의 th:each 디렉티브를 사용하여 사용자 목록(${users})을 반복하고, 각 사용자를 자바스크립트 변수로 할당하는 역할을 합니다.
반복할 때 stat 변수도 함께 사용되며, 각 반복 요소의 정보를 제공합니다.
*/
var user[[${stat.count}]] = [[${user}]];
/*
위 코드는 자바스크립트 변수를 생성하고, 변수 이름을 "user" 다음에 반복 카운트인 "stat.count"를 붙여 유니크하게 만듭니다.
이렇게 생성된 변수는 사용자 정보(${user})를 저장하게 됩니다.
*/
[/]
부연설명
[# th:each="user, stat : ${users}"]
: Thymeleaf의 th:each 디렉티브를 사용하여 ${users} 변수의 사용자 목록을 반복한다.
user는 현재 사용자를 나타내며, stat은 반복 상태 정보를 제공하는 변수이다.
var user[[${stat.count}]] = [[${user}]];
: 이 코드는 자바스크립트 변수를 생성하고, 변수 이름을 "user" 다음에 반복 카운트인 stat.count를 붙여
유니크하게 만든다.
이렇게 생성된 변수는 사용자 정보(${user})를 저장하게 된다.
실행 결과
'[개발] - Spring > Thymeleaf' 카테고리의 다른 글
| Thymeleaf (14) 템플릿 레이아웃 01 (0) | 2023.11.21 |
|---|---|
| Thymeleaf (13) 템플릿 조각 (0) | 2023.11.20 |
| Thymeleaf (11) 블록 (0) | 2023.11.17 |
| Thymeleaf (10) 주석 (0) | 2023.11.16 |
| Thymeleaf (9) 반복 (0) | 2023.11.15 |
