Thymeleaf 타임리프 오류, 주석, 적용, 사용법
아마, 첫 포스팅이지 않나 싶다..
첫 포스팅인 만큼 나에게도 다른분들에게도 도움이 되고자 쓴다.
처음 타임리프를 사용하는데 자꾸 오류가 나고 문제가 생긴다면 바로 3번으로 가길 바란다..
Spring Boot 기준,
1. 타임리프 적용하기
intelliJ를 쓰면 편하게 의존성을 넣고 프로젝트를 생성할 수 있다.
- 아래와 같이 build.gradle에 써주면 된다.
dependencies {
```` 위 생략 ````
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
// https://mvnrepository.com/artifact/org.thymeleaf.extras/thymeleaf-extras-java8time
implementation group: 'org.thymeleaf.extras', name: 'thymeleaf-extras-java8time', version: '3.0.4.RELEASE'
}+ 아래 'java8time'은 DateTime(날짜)을 처리할 때 필요한 것이니 같이 넣어주는게 좋다.
+ 혹시 최신버전이 필요하다면 Google에 'thymeleaf java8time maven'을 검색해주면 된다.
검색 후 맨 첫번째(상위) 검색 결과를 클릭하면 아래 링크과 같은 곳으로 들어갈 수 있을것이다.
+ 링크도 달아 놓을테니 필요한 분께 도움이 됬으면 한다.
https://mvnrepository.com/artifact/org.thymeleaf.extras/thymeleaf-extras-java8time
다 했다면,
intelliJ 상단 우측에
이러한 아이콘이 생긴다. 이 친구를 눌러주면 그래들이 동기화 된다.
※ 꼭 눌러야한다. 안누르면 적용이 안된다.
2. Thymeleaf HTML 사용법
사용법은 생각보다 HTML과 다를게 없다.
상단 html 태그에 'xmlns:th="http://www.thymeleaf.org'만 넣어주면 된다.
<html lang="en" xmlns:th="http://www.thymeleaf.org">
실제로 태그를 통해 사용할때는, 태그 안에 속성을 줄때 앞에 'th:' 만 넣어주면 타임리프를 주체로 실행된다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>
<a th:href="/ex01/num">링크바로가기</a>
</li>
</ul>
</body>
</html>HTML에서 지원하는 속성은 거의 갖고 있다고 한다.
타임리프에서 지원하는 개별 속성도 있는 것 같으니 이건 사용하면서 찾아보기로 하고..
간략하게 한개만 더 알아보도록 하자!
<!-- dto라는 곳에 여러가지 데이터를 담았다고 가정하고 진행한다. -->
<ul>
<li th:each="dto:${list}">
<a th:href="@{ '/ex01/num/' + ${dto.idx} }">링크 바로가기</a>
</li>
</ul>위 코드만 본다면, 타임리프는 ${}와 @{}를 사용하는 것을 알 수 있다.
el태그 형식과 비슷하다고 보면 될 것 같다.
${} - 기본 사용 형태
@{} - 링크를 처리할 때 사용함.
그 외에도 ()와 # 등 다른 형식도 있지만 여기선 다루지 않겠다.
+ 이걸 쓸 때 나는 잘 모르는 부분이 많다.. 공부해서 다시 업데이트 하도록 해야겠다.
3. Thymeleaf 주석 사용방법 (feat. 영문모를 오류 해결법)
아마 많은 분들이 타임리프를 처음 쓴다면
주석이 왜 자꾸 구문을 타지? 왜 자꾸 Run하면 에러가 뜨지?
많이 겪으실 것 같다.. 이런 분들은
결론부터 말하자면 주석 사용법이 잘못되었다.
타임리프는 html에 걸어주다보니, HTML단 안에서 동작하는 모든 것은 thymeleaf의 영향을 받는다.
주석도 예외가 아니였던 것이다...
타임리프의 주석 처리방법은 <!--/* */--> 이니 꼭 명심하도록 하자.
※ 이 외에도 <!--/*/ /*/-->라는 프로토타입 주석? 등 여러가지가 있으니 알아보도록 하자!
위 사진과 같이 쓴다면 HTML에 표기되지도 않고 타임리프도 안탄다.
그리고 오류도 없어질 것이다.
만약 이걸로 오신분이 계시다면 해결되었으면 좋겠다.
※ 이 문제가 아니라면.. 뒤로가기...