스프링 mvc2편 타임리프 기본기능 : 자바스크립트 인라인

인프런 김영한님의 스프링 mvc2편을 보고 정리한 글입니다.

무엇을 배웠나요?

• 타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
• <script th:inline=”javascript”>
• 텍스트 렌더링
  • var username = [[${user.name}]];
    • 인라인 사용 전 → var username = userA;
    • 인라인 사용 후 → var username = “userA”;
• 인라인 사용 전 렌더링 결과를 보면 userA 라는 변수 이름이 그대로 남아있다. 타임리프 입장에서는 정확하게 렌더링 한 것이지만 개발자가 기대한 것은 다음과 같은 “userA”라는 문자일 것이다. 결과적으로 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생한다.
• 숫자의 경우에는 “ 가 필요 없기 때문에 정상 렌더링 된다.
• 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 “ 를 포함해준다. 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다. 예) “ → \\”
• 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다. 자바스크립트 인라인 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다.

코드

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


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

</script>