Day 61
1. 실전 프로젝트
오늘부터 실전 프로젝트에 들어갔다. 챌린지 팀이라 프론트까지 구현해야해서 오늘은 타임리프를 공부해봤다. 간단한 회원가입 창을 만들고 POST 요청까지 전송되는 것을 확인했다. 내일은 메인페이지와 코드를 조금 더 다듬는 작업을 할 생각이다. 오늘 공부한 내용을 정리하고 마치겠다.
타임리프(Thymeleaf)
텍스트
Model에서 담아준 데이터 출력하는 방법
// 예시
@GetMapping("signin")
public String signinPage(Model model) {
model.addAttribute("data", "test");
return "signin";
}<span th:text="${attributeName}"></span><span>hello [[${attributeName}]]</span>
예제
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>컨텐츠 데이터 출력하기</h1>
<ul>
<li>th:text 사용<span th:text="${data}"></span></li>
<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>
</body>
</html><ul>, <li> 태그
<ul> : 순서가 없는 목록 (unordered item)
<li> : <ul>의 항목 (list item)
변수
기본적인 변수 표현식 ${...}
- Object
data.field: data의 field 프로퍼티 접근 (data.getField())data['field']: 위와 같다(data.getField())data.getField(): data의 getField()메서드를 직접 호출 할 수 있다.
- List
list[0].field: List의 첫 번째 데이터를 찾아 field 프로퍼티 접근한다.list[0]['field']: 위와 동일하다.list[0].getField(): List에서 첫 번째 회원을 찾아 메서드를 직접 호출 할 수 있다.list.get(0).xxx: List의 get메서드를 통해 데이터를 찾아 프로퍼티 접근도 가능하다.
- Map
map['key'].field: Map에서 key를 찾아 field 프로퍼티에 접근한다.- ⇒
map.get('key').getField()와 동일하다.
- ⇒
map['key']['field']: 위와 동일하다.map['key'].getField(): Map에서 key를 찾아 직접 메서드를 호출한다.
지역변수 선언
th:with를 이용해서 지역변수 선언이 가능하다.
<div th:with="item=${list[0]}">
<ul>
<li>이름 : <span th:text="${item.username}"></span></li>
<li>나이 : [[${item.age}]]</li>
</ul>
</div><span> 태그
<span></span> 태그는 <div></div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰입니다.<div> 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점입니다.
이 둘의 차이를 쉽게 설명하자면, <div>는 줄 바꿈이 되지만, <span>은 줄 바꿈이 되지 않다는 점입니다.
속성 값
HTML 태그에 th:* 속성을 지정하는 방식으로 동작하며 속성이 적용될 경우 기존 속성을 대체하며 기존 속성이 없으면 새로 만든다.
th:attrappend: 속성 값의 값에 값을 추가한다th:attrprepend: 속성 값의 뒤에 값을 추가한다.th:classappend: class 속성에 자연스럽게 추가한다.
반복
타임리프에서 반복은 th:each를 사용한다.
→ 기본적인 사용법
<tr th:each="아이템 : ${반복할리스트}">
<td th:text="${아이템.프로퍼티1}">default value</td>
<td th:text="${아이템.프로퍼티2}">default value</td>
</tr>→ 선택 변수 표현식 사용법
<tr th:each="아이템 : ${반복할리스트}" th:object="${아이템}">
<td th:text="*{프로퍼티1}">default value</td>
<td th:text="*{아이템프로퍼티2}">default value</td>
</tr>반복자의 상태
반복자 + Stat 하면 반복자의 상태에 접근 가능하다.
예를들어 list의 변수명이 testList 이면 testListStat.size로 길이 값 출력이 가능하다.
<td>
index = <span th:text="${userStat.index}"></span>
count = <span th:text="${userStat.count}"></span>
size = <span th:text="${userStat.size}"></span>
even? = <span th:text="${userStat.even}"></span>
odd? = <span th:text="${userStat.odd}"></span>
first? = <span th:text="${userStat.first}"></span>
last? = <span th:text="${userStat.last}"></span>
current = <span th:text="${userStat.current}"></span>
</td>조건부 평가
조건에 해당하지 않으면 태그자체가 렌더링 되지 않는다.
if문
<td>
<span th:text="${user.age}">0</span>
<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>
</td>switch
<td th:switch="${user.age}">
<span th:case="10">10살</span> <span th:case="20">20살</span> <span th:case="*">기타</span>
</td>블록
타임리프의 유일한 자체태그 <ht>block. 렌더링 시 제거되는 태그. 타임리프의 속성을 사용하기 애매한 경우
→ th:each로 반복하고자 할 때 반복의 요소를 그룹화하고 싶은 경우
<th:block th:each="user : ${users}">
<div>
사용자 이름1 <span th:text="${user.username}"></span>
사용자 나이1 <span th:text="${user.age}"></span></div>
<div>
요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
</div>
</th:block>자바스크립트 인라인
객체를 그냥 변수에 집어넣으면 문자열로 들어가서 파싱하기 까다롭다.
model의 문자열같은 경우도 그냥 넣으면 ''가 없기 때문에 변수에 넣기 까다롭다.
→ <script th:inline="javascript">
→ 타임리프는 자바스크립트 인라인을 제공하는데 이거를 쓰면 편하다.
<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script>그냥 넣으면 잘 들어간다.
인라인의 each
<script th:inline="javascript">
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script>'항해99 > TIL | WIL' 카테고리의 다른 글
| WIL (8주) (0) | 2023.03.12 |
|---|---|
| 2023.03.11 (62일) (0) | 2023.03.12 |
| 2023.03.09 (60일) (0) | 2023.03.10 |
| 2023.03.08 (59일) (0) | 2023.03.09 |
| 2023.03.07 (58일) (0) | 2023.03.08 |