타임 리프는 서버사이드 HTML 렌더링(SSR), 내츄럴 템플릿, 스프링 통합 지원이 있음.
이미 vue를 사용할 줄 아니 그냥 이런게 있구나 하고 배우는데 얼마 안걸린다고 하니 필요할 때 공부하자.
HTML 뷰 템플릿 위에
<html xmlns:th="http://www.thymeleaf.org">선언하면 사용 가능.
Tutorial: Using Thymeleaf
1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a
www.thymeleaf.org
text, utext
이스케이프는 model.addAttribute("data", "<br>Hello Spring!</br>")로 했다면, <와 >는 html과 <, &rt같은 걸로 반환해서 출력하자고 해서 html에 <이면 <으로 인식하자는 사전 약속으로 <가 적혀있고 <가 표시된다. 이걸 언이스케이프 하려면 utext나 [[(...)]]를 하면 된다.
변수 - SpringEL
기본 객체들은 thymeleaf에서 하도 많이 쓰다보니 기본적으로 지원해주는 것들
#request하면 HttpServletRequest 해서 model.addAttribute("reqeust", reqeust) .. 같은 형식으로 해줘야 하지만 하도 많이 쓰다보니 그냥 #request하면 저 역할을 대신 해준다. 여기서 세션은 request 요청 한번 날리고 끝나는 유저와의 관계에서 브라우저 종료까지 저장하도록 하는 저장소를 말한다.
편의 객체는 또 GET query로 하도 많이 받으니 thymeleaf에서 자체적으로 지원해주고, session 가져올 수 있고 bean에 등록되어 있는거면 그냥 불러올 수 있다는 점.
유틸리티 객체와 날짜는 문서 설명이 잘 되어있어서 기본만 해본다. 필요하면 찾아봐라.
Tutorial: Using Thymeleaf
1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a
www.thymeleaf.org
Tutorial: Using Thymeleaf
1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a
www.thymeleaf.org
타임리프에서 자바8의 날짜 기능인 LocalDate, LocalDateTime, Instant를 사용하려면 추가 라이브러리(java8time)가 필요한데, 스프링부트 타임리프를 설치하면 기본적으로 들어있다.
link
Tutorial: Using Thymeleaf
1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a
www.thymeleaf.org
남는건 자동으로 query로 빠짐
리터럴(Literals). 문자 자체를 입력.
리터럴은 문자나 숫자같이 고정된 값을 뜻한다.
문자를 '로 감싸면 리터럴인데 매번 '를 하는게 귀찮아 띄어쓰기 없으면 리터럴로 인식한다. 그래서 띄어쓰기가 있는데 리터럴로 하고 싶으면 '로 감싸면 됨.
연산
특이한건 엘비스 연산자에서 없으면 아무것도 실행하지 않아(_) html의 기본값이 실행된 것.
속성 값 설정은 자바스크립트에서도 html에 클래스를 붙일 수 있는것 마냥 붙이고 속성을 바꾸고 할 수 있음.
attrappend, attrprepend의 주의점은 그냥 띄어쓰기 없이 그대로 붙이기 때문에 띄어쓰기를 해야함.
반복은 java의 map같은 다른 컬렉션들도 지원 가능한 것처럼 리스트도 each로 지원가능
특이한 건 Stat이 있는데, 현재 인덱스 번호에 대한 정보, 예를 들면 마지막인지, 짝수인지 홀수인지 등 인덱스 자체에 대한 정보를 알아낼 수 있다. 또 생략하면 (현재 꺼내는 변수 이름) + Stat으로 사용 가능.
조건부 평가
if에 해당하지 않는 태그는 그 태그 자체가 날아감.
switch도 사용 가능.
주석
그냥 html 주석은 들어가는데 타임리프 주석은 실제 컴파일할 때 주석은 없어지는 것 마냥 없어지면서 나감. 프로토타입은 렌더링되면 나오고 없으면 안되고 한다는 것.. 잘 쓸일 없다.
블록은 타임리프의 유일한 자체 태그다. 태그로 동작하는 타임리프가 해결하기 어려운 것을 처리하기 위해서 만듬.
안쓰는게 좋은데 쓸 수 밖에 없을때가 있다.
지금은 each문으로만 하기 어려울 때. 한줄 한줄 다 해야 하니. block은 html 정식 태그가 아니니 렌더링할 때 사라진다.
내 생각으론 div로 묵을 수도 있겠지만 굳이 묶기 용 div를 따로 생성할 상황이 안될 때 쓸 듯.
자바스크립트 인라인
타임리프는 자바스크립트에서 타입리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
인라인으로 자바스크립트를 넣어주면 html에서 javascript 내용 넣어줄 때 알아서 자동으로 해주고 하는거임.
템플릿 조각은 재활용성을 위해 템플릿 분리해서 저장해서 조합하는 것.
:: copy하면 해당 템플릿의 copy이름으로 된 fragment 가져와서 사용
다음은 이 템플릿 레이아웃을 나만의 페이지를 만들어 잘 사용해보자.
조금 헷갈릴 수 있다.
::title, ::link를 했을 때 앞에 뭐가 없으니 현재 페이지의 title태그, link태그 자체를 저 인자에 넣는것이다.
인자를 넘겨받은 함수는 th:replace로 tag 통째로 교체한다.
html 자체를 교체하면서 더 확장할 수도 있다.
Main으로 들어왔지만 이 Main을 File의 것으로 통채로 replace한다. 사실상 기본 베이스는 밑의 layoutFile인 것.
즉, Main은 title, section같은 tag 저장용이다.
'CS > 김영한 스프링 강의' 카테고리의 다른 글
| 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 섹션3. 메시지, 국제화 (0) | 2023.07.27 |
|---|---|
| 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 섹션3. 타임리프 - 스프링 통합과 폼 (0) | 2023.07.25 |
| 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 섹션7. 스프링 MVC - 웹 페이지 만들기 (0) | 2023.07.22 |
| 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 섹션6. 스프링 MVC - 기본 기능 (0) | 2023.07.20 |
| 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 섹션6. 스프링 MVC - (외전) 로깅 간단히 알아보기 (0) | 2023.07.17 |