Thymeleaf

Thymeleaf

View Template Engine

타임리프는 응답용으로 만들어짐. 컨트롤러가 보내준 내용으로 표현한다.

 

Spring EL

Spring Expression Language

런타임시 메서드 호출 및 기본 문자열 템플릿 등의 기능을 제공한다.

 

1) ${...} 표현식 - 변수 표현식

컨트롤러에서 전달받은 변수에 접근할 수 있으며 th:속성명 혹은 [[ ]]안에서 사용가능하다.

 

2) @{ ... } 표현식 - URL 표현식

서버의 contextPath를 반영한 URI로 변경된다.

 

3) 문자 합치기

합치고 싶은 문자열을 "|"로 감싸거나 +연산자를 이용해 문자를 합칠 수 있다.

<div th:text="|I am ${info.name} !! |"></div>
<div th:text="'I am '+ ${info.name} + ' !! '"></div>

 

4) 비교 연산자

이항 연산자

<div th:text="${info.name != 'kim'}"></div>

삼항연산자

<div th:text="${info.name == 'kim' ? 'ok' : 'no'}"></div>

 

 

<th:block th:if="${info.age > 18}"><hr><p>입장 가능</p><hr></th:block>

if- else 문 쓸 수 있다.

 

each

for 반복문과 비슷함

<th:block th:each="data,status:${datas}">  
    <h1 th:text="|${status.count} ${data}|"></h1>    
</th:block>

2개 이상 적을 때는 block 태그로 묶는 게 좋다.

data,status 이렇게 적어주면 row에 대한 추가 정보를 얻을 수 있다.

 

status 객체의 속성

index: 0부터 시작

count : 1부터 시작

size : 총 개수

current : 현재 index의 변수

even / odd : 짝수 / 홀수 여부

first / last : 처음 / 마지막 여부

 

링크될 대상 URL : th : href="@{}"

<a th:href="@{/insert(pageno=${pageno})}">

이 코드는

<a href="/insert?pageno=123">

이 코드와 같다.

 

th:with="${}"

변수 형태의 값을 재정의하는 속성. th:with를 이용하여 새로운 변수 값을 생성할 수 있다.

<div th:with=”userId=${number}” th:text=”${usesrId}”>

 

표현식 

변수 표현식 : ${ ... }

선택 변수 표현식 : *{ ... }

다국적 언어 관련 메세지 표현식 : #{ ... }

링크 URL 표현식 : @{ ... }

조각 표현식 : ~{ ... }

 

비교와 동등

비교: >,<,>=,<= (gt, lt, ge, le)

동등 연산 : ==, != (eq, ne)

 

조건 연산 

If-then : (if) ? (then)

If-then-else : (if) ? (then) : (else)

Default : (value) ?: (defaultvalue) (있으면 걔를 출력하고 없다면 defaultvalue로 지정한 값을 출력한다.)

 

특별한 토큰

No-Operation: _ (아무것도 하지 말아라)

 

타임리프 내장 객체

#dates: java.util.Date 서식 지원

#temporals : 자바8 날짜 서식 지원 (날짜는 주로 temporals를 사용)

#numbers: 숫자 서식 지원

 

@Data

@RequiredArgsConstructor 이면 @NonNull이 있어야 초기화 해준다. 반면 @AllArgsConstructor가 있으면 모든 필드에 값을 초기화하는 생성자를 구현하는데, @Data에는 @RequiredArgsConstructor가 있으므로 필드에 @NonNull을 일일이 붙여줘야 한다.

 

User userA = new User("사용자 A", 10);

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

final HashMap<String, User> map = new HashMap<>();
map.put("userA", userA);

model.addAttribute("user", userA);
model.addAttribute("users", list);
model.addAttribute("userMap", map);

이런 식으로 userA를 만들어주고, add로 list에 넣어줄 수도 있고, put으로 map에 넣어줄 수도 있다.

 

<h3>첫번째 방법</h3>
<ul>
    <li>${user.userName} = <span th:text="${user.userName}"></span></li>
    <li>${user['userName']} = <span th:text="${user['userName']}"></span></li>
    <li>${user.getuserName()} = <span th:text="${user.getUserName()}"></span></li>
</ul>
<h3>두번째 방법</h3>
<ul>
    <li>${users[0].userName} span> = <span th:text="${users[1].userName}"></span></li>
    <li>${users[0]['userName']} = <span th:text="${users[1]['userName']}"></span></li>
    <li>${users[0].getuserName()} = <span th:text="${users[1].getUserName()}"></span></li>
</ul>
<h3>세번째 방법</h3>
<ul>
    <li>${userMap['userA'].userName} = <span th:text="${userMap['userA'].userName}"></span></li>
    <li>${userMap['userA']['userName']} = <span th:text="${userMap['userA'] ['userName']}"></span></li>
    <li>${userMap['userA'].getuserName()} = <span th:text="${userMap['userA'].getUserName()}"></span></li>
</ul>

그러면 html에서 이런식으로 출력할 수 있다. user에 userA를 넣어줬을 때는 첫번째, users에 list를 넣어주었을때는 두번째, userMap에 map을 넣어주었을 때는 세번째 방법을 써서 출력해준다.

<ul th:with="first=${users[0]}">
    <li>첫 번째 사람의 이름은 '<span th:text="${first.userName}"></span>'</li>
</ul>

이런식으로 with를 사용해서 first에 user[0]을 넣어줄 수도 있다.

if(session.getAttribute("count") == null)
    session.setAttribute("count", new int[1]);
int su[] = (int[])session.getAttribute("count");
su[0]++;

조회수같은 것을 세는 코드

 

param, session, application은 #을 쓰지 않고 쓴다.

아닌 경우 대부분 내장객체는 #을 붙이고 쓴다.

 

<li>spring bean = <span th:text="${@my.hello('Spring Boot!')}"></span></li>

인식되는 bean중에서 my라는 이름으로 된 bean객체를 직접 사용하고 싶을때 쓴다.. hello를 호출해 리턴된 결과를 표현하고 있다.

@Component("my")
class HelloBean {
    public String hello(String data) {
        return "안녕? " + data;
    }
}

java파일에 이렇게 써놓은 것을 직접 사용한다.

[[${#temporals.format(startTime,'yyyy-MM-dd HH:mm:ss')}]]<br>

이런식으로 format을 지정해서 출력할 수 있다.

<li>Request Parameter = <span th:text="${param.Data}"></span></li>

쿼리문자열에서 param으로 받아와서 Data를 출력한다. 주소창에

http://localhost:8088/step2/basicobjects?Data=DUKE 이런식으로 치면

이렇게 Data를 받아와 출력되는 것을 확인할 수 있다.

<li>${#temporals.month(startTime)} = <span th:text="${#temporals.month(startTime)}"></span></li>

이런식으로 #temporals를 이용해서 구현할 수 있다.

 

[[${#dates.createNow()}]]
[[${#dates.createToday()}]]

createNow는 지금이고 createToday는 오늘을 나타낸것

이런식으로 나타난다.

[[${#strings.isEmpty(param.name)}]]

파라미터의 name이 비어있는지를 확인하는 코드

비어있으면  true를 준다.

[[${#strings.toLowerCase(tech)}]]

소문자로 바꿔준다.

[[${#strings.trim(tech)}]]

앞의 공백을 지워준다.

<li>${#numbers.formatDecimal(num, 3, 'COMMA', 2, 'POINT')} = <span th:text="${#numbers.formatDecimal(num, 3, 'COMMA', 2, 'POINT')}"></span></li>

이런식으로 #numbers를 사용해서 출력하면

이런식의 결과가 나온다.

[[${param.containsKey('foo')}]]

foo라는 이름의 쿼리가 있느냐. 있으면 true 없으면 false

[[${session.sessionData} ]]

session에 저장된 데이터중에서 sessionData라는 이름의 데이터 출력

[[${session.keySet()} ]]

keySet()을 출력해준다.

이런식으로 출력된다.

@RequestMapping(value="/character/detail/{name}/{number}")
public String getAllBoards(@PathVariable("number") int num, @PathVariable String name, Model model){

name이라고 보관된 객체를 여기다 사용하고 number라고 보관된 객체를 여기다가 준다. 

@PathVariable 각각의 위치에 작성되어있는 결과에 따라 전달되게 된다. 이 매개변수들의 값은 path정보의 일부분을 전달하게 된다.

뭐가 오던 name으로 전달받고 number로 전달받는다는 의미.

 

@PathVariable("number") int num 는 number를 추출해서 num에 넣어준다는 뜻.

@PathVariable String name 는 path정보인 name을 추출해서 매개변수 name에 넣어준다는 뜻. 이름 같으면 ("")를 굳이 넣어주지 않는다.

<li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>
<li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
<li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>

차례대로 이런 결과가 나온다. (param1에는 news, param2에는 단풍을 넣어주었다.)

path에 들어가지 않으면 쿼리문자열이 온다.

 

<li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가없습니다.</span></li>

nullData가 없거나 null이면 아무것도 수행하지 말아라..

<input type="checkbox" name="active" th:checked="true" />

처음부터 체크된 상태로 보여지게 하고 싶다 -> th:checked="true"로 놓으면 된다.

<input type="checkbox" name="active" th:checked="false" />

이렇게 하면 checked가 false이다.

이런식으로..

 

checked =""하고 이 안에 어떤 값이 들어가더라도 checked한 상태로 간주됨. 심지어 안에 false가 들어가도..

<input type="checkbox" name="active" checked="false" />

<input type="text" class="text" th:attrappend="class=' large'" />

attrappend는 뒤에 속성을 추가해라.. 결과 적으로 class가 text large가 된다.

<input type="text" class="text" th:attrprepend="class='large '" />

attrprepend는 앞에 속성을 추가해라.. 결과적으로 class가 large text가 된다.

private void addUsers(Model model) {
    List<User> list = new ArrayList<>();
    list.add(new User("둘리", 10));
    list.add(new User("또치", 20));
    list.add(new User("도우너", 30));
    model.addAttribute("users", list);
}

list에 객체 넣어주고 model 객체에 users라는 이름으로 list 넣어준다.

 

타임리프 주석:

<!--/* */-->

혹은

<!--/*-->
...
<!--*/-->

이 방식으로 하면 브라우저에 전송도 안되고 서버, 클라이언트에 전송도 안됨.

 

<-- --> 이렇게 하면 브라우저에 전송은 되나 실제 수행한 결과가 오는 것은 아님. 서버에서는 제외된다. 클라이언트에는 전송됨.

 

<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>

이런 식으로 반복할 수 있다. block태그는 클라이언트로 전송되지 않음.

<script th:inline="javascript">

이 안에서 수행되는 건 '자바스크립트 구문에 맞게 처리해줘.' 하는 뜻

이렇게 하면 에러난다.. ""이런 인용부호 있어야 하는데 없음.