1. Timeleaf문법

[설명]
1. 순수 html file을 웹 브라우저에서 열어도 내용 확인 가능하며, Server를 통해서 View 템플릿을 거치면 동적으로 변경된 결과 확인 가능하기 때문에 사용합니다
2. 순수 html을 그대로 유지하면서 View 템플릿도 사용할 수 있는 Timeleaf의 특징을 네츄럴 템플릿이라 말합니다
3. **View Templete Engine**으로 JSP, Freemarkerd와 같이 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 합니다
[장점]
1. 코드를 변경하지 않기 때문에 디자인 팀과 개발 팀간의 협업이 편해집니다
2. JSP와 달리 Servlet Code로 변환되지 않기 때문에 비즈니스 로직과 분리되어 오로지 View에 집중할 수 있습니다
3. 서버상에서 동작하지 않아도 되기 때문에 서버 동작 없이 화면을 확인할 수 있고, 더미 데이터를 넣고 화면 디자인 및 테스트에 용이합니다
[적용]

Gradle 설정

Maven 설정
[예시 및 기능]
1. th:text
  1. JSP의 EL 표현식인 ${}와 마찬가지로 ${} 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근할 수 있습니다
```
<div>
	<p th:text="${name}">th:text 사용</p>
	<p>Name : [[${name}]]</p>
<div>


```
  1. Controller에서 model에 name키로 Test를 넣었다고 생각하면, 첫 번째 값은 th:text문장을 name이 대체합니다
  2. 두 번째 값은 [[]]문법을 사용하면 그 안에 바로 데이터가 출력한다는 의미입니다
2. th:utext
  1. < 를 태그의 시작이 아니라 문자로 표현할 방법이 필요한데, 이것을 HTML 엔티티 라고 합니다
  2. 특수문자를 HTML 엔티티로 변경하는 것을 이스케이프 라고 합니다
  3. 기본적으로 타임리프가 제공하는 th:text와 [[]]는 기본적으로 이스케이프를 제공합니다
3. SpringEL
  1. 타임리프에서 변수를 사용할 때는 변수 표현식을 사용합니다
  2. [예시]
```
@GetMapping("/variable")
public String variable(Model model){
    User userA = new User("userA", 10);
    User userB = new User("userB", 20);

    List<User> list = new ArrayList<>();
    list.add(userA);
    list.add(userB);

    HashMap<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";
```
```
<div>
	<p>${user.username} : <span th:text="${user.username}"></span></p>
<div>


```
4. th:with="${}"
  1. 변수형태의 값을 재정의하는 속성이다. 즉, **th:with**를 이용하여 새로운 변수값을 생성할 수 있습니다
  2. <div th:with=”userId=${number}” th:text=”${usesrId}”>
5. th:value="${}"
  1. input의 value에 값을 삽입할 때 사용합니다
  2. 여러개의 값을 넣을땐 “ + ” 기호를 사용합니다
  3. <input type="text" id="userId" th:value="${userId} + '의 이름은 ${userName}"/>
Form
1. th:action="@{}"
  1. <form> 태그 사용시, 해당 경로로 요청을 보낼 때 사용합니다
2. th:object="${}"
  1. <form> 태그에서 데이터를 보내기 위해 Submit을 할 때 데이터가 th:object 속성을 통해 object에 지정한 객체에 값을 담아 넘긴다. 이때 값을 **th:field**속성과 함꼐 사용하여 넘깁니다
  2. Controller와 View 사이의 DTO클래스 객체라고 생각하면 됩니다
3. th:field="*{}"
  1. **th:object**속성과 함께 **th:field**를 이용해서 HTML 태그에 멤버 변수를 매핑할 수 있습니다
  2. **th:field**을 이용한 사용자 입력 필드는 id, name, value 속성 값이 자동으로 매핑됩니다
  3. th:object와 th:field는 Controller에서 특정 클래스의 객체를 전달 받은 경우에만 사용 가능 합니다
조건문 + 반복문
1. th:if="${}", th:unless="${}"
  1. JAVA의 조건문에 해당하는 속성이고, 각각 **if**와 **else**를 뜻합니다
  2. **th:unless**는 일반적인 언어의 else 문과는 달리 **th:if**에 들어가는 조건과 동일한 조건을 지정해야 합니다
2. th:each="변수 : ${list}"
  1. JSP의 JSTL에서 <c:foreach> 그리고 JAVA의 반복문 중 **for문**을 뜻 합니다
  2. ${list}로 값을 받아온 것을 변수로 하나씩 가져온다는 뜻으로, 변수는 이름을 마음대로 지정할 수 있습니다
3. th:switch, th:case
  1. JAVA의 **switch-case**문과 동일합니다
  2. switch case문으로 제어할 태그를 **th:block**으로 설정하고 그 안에 코드를 작성합니다
#numbers.sequest(start, end, step)
1. 기본적으로 타임리프에서는 **#numbers**라는 숫자 포맷 메소드를 지원하고, **#numbers**에는 다양한 메소드들이 존재하는데 가장 많이 사용하는 것이 **#numbers.sequece**입니다
2. #numbers.sequece 메서드는 start, end, step을 이용하여 원하는 범위에 대해 시퀀스를 생성해 줍니

1. Timeleaf문법

Gradle 설정

Maven 설정