[Thymeleaf] inline javascript에서 유니코드로 표기된 한글문자 한글로 표기

thymeleaf inline javascript 에서 문자 그대로 출력하기

swagger 테스트 중에 거슬리는 현상을 발견했습니다.

바로, script 내의 msg가 한글이 아닌 유니코드로 표기되는 문제입니다.

과연.. 한글은 무조건 유니코드로 표기되는것인가 했더니, title에는 한글이 표기되는것을 보니 그 문제는 아닌것 같고.

inline javascript에서 문자열 설정하는 과정에서 유니코드로 설정하는 것으로 추측되었습니다.

그럼, 실제 작성된 코드를 살펴보도록 합시다.

<script th:inline="javascript">
window.onload = function(){
/*<![CDATA[*/
	var nextPage = [[@{__${nextPage}__}]], msg = [[${msg}]];
	if(nextPage) {
		alert(msg);
		location.href = nextPage;
	} else {
		location.href = [[@{/login}]];
	}
/*]]>*/
};
</script>

변경 전 inline javascript 코드

th:inline 을 이용하여 컨트롤러로 부터 받은 객체정보를 타임리프 템플릿에서 설정할 수 있습니다.
context path를 prefix로 삽입되는 nextPage 설정도 받을 수 있고, msg 데이터도 받을 수 있습니다.

Swagger 응답에서는 msg가 \uC811\uADFC\uAD8C\uD55C \uC5C6\uB294 \uC0AC\uC6A9\uC790\uC785\uB2C8\uB2E4."; 로 표시되고 있는데요.
이것의 한글 변환값은 접근권한 없는 사용자입니다. 입니다.

javascript inline에 설정된 데이터값을 유니코드가 아닌 문자 그대로로 출력하고 싶다면 어떻게 해야할까요?

해결책은 매우 간단합니다. unescape 표현식으로 나타내는 [()] 를 사용하면 됩니다.

인라인 표현식에서 이용되는 [[]] 는 th:text와 같은 의미로, 문자열 자체를 의미하므로 별도로 따옴표를 하지 않아야 하지만(만약 설정할 경우 따옴표가 2개씩 나옵니다 : ""\/v""),
[()] 를 이용할때에는 따옴표를 반드시 설정해줘야합니다.

<script th:inline="javascript">
window.onload = function(){
/*<![CDATA[*/
	var nextPage = [[@{__${nextPage}__}]], msg = "[(${msg})]";
	if(nextPage) {
		alert(msg);
		location.href = nextPage;
	} else {
		location.href = [[@{/login}]];
	}
/*]]>*/
};
</script>

변경 후 inline javascript 코드

unescape 표현식을 적용한 후 출력된 화면입니다.