jQuery Template 이슈 몇 가지

프로젝트 진행 중에 플래시 <object> 태그 템플릿을 만들어 놓고 몇 가지 애트리뷰트를 바꿔치기 해야하는 이슈가 있었습니다. 이렇게 완성된 <object> 태그를 jQuery Dialog에 보여주면 사용자가 그걸 긁어서 다른 곳에 붙일 수 있게 하는 일이었죠. 대수롭지 않게 생각했었는데 그냥 붙이면 파싱돼서 다이얼로그 창에 플래시가 떠버리더라구요.

문자들을 이스케이프 하면 해결할 수 있는 일이었지만, 이걸 서버에서 해야하는지 아니면 뷰에서 해야하는지.. 고민을 하다가 간단한 템플릿이었기 때문에 뷰에서 하기로 마음 먹었습니다.

처음에는 <div> 태그 안에 살짝(?) 이스케이프 한 템플릿을 넣어 놓고 자바스크립트로 치환했었는데요. 최신 브라우저에선 문제 없이 잘 됐지만 IE에서는 <object> 태그 안에 템플릿에 없던 속성을 추가, 템플릿과 다른 값을 대입, 템플릿 바깥에 있는 태그(body, html 등)를 같이 가져오는 문제가 생겼습니다

그러다가 발견한 게 jQuery Template.

구글링 하다보니 아대장님의 소개글도 찾을 수 있었습니다. 베타버전이고 현재 이 링크들에 걸려있는 템플릿 플러그인은 프로젝트가 중지된 상태입니다. 현재는 jQuery UI에서 작업이 진행중이라고 하는데 아직 공개되진 않은 것 같습니다.

이 beta API를 사용해서 결과적으로 IE와의 호환성 문제는 해결했지만 몇 가지 이슈가 있었습니다.

회사에서 NHN의 Jindo 프레임워크를 전사적으로 사용 중인데요. 진도에서도 $를 사용하기 때문에 jQuery와의 충돌을 막기 위해 다음과 같은 처리를 해줍니다:

var $J = jQuery.noConflict();

$J로 jQuery를 사용할 수 있죠. 문제는 jQuery 템플릿에서 치환되는 부분에 ${ } 문법을 사용한다는 것입니다. 저는 처음에 이 부분을 $J{ }로 해줘야 하나? 하고 생각했었는데 그건 아니었습니다. 그냥 ${ } 이런식으로 ㅋ

그리고 ${ } 이것은 EL과 같기 때문에 jsp를 사용하면 먼저 파싱돼버려서 템플릿이 바껴버립니다. 헐.. 그래서 \$ 이런식으로 $ 자체를 이스케이프 해버리면 { } 요것은 그냥 일반 문자가 돼버리기 때문에 템플릿의 ${ } 부분을 \${ } 부분으로 치환을 했었는데요. 이게 테스트 할 때는 문제가 전혀 없었는데 서버에 있는 구버전 Tomcat 5에서 \$를 처리하지 못하고 validation 에러를 내버리더라구요 ;ㅁ;

결국엔 아래와 같은 꽁수로 상황을 모면했습니다:

<c:set var=”S” value=”$”/>

<script id=”template” type=”text/x-jquery-tmpl”>

… ${S}{url} …

그리고 <object> 태그안에 들어있는 <, > 문자를  &lt;, &gt;로 바꿔줬더니 IE 호환성 문제도 해결이 되더라구요. 어쨌든 매력적인 플러그인임에는 틀림 없지만 시작을 마이크로소프트에서 해서 그런지 몰라도 EL과 같은 ${ } 사용은 차후 버전에서는 달라졌으면 하네요.