Thymeleaf

Thymeleaf

• 서버 사이드 HTML 랜더링 (SSR) 특징
• 백엔드 서버에서 HTML 을 동적으로 렌더링 하는 용도로 사용

네츄럴 템플릿

타임리프는 순수 HTML 을 최대한 유지하는 특징.
순수 HTML 을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는
타임리프의 특징.

간단한 표현 
변수 표현식 : ${...}
선택 변수 표현식 : *{...}
메시지 표현식 : #{...}
링크 URL 표현식: @{...}
조각 표현식: ~{...}

리터럴
텍스트 : 'one text', 'Another one!'
숫자 : 0, 34, 0.0, 12.3,
boolean : true, false
null : null
리터럴 토큰 : one, sometext, main

문자 연산
문자 합치기 : +
리터럴 대체 : |The name is ${name}|

산술연산
Binary operators: +, -, *, /, %
Minus sign (unary operator) : -

boolean 연산
Binary operators: and, or
Boolean negation (unary operator): !, not

비교와 동등
:>, <, >, < (gt, lt, ge, le)
55 :==,!= (eq, ne)

조건 연산:
If-then: (if) ? (then)
If-then-else: (if)? (then) (else)
Default: (value) ?: (defaultvalue)

특별한 토큰:
No-Operation: _

<h1>데이터 출력</h1>
<ul>
	<li>th:text 사용 <span th:text="${data}"></span></li>
    <li>컨텐츠 안에서 직접 출력 = [[${data}]]</li>
</ul>

일반적인 텍스트 출력 방식 th:text = ${data}형식
텍스트를 저장하고 추가적인 글을 써서 화면에 보임.

Thymeleaf로 서버데이터 html에 박아서 보내줄려면 특정 html 파일에 서버데이터를 넣을려면

• 서버 API 함수의 파라미터에 Model model을 넣는다
• API안에서 model.addAttribute("작명", 전송할 데이터)
• html 태그에 th:text = "${작명}"

---

SpringEL

타임리프에서 변수를 사용할 때는 변수 표현식을 사용.
위에 th:text 와 비슷한 맹락이지만 쓰임새가 다름.

@GetMapping
public String variable(Model model){
	User user A = new User("userA", 10);
    User user B = new User("userB", 20);
    
    List<User> list = new ArrayList<>();
    list.add(userA);
    list.add(userB);
    
    Map<String, User> map = new HashMap<>();
    map.put("userA", userA);
    map.put("userB", userB);
    
    model.addAttribute("user", userA);
    model.addAttribute("users", list);
    model.addAttribute("userMap", map);
    
    return "basic/variable";
 } 

위와 같이 User 오브젝트의 정보를 모델에 담는경우, 리스트를 담는경우, 또 맵을 담는 경우

Object

• user.username: user의 username을 프로퍼티 접근 =>user.getUsername()
• user['username'] : 위와 같음 =>user.getUsername()
• user.getUsername() : user의 getUsername()을 직접 호출

List

• users[0].username: List에서 첫 번째 회원을 찾고
  username프로퍼티 접근->list.get(0).getUsername()
• users[0]['username']: 위와 같음
• users[0].getUsername(): List에서 첫번째 회원을 찾고 메서드 직접 호출

Map

• userMap['userA'].username: Map에서 userA를 찾고, username 프로퍼티 접근
• map.get("userA").getUsername()
• userMap['userA']['username'] : 위와 같음
• userMap['userA'].getUsername(): Map에서 userA를 찾고 메서드 직접 호출

출력하는 방법은 위와 같이 쓸 수 있다.

<ul>List
	<li>${users [0].username} = <span th:text="${users [0].username}">
</span></li>
	<li>${users [0]['username']}=<span th:text="${users [0].['username']}">
<span></li>
	<li>${users}