어서와 JSP, 타임리프는 처음이지? (부제: JSP는 무덤으로)

원문: http://www.jiwhiz.com/post/2012/11/Goodbye_JSP_Hello_Thymeleaf

예전에 스크랩해둔 중국아저씨 글인데 이분이 블로그를 내려서 링크가 죽었습니다. (수정) 다시 살아났네요 어쨌든 저는 이글 쓰신분과 같은 경험과 느낌으로 타임리프를 시작했습니다. 사실 이분이 이글 올린날 어쩌다 읽게되고 GWT에서 Thymeleaf로 갈아탔습니다. 그게 예전에 이글을 스크랩해둔 이유기도 하구요.

현재 이분은 Thymeleaf에서 Angularjs로 옮겨가셨고, 저도 요새 앵귤러js로 타임리프로 만든 일부 페이지를 바꾸고 있었는데요 뭐 저처럼 앵귤러와 타임리프를 같이 돌려도 상관없습니다 하지만 순수 Angular js는 SEO에 문제가 있고, 그리고 개인사이트나 블로그가 아닌 엔터프라이즈급 자바솔루션, 특히 스프링기반에서는 여전히 타임리프는 훌륭한 선택이라고 생각합니다 (성능이나 learning curve, 소스컨트롤 차원에서나 JSF/Tiles나 GXT/GWT보다 낫다고 생각합니다.).

편의상의 반말 양해부탁드리고 싶지만 사실 방문자가 거의 음슴으로 그냥 전개~

잘가 JSP, 어서와 타임리프

JSP는 뭐 사실상 자바세계에서 웹페이지 만드는 표준이지. 나는 12년전 캐나다에서 첫직장을 잡은 이후 줄곳 JSP를 써왔어. 서블릿(Servlet)+JSP로 시작해서 스트럿츠(Struts)+JSP, 이후 JSF+JSP까지 써봤어. 다른 프로젝트에서도 스프링MVC랑 역시나 익숙한 JSPX를 썼어. 

프리메이커(FreeMaker)나 벨로시티(velocity), 사이트메쉬(SiteMash)같은 html템플릿 엔진의 몇몇 자바 라이브러리들이 있지만 난 JSP만 썼어. 왜 귀찮게 다른거 배워? 근데 최근에 생각이 좀 바꼈어 왜냐면 JSP가 부트스트랩이랑 같이 돌리는데 아주 엿같거든

처음 부트스트랩봤을때 이건 내가 아주 오래전부터 원했던거라 충격적이었어. 내가 여태 블로그사이트를 만들지 않은 이유는, 난 그래픽 디자인에 완전 젬병이거든. 내 첫글(주, 링크가 깨져서 알수없음)을 봐, 지금은 부트스트랩을 쓴다고, 난 이제 그래픽 디자이너없이도 쿨한 웹사이트를 만들수있어.

난 바로 부트스트랩을 다운받아서 내 블로그어플에 넣었어 시작은 무지 쉬웠어 내 코드에 큰 변화는 없었으니까 그냥 CSS 클래스속성을 내 JSP파일에 넣었을 뿐인데 내 블로그 페이지들은 엄청 이뻐졌지.

근데 문제는 그다음부터야, 드랍다운 메뉴가 작동하지않는거야 나는 내가 뭔가 실수했다고 생각했는데 구글링해보니까 비슷한 이슈를 레포트한 사람들이 있더라고, 근데 그 이슈들이 내 경우와 딱 맞아떨어지진 않았어. 난 정확하게 부트스트랩이 하란대로만 했거든 jquery.js 먼저넣고 bootstrap.js파일은 그후에 넣고. 최신의 jQuery 다운받았고, 예제에 나온 그 코드 그대로 복사해다 넣었어. 근데 드랍다운 메뉴가 여전히 작동을 안하는거야 아 정말 미치겠드라고

결과적으로 내가 한거는 드랍다운 메뉴 하나 딸랑있는 메뉴바만 있는 아주 간단한 html 페이지를 만들어서 크롬에서 먼저 도는걸 확인하고 그걸 그대로 테스트 jsp파일로 복사해다가 돌려보니까 작동을 안하더라고.. 그래서 원문 html 코드라인과 서버가 만든 html 코드를 한줄한줄 비교해서 찾아냈어!!!

생성된 html 스크립트 엘리먼트는:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"/> 

이렇게 태그를 셀프클로징하는데 원문소스는 아래처럼 클로징 태그가 있었어:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

 

딱 이것만 다르더라고 

원인을 찾았으니 해결은 쉬웠어. 스크립트 엘리먼트에 코멘트를 넣어서 생성된 html이 클로징 테그를 만들게 했더니 드랍다운 메뉴가 돌더라고. 코딩이 아닌 문제해결이나 온라인 문서읽기, 검색해서 답찾는 삽질을 거쳐서 결국 해결하는 과정은 나름 재미는 있었지만 너무 많은 시간을 써야했어

어쨌든 다시 기쁘게 코딩했고, 내 어플을 CloudFoundry (주, 지금은 유료화된 vmware에 운영하는 클라우드 호스팅서비스)에 디플로이 했는데 웹사이트가 좀더 다듬어져야할것같았어 그래서 wrapbootstrap (주, 수백가지 부트스트랩 테마를 유료로 구매할수있는 사이트) 을 검색해서 이쁜 테마를 하나샀어. 이때 불행하게도 테마 패키지안에는 다른 리소스 파일들과 꼴랑 몇개의 css와 html 파일들만 있더라고 (주, 구매전엔 파일의 구성을 알수없음) 브라우저에서 잘동작하는걸 확인하고 내 어플에 복사했는데 왜 돌지를 못하니.. 이를테면 헤더 레이아웃은 오류가 있었고 사진들의 위치도 맞지않았어. 이때의 나는 문제를 찝어내기가 너무 어려웠어 왜냐면 css와 html 코드들이 너무 많았거든. 나는 밤새도록 삽질하다 결국 삽질을 멈추고 다른 해결법을 찾기로 했어

그때 스프링소스의 누군가가 JSP를 대체할만한 오픈소스 프로젝트를 언급한걸 기억해냈어 그래서 스프링소스 사이트를 가서 블로그 글 Spring MVC: from JSP and Tile to Thymeleaf 찾아냈어. 언뜻 보기에 타임리프는 아주 쿨한 프로젝트같았어 그래서 함 시도해보기로 했지.

일단 온라인 문서와 튜토리얼을 읽었는데 문서화가 아주 잘되있더군. 그래 타임리프는 JSP같은 XML/HTML 템플릿 엔진이야 근데 템플릿화하는걸 엘리먼트(element)대신 속성(Attribute)을 사용한대. 이건 예전에 썼던 JSF나 Facelet같더라고 Facelet은 JSF와 같이 써야는데 난 내 프로젝트용으로 자바EE를 건드리고 싶지않았어 이미 충분히 고통받았었으니까 말이지.

나는 웹어플리케이션 프레임워크로 SpringMVC를 선택했고 타임리프는 스프링MVC와 궁합이 아주 잘 맞았어. 타임리프는 스프링MVC와 스프링 시큐리티를 위한 dialect를 제공해주지 끝내준다고.

일단 타임리프로 jsp를 대체하려면 다음의 절차를 밟으면 되.

• 블로그 테마 html파일을 내 프로젝트 폴더로 복사
• 타임리프 dialect를 사용해서 디비에서 오는 동적 데이터를 마크업과 교체
• 브라우저를 열고 html 파일이 잘도는지를 확인하고
• 그냥 서버를 돌려서 페이지를 열어서 데이터를 가져오게하면 마크업페이지와 똑같이 보일거야
• 
  

전환프로세스는 놀라울정도로 부드러워 난 내가 필요로하는 반복연산, 문자출력이나 조건문 등이 어떤 Attribute인지 단지 문서를 검색해가면서 거의 시간을 들이지않고 습득할 수 있었어. 그 다음 타임리프 attribute을 추가하는 예제를 그냥 따라했어 추가하거나 바꿔줘야하는 태그도 없었지. 그냥 브라우저 창을 두개 띄워서 하나는 원문 html, 다른 하나는 웹에서 도는 거 용으로 썼어, 매번 아주 작은 수정으로 브라우저 창을 새로고쳐서 바뀐게 있나 확인했을 뿐이야. 내가 본 차이점은 그래픽이나 레이아웃이 아니고 디비에서 가지고 온 데이터가 있냐 없냐 뿐이었어. 모든게 놀라울정도로 완벽햇어.

난 정말 원본의 그래픽 디자인에 동적인 컨탠츠를 추가하는 타임리프의 디자인방식을 좋아해. 서버의 재시작없이 수정한걸 저장하고 브라우저의 새로고침만으로 수정한걸 확인할수있는 Eclipse IDE (주, STS tc server 돌린듯) 도 고마워. 꿈은 이루어진다, 이제 JSP는 정말 작별이야