<script> 와 <script th:inline="javasc... - 인프런

@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

인프런 커뮤니티 질문&답변

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