$$config title: ?타임리프(Thymeleaf) 기초 keywords: - 타임리프 - 스프링부트 - 레이아웃 $$ # ? 타임리프란? - 타임리프, Thymeleaf - 컨트롤러가 전달해주는 데이터를 이용하여 화면을 구성할 수 있도록 해주는 뷰 템플릿 - fragment를 통해 header, footer 등을 나누어 구성할 수 있음 # ? 타임리프 적용 방법 - 본인이 사용하고 있는 빌드 도구에 알맞게 따라하시면 됩니다. - 해당 글은 Gradle 위주로 작성되어 있습니다. ## ✔ Gradle - bulid.gradle ```gradle dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' } ``` ## ✔ Maven - pom.xml ```xml org.springframework.boot spring-boot-starter-thymeleaf ``` ## ✔ HTML ```html ``` - xmlns : XML 문서 상에서 namespace를 지정하는 용도로 사용되는 속성 - th : 타임리프(Thymeleaf) 앞 두 글자를 딴 것, 타임리프 사용 시 이용하는 문법 중 하나 # ? 표현식 | 표현 대상 | 표현식 | | --- | --- | | 변수 | ${hello} | | 객체 변숫값 | *{hello}, ${exam.hello} | | 메세지 | #{hello} | | 링크 | @{hello} | - 메세지는 message.properties에 표기된 내용만 사용할 수 있습니다. # ? 기초 문법 | 문법 | 간단 설명 | | --- | --- | | th:text | 화면에 값을 출력함 | | th:utext | html 태그를 반영하여 출력함 | | th:inline | 자바스크립트를 타임리프 상에서 사용할 수 있도록 해줌 | | th:with | 변수 값을 지정해서 사용 가능 | ## ✔ th:text ```html

hello

``` - th:text 안에 변수, 메세지 등을 넣었을 경우 태그 안의 내용이 해당 값으로 바뀌어 출력됩니다. - th:text=#{hello}를 html 태그 안에 사용하였다면, 태그 안에 있던 문자, 숫자는 없어집니다. ## ✔ th:utext ```html ``` - th:utext는 th:text와 다르게 html 태그를 반영하여 출력해 줍니다. # ? 제어문 | 자바 | 문법 | 간단 설명 | | --- | --- | --- | | for each | th:each | 반복문 | | if else | th:if, th:unless | 조건문 | | switch case | th:switch, th:case | 조건문| | | th:block | html 태그 없이 단독으로 사용하고자 할 때 사용| ## ✔ th:each ```html ``` ## ✔ th:if, th:unless ```html ``` ## ✔ th:switch, th:case ```html a b ``` - 변수 exam이 a일 때 값인 'a', b일 때 값인 'b'가 출력됩니다. # ? 객체 받는 법 ExamController.java ```java @GetMapping("/exam") public String example(Model model) { model.addAttribute("exams", exams); return "exam"; } ``` - GetMapping을 통해 매핑 - 인자로 Model을 받고 addAttribute를 통해 객체를 내보냄 --- exam.html ```html ``` - th:action을 통해 컨트롤러와 매핑 - th:object를 통해 컨트롤러가 보내온 객체를 받음 - object가 쓰인 태그 내부에서는 자유롭게 객체를 사용할 수 있음 - 에러 메세지는 스프링 BindingResult를 통해 사용 가능 # ? 타임리프 레이아웃 ## ✔ 라이브러리 불러오기 ### ▪ Gradle ```gradle dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation group: 'nz.net.ultraq.thymeleaf', name: 'thymeleaf-layout-dialect', version: '2.4.1' } ``` ```yml thymeleaf: prefix: classpath:templates/ suffix: .html check-template-location: true cache: false mvc: static-path-pattern: "/static/**" ``` | 속성 | 설명 | | --- | --- | | prefix: classpath: templates/ | templates/ 에서 타임리프 관리 | | suffix : .html | 파일 확장자가 html | | check-template-location | templates 디렉토리에 파일 유무 체크, 없으면 에러 발생 | | cache | 타임리프에 대한 캐시 설정 | | static-path-pattern | 정적 리소스인 "/static/" 패턴 정의 | ### ▪ maven ```xml org.springframework.boot spring-boot-starter-thymeleaf nz.net.ultraq.thymeleaf thymeleaf-layout-dialect 2.4.1 ``` ## ✔ 파일 경로 ? resource > ? fragments - header.html - footer.html > ? layouts - layout.html ### ? fragment란? - 중복된 요소를 조각 단위로 분리해서 사용하는 것 - header, footer를 fragment로 사용하곤 함 ### ? layout이란? - fragment를 조합하여 레이아웃처럼 쓸 수 있게 해줌 ## ✔ 레이아웃 관련 문법 | 문법 | 설명 | | --- | --- | | th:replace | 태그 전체를 교체 | | th:insert | 태그 내부에 fragment 삽입 | | th:fragment | header, footer 처럼 모든 페이지에서 보여주는 항목인 경우 따로 분리해서 관리함 | ### th:replace ```html

``` ### th:insert ```html

exam

``` ### th:fragment ```html

``` ## ✔ 레이아웃 연결 ```html ``` ## ✔ 예제 fragments/header.html ```html

``` layouts/layout.html - 공통으로 적용할 레이아웃, - 레이아웃을 html 파일에 연결하면 적용됨 ```html

``` index.html ```html exam

```