자바스크립트 인라인

알파로그·2023년 3월 25일
0

Spring MVC 활용 기술

목록 보기
15/42
  • 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>
profile
잘못된 내용 PR 환영

0개의 댓글