타임리프 특징
- 서버 사이드 렌더링 (SSR)
- Natural Template
- 스프링에서 권장하고 통합 지원
1. 서버 사이드 렌더링 (SSR)
- HTML 최종 결과를 서버에서 만들어 웹 브라우저에 전달
- 정적인 화면에서 자주 사용
- JSP, 타임리프가 대표적인 예시이며 현재는 타임리프를 주로 사용
* SSR을 사용하더라도, 자바스크립트를 통해 화면 일부를 동적으로 변경 가능 (무조건 정적인 페이지는 아님)
2. Natural Template
- 타임리프는 순수 HTML을 최대한 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 HTML 내용을 확일할 수 있음 (퍼블리셔로부터 파일을 전달받을 때 리뷰하기 유용함)
- 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과 확인 가능
- 정리를 하자면, 타임리프 파일을 열었을 때 동적으로 결과가 렌더링 되지는 않지만 HTML 마크업 결과가 어떻게 구성되는지 바로 확인 가능
- 순수 HTML을 그대로 유지하면서 View Template도 사용할 수 있는 타임리프의 특징을 Natural Template이라고 함
* JSP의 경우 JSP 소스코드와 HTML이 섞여있어 렌더링 전까지 파일 내용을 확인하기 힘듦
3. 스프링 통합 지원
- 타임리프는 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원
- 스프링에서 권장하고 있는 템플릿
- html 파일 상단에 <html xlmns:th="http://www.thymeleaf.org">를 포함시켜주면 적용 가능
타임리프에서 기본으로 제공하는 객체들
1. 기본 객체
- ${#request}
- ${#response}
- ${#session}
- ${#servletContext}
- ${#locale}
2. 편의 객체
- param: HTTP 요청 쿼리 파라미터 접근
- url이 http://localhost:8080/example? age=20 일 때 param.age로 접근 가능
- session: HTTP session 접근
- @: 스프링 빈 접근
타임리프 템플릿 레이아웃
- 공통적으로 사용하는 코드 블록들을 레이아웃에 넘겨서 사용하는 방식
- 보통 공통적으로 사용하는 라이브러리들을 모아놓은 헤더 파일을 만들고 해당 파일을 템플릿으로 사용
- 또한, 회사명이나 저작자를 명시하는 footer도 템플릿으로 자주 사용
간단 예시
- template/layout/baseExample 레이아웃을 활용하여 template/layout/layoutExample html을 렌더링 하는 예시
- common_header th:fragment 기능을 활용하여 공통 head 내 타이틀과 css 추가
- th:replace 기능을 통해 ~{::title}에 title을 넘기고, ~{::link}에 link를 넘김 (th:block이므로 여러 link 넘기기 가능)
LayoutExample GetMapping
@GetMapping("/layoutExample")
public String layoutExample() {
return "template/layout/layoutExample";
}
template/layout/layoutExample 렌더링 전
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html xmlns:th="http://www.thymeleaf.org"> | |
| <head th:replace="template/layout/baseExample :: common_header(~{::title},~{::link})"> | |
| <title>공통 파일 예시</title> | |
| <link rel="stylesheet" th:href="@{/css/example.css}"> | |
| </head> | |
| <body> | |
| 예제 | |
| </body> | |
| </html> |
template/layout/baseExample
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html xmlns:th="http://www.thymeleaf.org"> | |
| <head th:fragment="common_header(title, links)"> | |
| <title th:replace="${title}">대체될 타이틀</title> | |
| <!-- 공통으로 사용하는 css --> | |
| <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"> | |
| <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}"> | |
| <!-- 공통으로 사용하는 js --> | |
| <script type="text/javascript" th:src="@{example.js}"></script> | |
| <!-- 추가될 link들 --> | |
| <th:block th:replace="${links}" /> | |
| </head> | |
| </html> |
template/layout/layoutExample 최종 렌더링 결과
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>공통 파일 예시</title> | |
| <!-- 공통으로 사용하는 css --> | |
| <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"> | |
| <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}"> | |
| <!-- 공통으로 사용하는 js --> | |
| <script type="text/javascript" th:src="@{example.js}"></script> | |
| <!-- 추가될 link들 --> | |
| <link rel="stylesheet" th:href="@{/css/example.css}"> | |
| </head> | |
| <body> | |
| 예제 | |
| </body> | |
| </html> |
* 전체 html에 적용하는 것도 가능 (html 태그에 th:fragment 적용)
비고
클라이언트 렌더링 (CSR) 간단 정리
- HTML 결과를 자바스크립트를 활용해 웹 브라우저에서 동적으로 생성해서 적용하는 기술
- 주로 동적인 화면에 사용하고 웹 환경을 마치 앱처럼 필요한 부분만 변경 가능
- React와 Vue.js가 대표적인 예시이고 이 둘은 CSR과 SSR을 모두 지원하는 웹 프레임워크
출처
인프런 스프링 MVC 1편 (김영한 강사님)
인프런 스프링 MVC 2편 (김영한 강사님)
반응형
'면접 준비' 카테고리의 다른 글
| 클라우드 컴퓨팅 간단 정리 (0) | 2023.02.14 |
|---|---|
| [Kafka] Kafka 개념 정리 (2) | 2021.08.31 |
| 도커 생명주기 (Docker Life Cycle) (0) | 2021.06.17 |
| 도커와 마이크로 서비스 아키텍처 개요 (Docker & MSA) (0) | 2021.06.16 |
| PRG 패턴 (Post/Redirect/Get) (2) | 2021.06.14 |