Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

개발자되기 프로젝트

[Thymeleaf] JavaScript inline 본문

인프런/[인프런] 스프링 MVC 2

[Thymeleaf] JavaScript inline

Seung__ 2021. 9. 19. 14:11

1. JAVA Script Inline


  • Thymeleaf는 Javascript에서 Thymeleaf를 편리하게 사용할 수 있도록 해당 기능을 제공
  • <script th:inline="jacascript">
  • Thymeleaf가 해당 영역안에서 javaScript를 위한 모드로 작동됨.
  • 일반적으로 Thymeleaf에서 JavaScript로 전달하기가 쉽지 않음..
  • 이를 도와줌.

 

 

2. Contorller


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

        return "basic/javascript";
    }

 

 

3. javascript.html


 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 자바스크립트 인라인 사용 전 -->
<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>
</body>
</html>

 

 

4. javascript inline 적용 전


  •  text
    •  var username = [[${user.username}]];​
      text의 경우 "[[${user.username}]]"로 JavaScript에 전달되어야 함..
    • 랜더링 후 : 흠.."UserA"로 넘어가지 않아서 에러..
    •     var username = UserA;
  • Javascript natural template
    •     //자바스크립트 내추럴 템플릿
          var username2 = /*[[${user.username}]]*/ "test username";
      자바스크립트는 "test username" 부분을 
    • 랜더링 후 : /* , */ , "test username"이 남아있음. 
    •     //자바스크립트 내추럴 템플릿
          var username2 = /*UserA*/ "test username";
  • 객체 
    •     //객체
          var user = [[${user}]];
      [[${user}]]는 user.toString()이 반영됨.
    • 랜더링 후 : toString() 그대로 넘어감.
    •     //객체
          var user = BasicController.User(username=UserA, age=10);

5. javascript inline 적용 후


<!-- 자바스크립트 인라인 사용 후 -->
<script>
    var username = "UserA";
    var age = 10; 
    //자바스크립트 내추럴 템플릿
    var username2 = "UserA";
    //객체
    var user = {"username":"UserA","age":10};
</script>
  • 문자의 경우 ""큰따옴표 처리 해줌.
  • natural template : "test username" 삭제되고 [[${user.username}]]이 반영됨.
  • 객체 : json으로 바꿔줌.

 

 

6. 정리

6.1텍스트 렌더링 : 큰따옴표 처리 해줌.


  • var username = [[${user.username}]];
  • 인라인 사용 전 var username = userA;
  • 인라인 사용 후 var username = "userA"; 
  • 인라인 사용 전 렌더링 결과를 보면 userA 라는 변수 이름이 그대로 남아있다. 
  • 타임리프 입장에서는  정확하게 렌더링 한 것이지만 사실  "userA"라는 문자를 기대함..
  • 결과적으로 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생한다. 
  • 다음으로 나오는 숫자 age의 경우에는 " 가 필요 없기 때문에 정상 렌더링 된다.
  • 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 " 를 포함해준다.
  •  추가로 자바스크립트에서 문제가 될  수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다. 
  • 예) " \"

 

6.2 자바스크립트 내추럴 템플릿


  • 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다. 자바스크립트 인라인
  • 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다.
  • var username2 = /*[[${user.username}]]*/ "test username";
  • 인라인 사용 전 var username2 = /*userA*/ "test username";
  • 인라인 사용 후 var username2 = "userA";
  • 인라인 사용 전 결과를 보면 정말 순수하게 그대로 해석을 해버렸다. 
  • 따라서 내추럴 템플릿 기능이 동작하지  않고, 심지어 렌더링 내용이 주석처리 되어 버린다.
  • 인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용된다.

 

6.3 객체


  • 타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동으로 변환해준다.
  • var user = [[${user}]];
  • 인라인 사용 전 var user = BasicController.User(username=userA, age=10);
  • 인라인 사용 후 var user = {"username":"userA","age":10};
  • 인라인 사용 전은 객체의 toString()이 호출된 값이다.
  • 인라인 사용 후는 객체를 JSON으로 변환해준다.

 

 

7. Javascript inline Each


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

 

 

 

8. GitHub : 210919 JavaScript Inline


 

GitHub - bsh6463/Thymeleaf

Contribute to bsh6463/Thymeleaf development by creating an account on GitHub.

github.com

 

Comments