[Thymeleaf] 자바스크립트 인라인

웹 애플리케이션을 개발하다 보면 서버에서 내려온 데이터를 자바스크립트 코드 안에서 그대로 사용해야 할 때가 많다. 하지만 단순히 값을 출력하는 것만으로는 문자열에 따옴표가 빠진다거나, 객체가 단순한 toString() 결과로 표시되는 등 문제가 생기기 쉽다.

 

이번 글에서는 이런 문제를 해결하기 위해 Thymeleaf가 제공하는 자바스크립트 인라인 기능을 살펴본다. 문자열 처리, 내추럴 템플릿, 객체 JSON 변환, 그리고 리스트 데이터를 반복 처리하는 방법까지 실제 예제를 통해 알아보자

 

1. 컨트롤러에서 데이터 준비

@GetMapping("/javascript")
public String javascript(Model model) {
    model.addAttribute("user", new User("userA", 10));
    addUsers(model);
    return "basic/javascript";
}

여기서는 userA라는 사용자 객체를 넘겨서 템플릿에서 활용할 수 있도록 했다.

 

2. 자바스크립트 인라인 사용 전/후 비교

템플릿 코드

<!-- 자바스크립트 인라인 사용 전 -->
<script>
  var username = [[${user.username}]];
  var age = [[${user.age}]];
  // 자바스크립트 내추럴 템플릿
  var username2 = /*[[${user.username}]]*/ "test username";
  // 객체
  var user = [[${user}]];
</script>

<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
  var username = [[${user.username}]];
  var age = [[${user.age}]];
  // 자바스크립트 내추럴 템플릿
  var username2 = /*[[${user.username}]]*/ "test username";
  // 객체
  var user = [[${user}]];
</script>

 

실행 결과 비교

인라인 사용 전 결과

<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>

 

3. 왜 인라인이 필요한가?

문자열 렌더링

인라인을 쓰지 않으면 "userA"처럼 따옴표가 붙지 않아 자바스크립트가 변수를 찾으려다 오류가 난다. 인라인을 사용하면 자동으로 " "를 붙여줘서 안전하다.

 

내추럴 템플릿

주석(/* ... */)을 활용해 HTML 파일을 직접 열었을 때도 동작하도록 돕는 기능이 있는데, 인라인을 쓰지 않으면 이 부분이 그대로 주석 처리된 채 남는다. 인라인을 쓰면 주석이 제거되고 기대한 값이 제대로 반영된다.

 

객체 변환

가장 큰 장점은 객체를 JSON 형태로 자동 변환해 준다는 것이다. toString() 결과 대신 실제로 자바스크립트에서 다룰 수 있는 JSON으로 내려오기 때문에 바로 활용할 수 있다.

 

4. 자바스크립트 인라인 each

리스트 데이터를 자바스크립트 변수로 만들고 싶을 때는 th:each와 함께 사용할 수 있다.

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
  [# th:each="user, stat : ${users}"]
    var user[[${stat.count}]] = [[${user}]];
  [/]
</script>

 

결과:

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

 

마무리하며

오늘은 타임리프가 제공하는 자바스크립트 인라인 기능을 알아보았다. 문자열에는 따옴표를 자동으로 붙여주고, 특수 문자는 안전하게 이스케이프 처리하며, 객체는 JSON으로 변환해 주기 때문에 자바스크립트 코드 안에서 바로 활용할 수 있다. 특히 리스트 데이터를 다룰 때는 each와 함께 사용할 수 있어 더 유용하다.

 

결국 타임리프는 단순히 HTML을 채워 넣는 수준을 넘어, 자바스크립트와 자연스럽게 연동할 수 있는 기능까지 제공한다는 점에서 개발자가 훨씬 편리하게 화면을 구성할 수 있다.

 

 

감사합니다.