타임리프(Thymeleaf)는 Freemarker, Velocity와 같은 View Template Engine 입니다. 하지만 타임리프는 다른 템플릿 엔진들과는 차별화되는 장점을 지니고 있습니다.
- 서버상에서 동작하지 않아도 된다.
- 전체적인 마크업 구조를 흐트려트리지 않는다.
이런 장점을을 가지고 있습니다.
Freemarker나 Velocity같은 템플릿엔진들은 해당 템플릿이 지원해주는 다양한 기능(if, for, switch 같은)을 통해 마크업을 진행합니다. 하지만 항상 결과물을 확인할때는 서버를 구동시킨 상태에서 결과물을 확인해야 합니다. 이는 브라우저에서 단순 html 마크업작업을 하는 것보다 더 많은 시간을 소요하게 만듭니다.
하지만 타임리프는 이러한 단점을 해결하여 마치 static html파일을 작업하듯이 텍스트에디터를 통해 작업하고 해당내용을 브라우저로 바로 확인할 수 있습니다.
그 이유는 타임리프가 html 의 속성(attribute)를 기반으로 해서 작성되기 때문입니다.
html은 각 테그들마다 몇가지 속성을 가지고 있고(style, class, alt 등등) 이 이외의 선언되지 않은(사용자가 임의로 정한) 속성들에 대해서는 브라우저는 별다른 에러를 발생시키지 않고 화면에 표시하지 않습니다.
//정해지지 않은 exec와 같은 속성들은 브라우저에서 무시 됩니다.Some nice prototyping text...
이렇듯 타임리프는 브라우저에서 무시되는 속성을 통해 다양한 기능을 제공함으로 특별히 서버위에서 동작하지 않아도 해당마크업 내용을 저장된 파일을 브라우저로 열어 볼수 있게 되었습니다.
//타임리프의 예
//products라는 list형을 product로 할당하고 product object안에서 데이터를 꺼내 화면에 뿌립니다.
| Description | Price | Available from |
|---|---|---|
| Chair | 30.00 | 27/12/2012 |
이렇게 th:each, th:text등의 속성을 사용해서 마크업 함으로 일단 html 마크업 에디터를 통해 빠르게 마크업을 수행한 뒤 해당내용을 그대로 서버로 올려 데이터를 연동하는 형식으로 작업을 하면 훨씬 마크업을 하는데 훨씬 더 수월한 작업을 할수 있게 됩니다.
또한 이런 속성기반으로 마크업되는 타임리프는 전체적인 마크업 구조를 뒤죽박죽으로 만들지 않습니다. 예를 들면 위의 th:each는 jsp의 foreach, freemarker의 #list와 같은 기능으로 리스트형 데이터를 화면에 출력할때 사용하는 기능입니다. th:each는 html tag의 속성으로들어가 전체적인 마크업 형태를 해치지 않지만 다른 템플릿엔진들은 html 테그와 분리되어있어야 함으로 마크업 구조를 복잡하게 만드는 경향이 있습니다.
위의 마크업은 freemarker 문법인데요 #list와 같은 기능을 사용하여 마크업해서 전체적인 마크업 구조를 복잡하게 만드는 것을 볼수 있습니다.
이렇듯 타임리프는 기존의 템플릿 엔진들이 가지고 있던 문제점들을 상당부분 해결하고 있음을 볼수 있습니다.
다음 포스팅에는 Spring Framework와 Thymeleaf의 연동을 해보도록 하겠습니다.
