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
