Thymeleaf의 작은따옴표(‘)와 큰따옴표(“) 변환정책, 자바스크립트에서 문제 발생!

타임리프Thymeleaf가 잠시 나를 열받게 만들었다. 

자바스크립트까지 손댈줄이야...

$(".navbar-brand>span").html("<img src='images/logo_innoquartz_white.png' alt='Inno Quartz' />");

이렇게 해놓은 것을 Thyleaf 에서 렌더링하면서

$(".navbar-brand>span").html("<img src="images/logo_innoquartz_white.png" alt="Inno Quartz" />");

이렇게 바꾸면서 브라우저에서

SyntaxError: missing ) after argument list

오류를 발생시킨다. 이를 해결하는 방법은,

$(".navbar-brand>span").html('<img src="images/logo_innoquartz.png" alt="Inno Quartz" />');

으로 변경하면 해결된다.

---

이와 관련한 내용을 SNS에 올렸다가 CDATA 처리하는 것이 낫지 않느냐는 의견에 생각이 확장된다. 하앍~

백엔드 개발자랍시고 백엔드이상은 넘어오질 않았는데, 이번 프로젝트에 Thymeleaf를 View Template Engine으로 채용하면서 이쪽도 신경을 써야할 상황이 되었다. 아직은 정리가 되지 않은 부분이 많은데, 올해 연말 남은 기간동안 정리를 쭈욱 하고 진행해둬야겠다.

http://msdn.microsoft.com/ko-kr/library/ms256076%28v=vs.110%29.aspx
http://wp.goodchois.kr/devtip/archives/297

Thymeleaf의 템플릿은 사실 HTML의 탈을 쓴 XML이다. html로 파일확장자를 사용하기 때문에 브라우저에서 별무리없이 렌더링을 해서 보여주는 거다.
thymeleaf 파일 내에 자바스크립트도 결국은 XML의 일부로 여기기 때문에 자바스크립트에 대해서도 변형을 진행하는 것으로 보인다.

<![CDATA[An in-depth look at creating applications with XML, using <, >,]]>

위의 형식과 같이 자바스크립트 관련한 항목을

 <script type="text/javascript">
    //<![CDATA[
    window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'}'>"+"<"+"/script>");
    //]]>
</script>

와 같은 형태로 작성을 해야한다.

이보다 나은 방법은, 추후 어느정도 개발이 완료된 시점에 script 관련 항목을 별도의 스크립트 파일로 추출하여 모아놓고,
배포시에 스크립트 관련항목을 컴파일하여 압축하고 하나로 합쳐주는 작업을 진행하는 것이 더 적절해보인다.