뷰템플릿으로 thymeleaf를 사용하게 된 것은 생각보다 단순했다.
제작년인가.. 회사에서 받았던 교육의 일부 실습에서 정말 '어쩌다' 사용하게 되었고, 스프링에서도 밀고 있다 하니 한번 사용해 보기로 했다.
걱정되는 것은.. 후에 jquery를 활용한 그리드 등을 만들 때의 호환성 문제가 있지만, 문제가 된다면 그때 가서 걷어내든 길을 찾아보든 하면 될 것이다.
thymeleaf를 처음 쓸 때 가장 당황했던 점은, 모든 html태그를 완벽하게! 닫아줘야 한다는 것이었다.
다소(아니 매우) 불편하긴 했지만 이정도는 감내할 수 있다.
thymeleaf의 Layout 기능은 정말 간다하면서도 유용했다.
화면의 Layout을 잡기 위해 우선 main이 될 layout 페이지를 만들고 nav/footer 등의 고정될 layout을 잡는다.
그 뒤, content가 될 영역을 div tag로 잡아준다.
<div layout:fragment="content"></div>
요렇게 해 준 뒤, 이제 content가 될 html을 만든다.
content가 될 html의 html태그는 아래와 같이 선언 해 줘야 한다.
1 2 3 | <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="mainLayout"> | cs |
이 html의 레이아웃을 아까 만든 mainLayout.html을 따르겠다고 선언한 것이다.
이제 이 html이 그릴 부분을 다시
<div layout:fragment="content">
.....
.......
</div>
으로 감싸 주면 요 div 내부의 컨텐츠가 layout 내부에 그려지게 된다.
구성은 쉬우나.. 스크립트와 관련해서 몇 가지 실수할 만한 문제가 있었는데,
1. 이 div 내부에 script들까지 다 포함시켜야 한다는 것이다. 내부 스크립트던 외부 스크립트 던지
<div layout:fragment="content">..........</div> 사이에 있어야 Layout내부에서 동작한다.
2. Layout html에 이미 사용된 script를 content html에서 또한번 선언해서 중복되게 되면 양쪽 모두에서 동작하지 않는다.
중복을 잘 발라주고 div 태그 안쪽에 잘 위치시켜 주니 예쁘게 잘 작동 하는 것을 확인할 수 있었다.
Layout을 잘 나눠, 중복된 코드들을 획기적으로! 줄여줄 수 있었다.
