능글맞은 구렁이
SpringBoot-Thymeleaf 본문
스프링 MVC와 thymeleaf
1. 스프링 부트에서 별도의 설정을 통해 JSP등을 사용할 수 있지만, 스프링 부트는 원래 목적이 보다 빠르고 편리하게 개발하는 것을 지향하기때문에 JSP보다는 쉽고 간결하게 UI를 해결할 수 있는 Template 플러그인을 사용하여 개발한다.
기본적으로 FreeMarket, Mustache등을 이용하여 개발한다.
그 중에서 thymeleaf를 사용하는이유는
첫번째. JSP와 유사하게 ${}을 별도 설정 없이 바로 사용 가능
두번째, Model에 담긴 객체를 JavaScript에서도 수비게 처리 가능
세번째, 연산, 포멧과 관련된 기능에 대한 추가 개발 없이 사용할 수 있도록 지원해준다.
네번째, 개발도구 (즉, ~~.HTML) 파일로 생성하는데 문제가 없고, 해당 파일 호출시
확장자를 이용하지 않고 호출 가능하다.
2. JSP와 thymeleaf
/**JSP**/
<%@ page ~~~ %>
<%@ taglib~~%>
//와 같이 내부에서 전달 된 객체를 사용하기 위해 여러가지 설정을 주어야 한다.
/**thymelaf**/
<html xmlns:th=~~~>이 부분만 미리 설정하면된다.※ thymeleaf 프로젝트 생성시 주의 사항:
1. IntellJ는 Spring Boot 버전이 기본값으로 최신 버전이 설정 되어 있기 때문에 thymeleaf을 완벽하게 지원할 수
있는 버전으로 변경하여 생성해야 한다. (4.2.8버전)
2. thymeleaf을 이용하는 프로젝트는 내부 코드 변경 후에 만들어진 결과를 서버내에 보관하는 것이
기본값으로 설정되어 있다. 보관하지 않도록 설정하려면 application.properties파일 내에 별도의 설정을
해주어야 한다. (spring.thymeleaf.cache=false 추가)
/**application.properties**/
server.port=9999
spring.thymeleaf.cache=false1. bulid.gradle 설정 부분 변경
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
compileOnly 'org.projectlombok:lombok'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
annotationProcessor 'org.projectlombok:lombok'
providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
// testImplementation 'org.springframework.boot:spring-boot-starter-test'
testImplementation('org.springframework.boot:spring-boot-starter-test') {
exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
}
compile group: 'org.thymeleaf.extras', name: 'thymeleaf-extras-java8time'
}<span th:if = "${dto.sno % 5 == 0}" th:text = "${'---'+dto.sno}"></span>
<span th:unless = "${dto.sno % 5 == 0}" th:text = "${dto.first}"></span>
</li>
-------------------------------------------------------
th:text 를 이용
th:text = "${조건} ? 할일(true)"
th:text = "${조건} ? 할일(true) : 할일(false)"
<ul>
<li th:each = "dto, state : ${list}" th:text = "${dto.sno % 5 == 0} ? ${dto.sno}" >
</li>
</ul>
<ul>
<li th:each = "dto, state : ${list}" th:text = "${dto.sno % 5 == 0} ? ${dto.sno} : ${dto.first}" >
</li>
</ul>
------------------------------------------------------------
스타일 적용
th:class 를 이용
예) 5의 배수에 해당하는 객체들에게만 스타일을 적용하여 출력
<ul>
<li th:each = "dto, state : ${list}" th:class = "${dto.sno % 5 == 0} ? 'target'" th:text = "${dto}">
</li>
</ul>
--------------------------------------------------------
링크 적용
th:href 를 이용
1. 단순하게 링크만 사용할 경우
<a th:href = "@{주소}"> 출력내용 </a>
2. 파라미터 추가
<a th:href = "@{주소(파라미터명=값)}"> 출력내용 </a>
'Framework > SpringBoot' 카테고리의 다른 글
| SpringBoot-Thymeleaf(레이아웃) (0) | 2021.07.09 |
|---|---|
| springBoot-MVC/View Templates (0) | 2021.07.08 |
| SpringBoot-Query (0) | 2021.07.07 |
| spring boot-JPA (0) | 2021.07.07 |
| Spring Boot-Server.port (0) | 2021.07.06 |
