스프링 프레임워크 뷰로 사용되는 Thymeleaf 와 jsp 의 비교

프로그래밍/스프링프레임워크 2019. 10. 28. 15:38
반응형

스프링 부트를 공부하면서 Thymeleaf를 알게 되었습니다. Thymeleaf는 템플릿 엔진으로 스프링 프레임워크의 MVC 구조에서 V 즉, 뷰(View)를 담당하는 라이브러리 입니다. 스프링 프레임워크의 뷰로 사용되는 가장 일반적인 기술은 jsp 입니다. Thymeleaf와 같은 템플릿 엔진은 사용해 보지 않아서 두 기술을 비교해 보았습니다(스프링 프레임워크에서 사용되는 템플릿엔진은 Thymeleaf외에도 Freemarker, Velocity등 많이 있는것 같습니다).



1. Thymeleaf와 jsp의 차이점


Thymeleaf는 HTML, XML, JavaScript, CSS 및 일반 텍스트를 처리 할 수 있는 웹 및 독립형 환경에서 사용할 수 있는 Java 템플릿 엔진입니다. Thymeleaf는 html파일을 가져와서 파싱해서 분석후 정해진 위치에 데이터를 치환해서 웹 페이지를 생성합니다.


JSP는 서블릿으로 변환되어 실행이 되어집니다. JSP 내에서 자바 코드를 사용할 수도 있습니다(사용하지 못하도록 설정할 수 있습니다). Thymeleaf는 자바코드를 사용할 수 없고, jsp에서 처럼 커스텀 태그와 같은 기능도 없습니다.



2. 장단점


JSP는 사실 서블릿이다보니 뭐든지 할 수 있다는게 장점이자 단점이 되겠습니다. MVC 구조가 주로 사용되면서 JSP는 뷰만 담당하고, JSP에 비즈니스 로직을 넣으면 디버깅 및 유지보수가 힘들어진다고 하여 요즘은 JSP에서는 자바 코드를 사용하지 못하게 하는게 일반적입니다.


Thymeleaf 템플릿 엔진의 장점은 페이지를 생성하는데 필요한 정보를 태그의 속성으로 넣고, remove 속성을 이용해서 실제 생성될 페이지에서는 제거될 태그를 넣을 수 있어서 페이지의 프로토타입을 제공할 수 있다는 것입니다. Thymeleaf로 작성된 페이지를 웹 브라우저로 열어보면 실제 보여질 내용과 동일하게 보여집니다.


디자이너 또는 퍼블리셔가 페이지를 생성하거나 수정할 때 톰캣 같은 웹서버를 실행하지 않고 오프라인에서 수정을 할 수 가 있다는 장점이 있는 것입니다. JSP 페이지를 웹브라우저로 열어보면 제대로 된 모양이 보이지 않습니다.


Thymeleaf 템플릿 파일을 웹 브라우저로 열어본 결과 입니다.




JSP 파일을 웹 브라우저로 열어본 결과 입니다.




디자이너 또는 퍼블리셔가 오프라인에서 바로 확인해보면서 작업을 할 수 있다면 좀 더 편리할 것 같기는 합니다. 거기에 더해서 개발자와 동일한 셋팅을 가지고, 실제 동작하는 것까지 확인할 수 있다면 더욱 좋을것 같습니다.


웹 페이지는 주로 동적으로 만들어지다보니 동일한 페이지의 내용이더라도 사용자에 따라 컨텐츠의 양도 달라질 수 있고, 부분적으로 컨텐츠의 내용도 달라질 수 있습니다. 이런 부분은 실제 개발자 환경에서만 좀더 정확하게 테스트해볼 수 있기 때문입니다.



3. 성능(Performance)


Thymeleaf 템플릿 엔진의 성능을 비교한 자료들이 있는지 찾아 봤는데, 예전 자료들이 있었습니다. Thymeleaf 템플릿 엔진은 다른 템플릿엔진이나 JSP에 비해서 속도가 떨어지는것 같았습니다.


Freemarker > Velocity > JSP > Thymeleaf


다음 글에서 속도 비교를 찾아볼 수 있습니다. "Modern Type-Safe Template Engines (Part 2)"



Thymeleaf 버전간의 성능 비교 글도 있었습니다. 버전 2에서 버전 3으로 넘어오면서 상당한 성능 개선이 있었다는 내용입니다. 그래도 JSP 보다는 느립니다. 


다음 글에서 내용을 볼 수 있습니다. "Java: Benchmark Thymeleaf 2.1.4 vs Thymeleaf 3.0 SNAPSHOT"



지금까지 Thymeleaf와 JSP를 비교해 보았는데, 반드시 이걸 써야겠다 던가 하는 것은 아닌것 같습니다. 사실 성능도 상대적인 템플릿 엔진들간에 상대적인 것이지 실제 운영에서 느껴질 만큼 느린 것은 아닌것 같습니다. Thymeleaf가 쓰지 못할 만큼 느리다면 사용하는 곳이 없겠지만 Thymeleaf 공식 사이트에 가보면 사용하고 있는 사이트가 상당히 있는것 같습니다.


Thymeleaf의 가장 큰 장점은 오프라인에서 템플릿 페이지가 완성된 웹 페이지의 프로토타입을 제공할 수 있다는 점과 Java 코드를 뷰 내에서 사용할 수 없다는 점인것 같습니다.


※ 예제 전체소스

springboot-java-jsp.zip

(위의 2. 장단점 에서 테스트하는데 사용한 예제소스 입니다.)

반응형

댓글을 달아 주세요

  • 코딩초보봇 2020.04.28 15:41  댓글주소  수정/삭제  댓글쓰기

    좋은글 감사합니다! 혹시 출처 남기고 퍼가도 될까요??

    • pentode 2020.06.06 23:00 신고  댓글주소  수정/삭제

      안녕하세요. 내용을 그대로 퍼가서 다른 블로그에 올리게 되면 검색엔진에서 중복으로 판정해서 글들이 보이지 않게 되는것 같습니다. 될 수 있으면 간단한 요약과 링크로 해주시는게 좋을 것 같습니다. 방문해 주셔서 감사합니다.^^

  • 닌텐도스위치 매니아 2020.10.26 17:37 신고  댓글주소  수정/삭제  댓글쓰기

    vue js 를 더 많이 사용하지 않나요?

    • pentode 2020.11.19 18:51 신고  댓글주소  수정/삭제

      Vue.js는 단일 페이지 웹 애플리케이션을 만드는데 사용되는 프레임워크이죠. 페이지 전환 없이 페이지내의 DOM구조를 직접 조작하여 데이터를 표시할 수 있습니다.

      Thymeleaf는 개개의 페이지를 만드는데 더 유리하겠습니다.

      필요한데 필요한 걸 사용하면 될 것 같습니다.

  • 쑤야90 2020.12.03 08:50 신고  댓글주소  수정/삭제  댓글쓰기

    thymeleaf layout을 통해 분리한 경우
    디자이너나 퍼블리셔가 볼 때 깨지는건 해결할 수 없나요?

    • pentode 2021.01.23 21:20 신고  댓글주소  수정/삭제

      해결할 수 없을것 같습니다. thymeleaf를 사용하면 디자이너도 브라우저로 보고 바로 확인할 수 있는게 장점이라고 하지만 실제로는 불편하죠.

      html을 작업하게 되는 디자이너나 퍼블리셔도 개발자와 동일한 테스트 환경을 가지고 작업하는게 편하다고 생각합니다.

      퍼블리셔도 이클립스+Tomcat+SVN과 같은 개발자와 동일한 환경을 가지고 소스를 공유하면서 개발하는게 편리할것 같네요.