자바스크립트 인라인

• Thymeleaf 내에서 자바스크립트를 편리하게 사용할 수 있는 기능
  • 아래의 태그 내에서는 javascript 문법을 사용할 수 있다.

<script th:inline="javascript">

✏️ script VS. th:inline

📍 기본 data

• script
  • String 타입일 경우 “ “ 를 붙여주어야 변수 선언이 가능하다.
  • 아래의 예시의 username 은 String 타입이기 때문에 “ “ 르 붙여주지 않으면 선언이 불가하다.

<script>
    var username = [[${user.username}]]; // " " 가 없어서 선언 실패
    var age = [[${user.age}]]; // int 는 " " 가 없어도 됨
</script>

• inline
  • data type 에 상관 없이 자동으로 최적화 되어 신경쓸 부분이 줄어든다.

<script th:inline="javascript">
    var username = [[${user.username}]];
    var age = [[${user.age}]];
</script>

📍 객체

• script
  • 객체를 바로 변수에 선언할 경우 toString 된 형태로 저장된다.
  • 사람이 보는 것이 아니면 변수로써의 활용이 매우 힘들어진다.

<script>
    var user = [[${user}]];
</script>
// var user = BasicController.User(username=UserA, age=10);

• inline
  • 객체를 변수로 선언하면 자동으로 JSON 형태로 변경시켜준다.
  • 그 밖에도 unescape 가 필요할경우 처리까지 자동으로 최적화 해준다.

<script th:inline="javascript">
    var user = [[${user}]];
</script>
// var user = {"username":"UserA","age":10};

📍 네추럴 템플릿

• script
  • javascript 도 기본적으로 네추럴 템플릿이 적용된다.
  • 아래와 같이 주석을 사용할 경우 인식을 못하고 변수에 값을 그대로 저장시켜버린다.

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

• inline
  • 주석을 삭제하고 변수에 선언해준다.

<script th:inline="javascript">
    var username2 = /*[[${user.username}]]*/ "test username";
</script>
// var username2 = "UserA";

✏️ inline each 문

• java 처럼 변수명 뒤에 index 를 붙여주어 각 변수를 구별할 수 있다.
  • index 번호는 stat.count 를 사용해 찾을 수 있다.

<script th:inline="javascript">

      [# th:each="user, stat : ${users}"] // 반복문 시작
      var user[[${stat.count}]] = [[${user}]];
      [/] // 반복문 종료

</script>

• 결과물
  • inline 을 사용했기 때문에 자동으로 JSON 으로 변환되 저장되었다.

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