템플릿 엔진의 개요
템플릿 엔진이란?
뷰는 사용자에게 보여줄 내용을 처리 결과 데이터를 가지고 HTML을 생성해서 클라이언트에응답을 돌려주는 역할을 함.
템플릿 엔진은 프로그래밍 언어별로 많지만 간단하게 설명하면 '데이터를 미리 정의된 템플릿에 바인딩 해서 뷰의 표시를 도와주는 것' 입니다.
타임리프란?
- HTML 기반의 템플릿 엔진으로, 정해진 문법으로 작성하면 페이지를 동적으로 조립해줌(조건, 반복 구문등 사용 가능)
- HTML을 기반으로 하기 때문에 최종 출력을 생각하면서 뷰를 만들 수 있음. 타임리프를 사용하면 디자이너와 쉽게 분업 가능
Model 인터페이스의 사용법
Model 인터페이스란?
- 처리한 데이터를 뷰에 표시하고 싶을 경우 데이터를 전달하는 역할을 함
- 스프링 MVC에 의해 관리되며, 수동 또는 자동으로 객체를 저장하고 관리하는기능을 제공
- Model을 이용하고 싶은 경우 요청 핸들러 메서드의 인수에 Model 타입을 전달하면 스프링 MVC가 자동으로 Model 타입 인스턴스를 설정
중요한 메서드
addAttribute
특정 이름에 대해 값을 설정. 저장하고 싶은 값에 별명을 붙인다고 생각하면 됨.
Model addAttribute(String name, Object value)
name : 이름(별명)
value : 값(저장하고 싶은 객체)Model을 사용하는 프로그램 만들기
프로젝트 생성
의존성 추가
- Spring Boot DevTools(개발 툴)
- Thymeleaf(템플릿 엔진)
- Spring Web(웹)
컨트롤러 생성
@Controller
@RequestMapping("hello")
public class HelloModelController {
@GetMapping("model")
public String helloView(Model model){
//Model 에 데이터 저장
model.addAttribute("msg", "타임리프!");
//반환값으로 뷰 이름을 돌려줌
return "helloThymeleaf";
}
}
뷰 생성
<!DOCTYPE html>
<!--타임리프 사용 선언-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--추가-->
<h1 th:text="${msg}">표시되는 부분</h1>
</body>
</html>th:text의 설명
| 속성 | 기능 개요 |
|---|---|
| th:text | 속성값에 지정된 값을 새니타이즈(Sanitize)하여 출력 |
| th:utext | 속성값에 지정된 값을 출력(새니타이즈 X) |
새니타이즈란?
위험한 코드나 데이터를 변환 또는 제거하여 무력화하는 것
간단히 설명하면 '특별한 의미를 가진 문자의 특별함을 무효화하고 의도하지 않은 움직임을 봉쇄' 하는 것. 새니타이즈는 웹사이트의 입력 폼을 통해 악의적인 코드가 입력되었을 때 등에 유용하게 사용
타임리프 사용법
타임리프 복습
- 스프링 부트에서 추천하는 템플릿 엔진
- HTML로 템플릿을 작성하기 때문에 웹 브라우저로 파일의 내용을 표시하고 확인하면서 뷰를 만들 수 있음.
- 스프링 부트의 기본 설정으로 src/main/resources/templates 폴더 아래에 '요청 핸들로 메서드의 반환값 + .html' 파일 참조
사용법
직접 문자를 삽입
<!-- 01: 직접 문자를 삽입-->
<h1 th:text="'hello world'"> 표시하는 부분</h1>직접 설정한 문자를 출력할 때 th:text="출력 문자"로 출력 가능
독자 문법인 "${}"사용 가능하며 속성값의 값 설정에 큰따옴표를 사용하므로 문자를 설정할 때는 작은 따옴표로 둘러싸야함
인라인 처리
<!-- 02: 인라인 처리 -->
<h1>안녕하세요! [[${name}]]씨</h1>[[${}]]를 사용하면 태그를 속성에 추가하는 대신 본문에 변수를 포함할 수 있음.
고정값과 변수를 조합하고 싶은 경우에는 이 방법이 편리함
값 결합
<!-- 03: 값 결합 -->
<h1 th:text="'오늘의 날씨는 ' + '맑음' + '입니다'">표시하는 부분</h1>+를 이용해서 값을 결합 가능
값 결합(리터럴 치환)
<!-- 04: 값 결함(리터럴 치환) -->
<h1 th:text=":안녕하세요 ${name}씨:">표시하는 부분</h1>값 결합은 리터럴 치환으로 사용하는 것으로 ": 문자 :" 로 기술할 수 있음.
지역 변수
<!-- 05: 지역 변수 -->
<div th:with="a=1, b=2">
<span th:text=":${a} + ${b} = ${a+b}:"></span>
</div>th:with="변수 이름 = 값" 으로 변수에 값을 할당할 수 있음. 변수의 범위는 정의된 태그 내부에서만 사용 할 수 있음
비교와 등가
<!-- 06: 비교와 등가 -->
<span th:text="1 > 10"></span>
<span th:text="1 < 10"></span>
<span th:text="1 >= 10"></span>
<span th:text="1 <= 10"></span>
<span th:text="1 == 10"></span>
<span th:text="1 != 10"></span>
<span th:text="길동 == 길동"></span>
<span th:text="길동 != 길동"></span>조건 연산자
<!-- 07: 조건 연산자 -->
<p th:text="${name} == '길동'? '길동입니다!' : '길동이가 아닙니다'"></p> 조건이 true인 경우 값1이 출려되고 false인 경우에는 값2가 출력
조건 분기(true)
<!-- 08: 조건 분기(true) -->
<div th:if="${name} == '길동'">
<p>길동 씨 입니다!</p>
</div>th:if="조건" 에서 true일 경우 작성한 태그와 자식 요소를 표시
조건 분기(false)
<!-- 09: 조건 분기(false) -->
<div th:unless="${name} == '영희'">
<p>영희 씨가 아닙니다</p>
</div>th:unless="조건" 에서 false일 경우 작성한 태그와 자식요소를 표시
switch
<!-- 10: switch -->
<div th:switch="${name}">
<p th:case="길동" th:text=":${name}입니다!:"></p>
<p th:cae="영희" th:text=":${name}입니다!:"></p>
<p th:case="철수" th:text=":${name}입니다!:"></p>
<p th:case="*">명부에 없습니다</p>참조(데이터를 결합한 객체)
<!-- 11: 참조(데이터를 결합한 객체) -->
<p th:text="${mb.id}">ID</p>
<p th:text="${mb.name}">이름</p>
<p th:text="${mb['id']}">ID : []로 접근</p>
<p th:text="${mb['name']}">이름 : []로 접근</p>캡슐화된 필드를 참조하는 경우 public 접근 제하낮의 getXxx()라는 Getter메서드를 작성하여 '객체명 필드' 형식으로 값을 참조할 수 있음 또한 객체명['필드'] 같이 대괄호로도 참조할 수 있음.
참조(th:object)
<!-- 12: 참조(데이터를 결합한 객체) -->
<p th:text="${mb.id}">ID</p>
<p th:text="${mb.name}">이름</p>
<p th:text="${mb['id']}">ID : []로 접근</p>
<p th:text="${mb['name']}">이름 : []로 접근</p>데이터를 저장한 객체를 'th:object'에 설정하고 자식요소에서 '*{필드명}' 으로 사용
참조(List)
<!-- 13: 참조(List) -->
<p th:text="${list[0]}">방위</p>
<p th:text="${list[1]}">방위</p>
<p th:text="${list[2]}">방위</p>
<p th:text="${list[3]}">방위</p>참조(Map)
<!-- 14: 참조(Map) -->
<p th:text="${map.kim.name}">이름 1</p>
<p th:text="${map.lee.name}">이름 2</p>
<p th:text="${map['kim']['name']}">이름 1 : []로 접근</p>
<p th:text="${map['lee']['name']}">이름 2 : []로 접근</p>Map 요소를 참조하려면 '키'를 이용하여 값을 참조
반복
<!-- 15: 반복 -->
<div th:each="member : ${members}">
<p>[[${member.id]] : [[${member.name]]</p>
</div>반복 상태
<!-- 15: 반복 상태-->
<div th:each="member, s : ${members}" th:object = "${member}">
<p>
index -> [[${s.index}]], count -> [[${s.count}]],
size -> [[${s.size}]], current -> [[${s.current}]],
even -> [[${s.even}]], odd -> [[${s.odd}]],
first -> [[${s.first}]], last -> [[${s.last}]],
[[*{id}]] : [[*{name}]]
</p>
</div>반복 상태 변수
| 상태 변수 | 기능 개요 |
|---|---|
| index | 0부터 시작하는 인덱스, 현재 인덱스를 표시 |
| count | 1부터 시작하는 인덱스, 현재 인덱스를 표시 |
| size | 반복 처리하는 객체의 사이즈를 표시 |
| current | 현재 반복 요소의 객체를 표시 |
| even | 현재 요소가 짝수 번째인지 여부를 결정 짝수이면 true, 홀수이면 false 표시 |
| odd | 현재 요소가 홀수 번째인지 여부를 결정 홀수이면 true, 짝수이면 false 표시 |
| first | 현재 요소가 첫 번째 요소인지 여부를 결정 첫 번째이면 true, 아니라면 false 표시 |
| last | 현재 요소가 마지막 요소인지 여부를 결정 마지막이라면 true, 아니라면 false 표시 |
유틸리티 객체
타임이프에서 자주 사용되는 클래스를 "#name"이라는 상수로 정의하고 있어서 그대로 변수표현식에서 사용 가능
유틸리티 객체 모음
| 유틸리티 객체 | 기능 개요 |
|---|---|
| #strings | 문자 관련 편의 기능 |
| #numbers | 숫자 서식 지원 |
| #bools | 불리언 관련 기능 |
| #dates | java.util.Date 서식 지원 |
| #object | 객체 관련 기능 |
| #arrays | 배열 관련 기능 |
| #lists | List 관련 기능 |
| #sets | Set 관련 기능 |
| #maps | Map 관련 기능 |
다른 템플릿 삽입하기
'프래그먼트(fragment)'란 단편이란 의미.
프로그래먼트화란 여러 템플릿에서 같은 내용이 사용되는 경우 공통 내용을 별개의 파일로 만들고 필요한 부분에 추가하는 것을 말함.
frament.html에 공통 내용을 작성하고 useThymeleaf.html에 공통 내용을 가져와 출력하는 부분을 작성
fragments.html
<!-- 프래그먼트 정의 -->
<span th:fragments="one">하나</span>
<span th:fragments="two">둘</span>
<span th:fragments="three">셋</span>useThymeleaf.html
<!-- 프래그먼트 사용하기 -->
<h1>Fragment를 아래에 삽입</h1>
<div id="one" th:insert="fragment :: one"></div>
<div id="three" th:replace="fragment :: three"></div>th:inser는 삽입되는 userThtymeleaf.html의 태그안에 삽입 대상 fragment.html의 태그 내용이 삽입
th:replace는 삽입 대상 fragment.html의 태그 전체로 대체
