코드 그라데이션

Thymeleaf (12) 자바스크립트 인라인 본문

Spring/Thymeleaf

Thymeleaf (12) 자바스크립트 인라인

완벽한 장면 2023. 11. 18. 18:32

자바스크립트 인라인

타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
자바스크립트 인라인 기능은 다음과 같이 적용하면 된다.

<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})를 저장하게 된다.

 

실행 결과

728x90

'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
'Spring/Thymeleaf' Related Articles more
Comments