나를 위한 Thymeleaf 특징 정리

현재 업무에서 Vue.js, React와 같은 자바스크립트 라이브러리를 사용하여 웹을 구성하는 CSR 방식이 아닌 Thymeleaf를 사용한 SSR 방식의 웹 애플리케이션을 개발중입니다.

 

Thymeleaf를 사용해보면 확실히 jsp 보다는 spring과 찰떡궁합인 것을 느끼게 되고 편리한 기능이 많아서 좋은 거 같습니다. 다만 기능이 많기에 모든 기능과 attribute를 외우는 것은 힘들기 때문에 (feat. 기억보단 기록을) 사용하면서 유용했던 기능이나, 근본적인 Thymeleaf의 특징을 앞으로 차차 정리해볼까 합니다.

 

이번 포스트에서는 영한님의 Spring MVC 2편에서 Thymeleaf의 특징을 잘 정리해주셔서 MVC 2편 강의를 토대로 제 입맛에 맞게 다시 정리해보려고 합니다.

 

특징

- 서버 사이드 HTML 렌더링 (SSR)

- 네츄럴 템플릿

- 스프링 통합 지원

 

서버 사이드 HTML 렌더링 (SSR)

Thymeleaf는 백엔드 서버(Spring Application)에서 HTML을 동적으로 렌더링 하는 용도로 사용됩니다. Thymeleaf가 등장하기 전에는 JSP를 대중적으로 사용했습니다. SSAFY에서도 JSP를 사용했습니다.

SSR 이외에 다른 렌더링 방법은 현재 많은 IT 기업에서 사용하는 렌더링 방식인 CSR(Client Side Rendering)이 있습니다. 

 

SSR - 정적인 HTML, CSS, JS + 동적인 데이터를 서버에서 그림

CSR - 정적인 HTML, CSS, JS를 그린 상태에서 동적인 데이터는 Server에서 호출 한 후에 적재적소에 데이터를 넣음

 

제가 SSR, CSR 개념을 접했을 때, 그리고 지금까지도 생각하는 방식은 위와 같습니다.

 

네츄럴 템플릿

Thymeleaf는 순수 HTML을 최대한 유지하는 특징이 있습니다.

 

- Thymeleaf로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있습니다. (xxx.html에 jstl 처럼 Thymeleaf의 문법을 사용하거든요. JSP는 확장자가 xxx.jsp)

- 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있습니다.

 

=> JSP와 같이 다른 뷰 템플릿들은 해당 파일을 열면 JSP 소스코드와 HTML이 뒤죽박죽 섞여서 웹 브라우저에서 정상적인 HTML 결과를 확인할 수 없습니다.

=> 오직 서버를 통해서 JSP가 렌더링 되고 HTML 응답 결과를 받아야 화면을 확인할 수 있습니다.

 

반면에, Thymeleaf로 작성된 파일은 HTML을 그대로 웹 브라우저에서 열어도 정상적인 HTML 결과를 확인할 수 있습니다. 물론 이 경우에 Thymeleaf도 다른 뷰 템플릿 엔진과 마찬가지로 동적으로 처리해야 하는 결과는 렌더링되지 않습니다. 그러나, HTML 마크업의 결과를 웹 브라우저를 통해서 바로 확인할 수 있습니다.

 

스프링 통합 지원

타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있도록 지원합니다.

- model로 던진 객체를 자유자재로 사용할 수 있습니다.

- Spring Security에 대한 지원을 확인할 수 있었습니다.

- 이것 이외에 훨씬 많은 스프링과의 통합 기능을 사용할 수 있습니다.

(${#request.localPort}) - 현재 서버의 포트 번호

 

느낀점

짧게나마 JSP를 경험해봤고, 현재 Thymeleaf를 사용해보니 둘 중에 하나를 선택해야 한다면 무조건 Thymeleaf를 고를 거 같습니다.

사실 영한님 강의를 들으면서 Thymeleaf의 특징 파트에서 "아~ 그냥 그렇구나" 했습니다. 그러나 현업에서 프로젝를 하고 규모가 커지다보니깐 Thymeleaf의 특징을 새삼 깨닫게 되었습니다.

특히 2번째 특징인 네츄럴 탬플릿이 정말 훌륭한 거 같습니다. JSP는 jstl을 사용하면 tag나 코드가 정말 지저분해지고 보기 힘들었는데, Thymeleaf는 순수 HTML을 유지하려는 특징 덕분에, HTML의 기존 tag에 Thymeleaf의 기능을 얹는 방식이라 정말 깔끔하고 코드를 보기도 편했습니다.

 

이번 기회로 Thymeleaf의 특징을 다시금 새기고 앞으로의 포스팅에서는 Thymeleaf를 사용하면서 좋았던 기능을 정리해보도록 하겠습니다.

 

 

참조 - https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2