[Thymeleaf] JavaScript Inlining (자바스크립트 인라인)

타임리프는 자바스크립트를 더욱 편리하게 사용할 수 있도록 자바스크립트 인라인 기능을 제공한다

구체적으로 어떠한 기능들을 제공하는지 살펴보자

 

자바스크립트 인라인 기능을 사용하려면 아래와 같이 작성하면 된다

<script th:inline="javascript">
	(생략)
</script>

 

예시를 위하여 서버 쪽에서 아래와 같이 데이터를 보냈다고 가정해보자

public String javascriptInline(Model model) {
    model.addAttribute ("user", new UserDTO("userA", 10)); //(username, age)
}

 

Text Inlining (텍스트 렌더링)

자바스크립트에서 변수값을 타임리프 변수로 대입할 때 자주 나는 오류가 특히 문자열에서 따옴표를 사용하지 않아서이다

또한 이를 알고 있다고 하더라도 매번 따옴표를 더하기에는 너무 번거롭다

<!-- 자바스크립트 인라인 사용전 -->
<script>
    var username = [[${user.username}]];
    var age = [[${user.age}]];
</script>

<!-- 결과 -->
var username = name;
var age = 10;




<!-- 자바스크립트 인라인 사용후 -->
<script th:inline="javascript">
    var username = [[${user.username}]];
    var age = [[${user.age}]];
</script>

<!-- 결과 -->
var username = "name";
var age = 10;

위와 같이 자바스크립트 인라인을 사용하게 되면 알아서 따옴표를 추가해주기 때문에 편리하게 사용할 수 있다

또한 여기에 더하여 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있다면 이스케이프 처리도 해준다

 

JavaScript Natural Templates (자바스크립트 내추럴 템플릿)

타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿을 제공한다,

이때 자바스크립트 인라인을 사용하면 주석을 활용하여 이 기능을 사용할 수 있다

<!-- 자바스크립트 인라인 사용전 -->
<script>
    var username = /*userA*/ "usernameB";
</script>

<!-- 결과 -->
var username = /*userA*/ "usernameB";




<!-- 자바스크립트 인라인 사용후 -->
<script th:inline="javascript">
    var username = /*userA*/ "usernameB";
</script>

<!-- 결과 -->
var username2 = "userA";

인라인을 사용하지 않으면 그대로 해석을 해버려 내추럴 템플릿 기능이 동작하지 않고, 렌더링 내용이 주석처리되어버렸다,

하지만 인라인을 사용하게 되면 주석 부분이 제거되고 의도했던 userA 값이 들어간다

 

Advanced Inlined Evaluation and JavaScript Serialization (객체화)

타임리프의 자바스크립트 인라인은 아래와 같은 객체들을 자동으로 객체화해준다

예시와 함께 살펴보자

<!-- 자바스크립트 인라인 사용전 -->
<script>
    var user = [[${user}]];
</script>

<!-- 결과 -->
var user = BasicController.User(username=userA, age=10);




<!-- 자바스크립트 인라인 사용후 -->
<script th:inline="javascript">
    var user = [[${user}]];
</script>

<!-- 결과 -->
var user = {"username":"userA","age":10}

UserDTO란 객체로 넘어온 객체 안에는 username과 age값이 들어있다

자바스크립트 인라인을 적용하기 전에는 객체의 내용물을 그대로 출력하지만

인라인을 적용하고 난 후에는 JSON형식으로 알아서 객체화를 해준다

 

JavaScript Inlining Each (자바스크립트 인라인 반복)

마지막으로 자바스크립트 인라인은 each를 지원하는데 기존의 th:each와 똑같이 작동한다

<script th:inline="javascript">
    [# th:each="user, stat : ${users}"]
    var user[[${stat.count}]] = [[${user}]];
    [/]
</script>

자바스크립트 인라인의 each를 사용하면 th:each와 마찬가지로 해당 객체의 반복문을 돌려 아래와 같이 값들을 뽑아낸다

<script>
  var user1 = {"username":"userA","age":10};
  var user2 = {"username":"userB","age":20};
  var user3 = {"username":"userC","age":30};
</script>

 

---

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

참조 링크:

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html