[Spring Boot] : 타임리프 JavaScript inline 사용

타임리프 - JavaScript 인라인

---

타임리프에서 편리하게 JavaScript를 사용할 수 있는 인라인 기능을 제공한다.

 

<script th:inline="javascript">

이렇게 선언해서 사용할 수 있다.

 

var username = [[${user.username}]];

일반 JavaScript에서 이렇게 쓰면 문자기 때문에 오류가 난다. “”를 붙여줘야 오류가 나지 않는다. 하지만 타임리프에서 제공하는 인라인 기능을 통해 사용하면 오류가 나지 않는다.

 

개발자가 불편하게 사용해야 했던 부분을 개선해 준 기능이다.

또, JavaScript 내츄럴 템플릿도 지원된다.

 

var username2 = /*[[${user.username}]]*/ "test username";

이렇게 주석으로 넣어두면 서버를 렌더링할 때 주석 안에 내용을 가져오게 된다. 만약 HTML 파일을 그대로 열게 되면 그냥 옆에 있는 test username을 사용하게 된다.

 

var user = [[${user}]];
인라인 사용 전 var user = BasicController.User(username=userA, age=10);
인라인 사용 후 var user = {"username":"userA","age":10};

타임리프 JS 인라인 기능을 통해 객체를 JSON으로 자동 변환한다.

자바스크립트 안에서 each도 가능하다.

 

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

위 코드처럼 사용하면 JS안에서도 each사용도 가능하다.

---

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 참고하여 공부하였습니다.