자바스크립트 인라인

타임리프를 자바스크립트 내에서 사용할 수 있게 해주고, 손쉽게 사용할 수 있도록 처리를 해주는 기능이다. <script th:inline="javascript"> 태그를 작성하여 사용할 수 있다.

인라인 사용 유무 비교

Model Attribute에 user란 이름으로 new User("침착맨", 42); 인 객체를 넘겨 보냈다고 가정하고 아래 설명을 진행하도록 하겠다.

인라인 사용하지 않은 경우

<script>
	var username = [[${user.username}]];
	var age = [[${user.age}]];
	var username2 = /*[[${user.username}]]*/ "test username";
	var user = [[${user}]];
</script>

• 이 경우에는 단순히 아래와 같이 렌더링이 되어 결과가 나온다. (페이지 소스 보기 혹은 개발자 도구 확인)

<script>
	var username = 침착맨;
	var age = 42;
	var username2 = /*침착맨*/ "test username";
	var user = BasicController.User(username=침착맨, age=42);
</script>

• 여기서 발생하는 문제를 하나씩 살펴보면, 문자열의 경우 따옴표로 감싸져 있지 않았다. 이러면 javascript 오류를 발생시킨다.
• 세 번째 줄의 경우, 렌더링 되었지만, 주석처리가 되어 있어 렌더링된 값을 활용할 수가 없다. 실제로 username2를 console.log 혹은 alert로 확인해보면 "test username"이 출력된다.
• 마지막은 객체를 넘겨줄 때, 객체의 toString 출력값이 나와 javasciprt에서 활용하기가 쉽지 않다.
• 따옴표가 빠진 경우에는 감싸주면 해결이 되지만, 각 태그마다 문자열이 반환되는지 확인하고 일일이 처리하기란 쉽지가 않다. 그래서 th:inline="javascript" 를 사용하면 손쉽게 해결된다.

인라인 사용한 경우

<script th:inline="javascript">
	var username = [[${user.username}]];
	var age = [[${user.age}]];
	var username2 = /*[[${user.username}]]*/ "test username";
	var user = [[${user}]];
</script>

• 이 경우에는 단순히 아래와 같이 렌더링이 되어 결과가 나온다. (페이지 소스 보기 혹은 개발자 도구 확인)

<script>
	var username = "침착맨";
	var age = 42;
	var username2 = "침착맨";
	var user = {
  				"username":"침착맨", 
  				"age":"42"
  				}
</script>

• 한글의 경우 유니코드로 깨져서 나오지만, 이해를 돕기위해 유니코드가 아닌 한글로 적겠습니다.
• 첫 번째의 경우, 문자열임을 인식하고 타임리프가 자동으로 따옴표를 붙여주어 javascript 에러가 나지 않는다.
• 세 번째 줄의 경우, 렌더링된 값이 출력되고 뒤에 적혀있던 "test username"은 사라졌다.
• 네 번째 줄으 경우, 객체를 반환할 때 toString이 아닌 JSON으로 반환하여 javascript에서 해당 값을 활용하기 좋게 처리해준다.

자바스크립트 인라인 반복

타임리프는 자바스크립트 인라인에서 반복문을 사용할 수 있도록 th:each 를 지원한다. 다만, 기존 html 태그에 사용한 것과 다르게 [# th:each= ] 를 활용한다.

<script th:inline="javascript">
	[# th:each="user, stat : ${users}"]
	var user[[${stat.count}]] = [[${user}]];
	[/]
</script>

• 이 경우에는 단순히 아래와 같이 렌더링이 되어 결과가 나온다. (페이지 소스 보기 혹은 개발자 도구 확인)

<script>
	var user1 = {"username":"userA","age":10};
	var user2 = {"username":"userB","age":20};
	var user3 = {"username":"userC","age":30};
</script>

💡 SSR을 활용하다 보면 javascript에 반복문을 사용해야할 일이 꽤나 생기는데, 이때는 Thymeleaf의 인라인과 each를 활용하자!