본문 바로가기

Development/Spring Framework

[Thymeleaf] 스프링 프레임워크의 View Thymeleaf

Thymeleaf

Thymeleaf는 웹 및 독립형 환경을 위한 최신 서버 측 Java 템플릿 엔진입니다.

Thymeleaf의 주요 목표는 브라우저에 올바르게 표시 될 수 있고 정적 프로토 타입으로 작동 할 수있는 HTML 인 우아한 자연 템플릿을 개발 워크 플로에 가져와 개발 팀에서보다 강력한 협업을 가능하게하는 것입니다.

Spring Framework 용 모듈, 즐겨 찾는 도구와의 통합 및 사용자 고유의 기능을 연결할 수있는 기능을 갖춘 Thymeleaf는 할 수있는 일이 훨씬 많지만 현대 HTML5 JVM 웹 개발에 이상적입니다.

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.
With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.

출처 - https://www.thymeleaf.org

이는 Thymeleaf에 대한 공식 소개입니다. 주요한 몇 가지 개념을 정리하겠습니다.

 

  • 템플릿 엔진(Template engine)

    - 동적 컨텐츠를 생성하는 방법

    - 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 결합해 결과 문서를 출력하는 소프트웨어

    - View code(HTML)과 Data logic code(DB Connection)을 분리해줌

    - 웹 템플릿 엔진(Web Template engine) : 웹 문서가 출력되는 템플릿 엔진

  • 서버 사이드 템플릿 엔진(Server Side Template Engine)

    - 서버에서 가져온 데이터를 미리 정의된 Template에 넣어 html을 그려 클라이언트에 전달

    - HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두며, 동적으로 생성되는 부분만 템플릿 소스코드를 끼워넣는 방식

    - 과정
       
       (1) 클라이언트에서 요청을 받음

       (2) 필요한 데이터를 가져옴

       (3) 미리 정의된 Template에 해당 데이터를 적절하게 넣음

       (4) 서버에서 HTML(데이터가 반영된 Template)을 그림

       (5) 해당 HTML을 클라이언트에 전달

  • 클라이언트 사이드 템플릿 엔진(Client Side Template Engine)

    - HTML 형태로 코드를 작성할 수 있으며, 동적으로 DOM(Document Object Model)을 그릴 수 있음

    - 과정

        (1) 클라이언트에서 공통적인 프레임을 미리 template로 만듦

        (2) 서버에서 필요한 데이터를 받음

        (3) 데이터를 Template에 적절한 위치에 두며, DOM 객체에 동적으로 그림

    - JS 라이브러리로 랜더링이 끝난 뒤 서버 통신 없이 화면을 변경하고자 할 때 필요함

    - 단일 화면에서 특정 이벤트에 따라 화면이 변경되는 경우 JS로 HTMLdmf 렌더링하는 경우 많음

스프링 부트의 템플릿 엔진

스프링 부트가 자도 설정을 지원하는 템플릿 엔진은 다음과 같습니다.

  • FreeMarker
  • Groovy
  • Thymeleaf
  • Mustache

JSP를 권장하지 않는 이유

Thymeleaf와 달리 JSP는 스프링  부트가 자동 설정을 지원하지 않고, 권장하지도 않습니다.

docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#boot-features-jsp-limitations

 

Spring Boot Reference Documentation

This section goes into more detail about how you should use Spring Boot. It covers topics such as build systems, auto-configuration, and how to run your applications. We also cover some Spring Boot best practices. Although there is nothing particularly spe

docs.spring.io

  • JSP를 사용하면 JAR 패키징을 할 수 없어, WAR 패키징을 해야함

  • JSP의 의존성을 정의할 경우, 내부에 의존성 이슈가 발생함
  • Undertow는 JSP를 지원하지 않음

JAR VS WAR

JAR와 WAR는 모두 JAVA의 jar 툴을 이용해 생성된 파일로, 어플리케이션을 쉽게 배포하고 동작시킬 수 있도록 관련 파일을 패키징합니다. 차이점을 살펴보겠습니다.

  • JAR (JAVA Archive)

    - .jar 자바 프로젝트를 압축한 파일

    - 자바 리소스, 속성 파일, 라이브러리 등이 포함되어 있음

    - 원하는 구조로 구성이 가능하며, JDK에 포함되어 있는 JRE만으로 실행 가능

  • WAR(Web Application Archive)

    - .war servlet/jsp 컨테이너에 배치할 수 있는 웹 어플리케이션 압축 파일

    - 웹 관련 자원만 포함(JSP, Servlet, JAR, Class, HTML 등)

    - WEB-INF 및 META-INF 디렉토리로 사전 정의된 구조를 사용하며 실행하기 위해 웹 서버 또는 WAS가 필요함

    - JAVA의 .jar 옵션( java -jar )을 이용해 생성하는 JAR 파일의 일종

Thymeleaf

서버 사이드 자바 템플릿 엔진의 한 종류입니다. JSP와 Thymeleaf의 가장 큰 차이는 JSP와 달리 Servlet Code로 변환되지 않는다는 것입니다. 비즈니스 로직과 분리되어 View에만 집중할 수 있습니다.

 

(0) build.gradle

build.gradle 파일에서 아래 코드를 작성해 detools와 thymeleaf를 compile 받습니다.

작성 코드
compile('org.springframework.boot:spring-boot-devtools')
compile('org.springframework.boot:spring-boot-starter-thymeleaf')

자동 업데이트 설정

(1) application.properties 설정

향후 template나 controller를 바꾸었을 때, 프로젝트를 재시작 할 필요 없게 설정합니다.

작성 코드
spring.devtools.restart.livereload.enabled=true
spring.freemarker.cache=false

 

(2) Mac 기준: command + shift + A --> Registry 검색

compiler.automake.allow.when.app.running 을 체크합니다.

 

(3) Setting -> Compiler -> Build project automatically 체크

 

위 설정으로 view 파일이 수정되어도 서버를 재 실행할 필요 없이 반영할 수 있습니다. Controller에서 model의 attribute 값을 변경하여도 반영된다는 점이 굉장히 편리합니다.

Thymeleaf 설정

(1) view 경로

resources 경로에 templates directory 생성

 

(2) application.properties 설정

위 주석처리 된 아래의 코드를 작성합니다.

작성 코드
spring.thymeleaf.cache=false  서버 재 시작 없에 새로 고침만으로 반영
spring.thymeleaf.check-template-location=true  템플릿 위치가 존재하는지 체크

spring.thymeleaf.suffix=.html
spring.thymeleaf.prefix=classpath:templates/

위 코드를 위에서부터 아래로 (a) ~ (d) 코드라 칭하겠습니다.

 

(a) 서버 재 시작 없이 새로 고침만으로 반영하기 위함

(b) 템플릿 위치존재하는지 아닌지 체크

(c) return 값 뒤에 공통적으로 붙이고자 함

(d) templates의 경로

 

(3) Controller 작성

 

  • String으로 return하여 view 파일을 클라이언트로 보냄

  • Model 객체로 view에 보여질 데이터를 전송함

  • @RequestMapping(value = "/sample/**")

    - 공통되는 URI 작성

    - 뒤에 ** 표시로 어떠한 값이 오든 인식하게 하기 위함
@RestController VS @Controller

둘의 차이는 굉장히 명확합니다.
@RestController는 data를 리턴이 주요 목적이며, @Controller는 View를 return하는 것이 주요 목적입니다.

 

 

gmlwjd9405.github.io/2018/12/21/template-engine.html