카테고리

질문 & 답변
세부 분야

백엔드
해결 여부

해결됨

<script> 와 <script th:inline="javascript"> 에서 자바스크립트 내추럴 템플릿 인라인 사용 전, 사용후 차이 오류?

24.05.03 00:31 작성 24.05.03 01:40 수정 조회수 77

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

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>

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

</body>
</html>

타임 리프 자바스크립트 내추럴 템플릿 인라인 사용전 사용후 차이.png

<script> 와 <script th:inline="javascript"> 에서 자바스크립트 내추럴 템플릿 인라인 사용 전, 사용후 차이가 이상합니다.

강의에서는 인라인 사용 후에 아래와 같이 적용된다고 했는데,

var username2 = "userA";

제가 테스트해 본 결과, 아래와 같이 적용 됩니다.

var username2 = /*"userA"*/ "test username";

인라인 사용전인 var username2 = /*userA*/ "test username";`에서 /*userA*/ 부분에 "" 만 추가되었습니다..

제가 잘못 이해하거나 뭔가 잘못 작성한 것이 있을까요?

제가 작성한 코드와 버젼, 이미지 첨부 드립니다.

Spring Boot: 3.2.5

java: 17