day45 TIL
day45 느낀점
프로젝트 2일차이다. 저번에 비해 git을 사용할 때 충돌 오류가 확실히 덜 나고 당황하지 않고 해결할 수 있어 좀 성장함을 느꼈다.^^ flask에서 spring 환경으로 옮기는 거 할 만할 거라고 생각했지만 진짜 프론트 코드 때문에 힘들다. 여기는 정리가 좀 필요하다. 그래서 오늘은 새로운 템플릿 엔진인 타임리프에 대해 오늘 소개해 보겠다.
Thymeleaf란?
타임리프는 흔히 View Template(뷰 템플릿)이라고 부른다. 뷰 템플릿은 컨트롤러가 전달하는 데이터를 이용하여 동적으로 화면을 구성할 수 있게 해준다. 기존 JSP에서는 jsp코드 때문에 html 파일 전체가 가독성이 떨어졌지만 타임리프를 사용하면 그러한 문제점을 해결할 수 있다. 타임리프는 html태그를 기반으로하여 th:속성을 이용하여 동적인 뷰를 제공한다.
Thymeleaf dependency 추가
dependencies {
...
// Thymeleaf (뷰 템플릿 엔진)
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
Thymeleaf 활용
- text: th:text
<h4 id="user_name" th:text="${post.writerNickname}">작성자 닉네임</h4>- href: th:href
<a th:href="@{/posting_update/{userId}/{postId}(userId=${post.writeUserId}, postId=${post.postId})}">수정하기</a>- 조건문: th:if & th:unless
<span class="icon is-small">
<i th:if="${likeByMe}" id="heart" class="fa-solid fa-heart fa-3x" aria-hidden="true"></i>
<i th:unless="${likeByMe}" id="heart" class="fa-regular fa-heart fa-3x" aria-hidden="true"></i>
</span>- 반복문: th:each
<div class="container" th:each="postImg:${post.postImgs}"> //
<img th:src="${postImg.imgUrl}">
</div>
Hello World!!