23-08-18 TIL (thymeleaf data -> js)

문제

• 어제와 같이 thymeleaf로 프론트 뷰를 작성하고 있는 와중에 html이 너무 길어지는 것을 방지 하기 위해서 css와 js 파일을 만들어서 분리하고자 한다.
  - html에서 js 부분을 분리해서 따로 파일을 만들자 js에서 선언한 html의 변수가 'Expression expected' 라고 IDE에서 알려주었다.

시도

• 해당 문제를 해결하기 위해서 html과 js를 분리하였을 경우, js에서 기존 html의 변수를 사용하려면 어떤 부분을 추가해야하는지 알아야했다.
  • 우선은 body의 script 부분에 적용하기 원하는 js를 선언해야한다.

  <script src="/js/purchase.js"></script>

  • 다음, 그 위에 마찬가지로 js 파일에 전달하기 원하는 변수를 아래와 같이 선언한다.

  <script th:inline="javascript">
    const product = [[${product}]];
    const quantity = [[${quantity}]];
  </script>

  • 이 부분에서 thymeleaf를 사용하기 때문에 th:inline = "javascript"로 선언해주어야 한다.
  • 그리고 선언된 js 파일에는 아래와 같이 원하는 변수를 받아온다.

  const productAmount = `${product.amount}`;

해결

• 혹은 다른 방식으로 원하는 데이터를 가져올 수도 있다.
  • 예를 들어 quantity를 가져오고 싶은데 해당 데이터가 들어있는 특정 tag의 id를 알고 있다면 다음과 같이 가져올 수 있다.

  const quantityString = document.getElementById("quantity").value;