Springboot Thymeleaf Javascript Inlining

타임리프 자바스크립트 인라인 이용하기

자바스크립트에서 타임리프 태그를 사용하기 위해서는 th:inline="javascript"를 적용하여 사용한다.

<script type="text/javascript" th:inline="javascript">

인라인을 종료하여 타임리프 태그가 작동되지 않도록 하려면 th:inline=”none”을 이용한다.

모델 객체를 자동으로 json 객체로 변환

[[${session}]]로 객체를 호출하면 타임리프가 자동으로 json 객체로 변환하여 준다.

아래 샘플에서 /*[[${session}]]*/를 이용하는 것과 [[${session}]]를 이용하는 것의 차이는 session2 선언부는 자바스크립트 문법을 깨트리기 때문에 소스 html 파일을 웹브라우저에서 바로 오픈하면 스크립트가 실행되지 않는다.

var session1 = /*[[${session}]]*/ null;
var session2 = [[${session}]];

/*[[${...}]]*/ 형식은 자바스크립 문법상 주석에 해당하기 때문에 문제가 없다. 웹브라우저에서 바로 오픈하면 다음과 같은 코드로 해석될 것이다.

var session =  null;

웹서버에서 실행되어 타임리프가 ${session}을 자동으로 json 객체로 변화하면 다음과 같은 코드가 생성된다.

var session = {"\uC601\uC5B4\uC774\uB984":"TtalLaeMideul","name":"\uB538\uB0B4\uBBF8\uB4E4","key_x":"from session"};

자바스크립트 내에서 타임리프 태그 이용하기

[# th:...]로 시작하여 [/]로 닫힌 내부에서 타임리프 태그를 이용할 수 있다.

아래 소스는 ${DEBUG_MODE}의 값이 true이면 로그를 찍는 코드이다.

<script type="text/javascript" th:inline="javascript">

var session = /*[[${session}]]*/ null;
[# th:if="${DEBUG_MODE}"]
console.log('session', session);
[/]
</script>

샘플 코드

아래 샘플 소스코드에서 이 문서에서 설명한 소스를 확인할 수 있다. 프로젝트를 받아서 직접 빌드하여 실행하고 결과를 확인해보면 도움이 될 것이다.

github 샘플 소스