강의 링크는 아래와 같습니다.
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
먼저 타임리프에 대해 알아보겠다.
타임리프의 특징은 3가지가 있다.
- 서버 사이드 HTML 렌더링 (SSR)
- 내추럴 템플릿
- 스프링 통합 지원
타임리프를 사용하려면 다음과 같은 선언을 html 태그에서 작성해야 한다.
<html xmlns:th="http://www.thymeleaf.org">
타임리프는 많은 기본 표현식을 제공한다. 가장 기본 기능인 텍스트를 출력하는 기능부터 알아보자.
텍스트 - text, utext
타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다. HTML 콘텐츠에 데이터를 출력할 때는 다음과 같이 th:text를 사용한다.
<span th:text="${data}">안녕</span>
<span>[[${item}]]</span>
위와 같은 코드에서 타임리프가 동작하면 안녕이 아닌 data 변수의 값이 출력된다.
HTML 태그의 속성이 아니라 HTML 콘텐츠 영역 안에서 직접 데이터를 출력하고 싶으면
다음과 같이 [[...]] 를 사용하면 된다.
Escape
HTML 문서는 < , > 같은 특수 문자를 기반으로 정의된다. 따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다. 데이터를 만들어서 실행해보자.
public String basic(Model model){
model.addAttribute("item","Hello <b>Spring</b>");
return "basic";
}
모델에 태그를 포함한 문자열을 담았고, 우리는 <b> 태그를 이용해 Spring!이라는 단어를 진하게 나오게 만들고 싶다.
웹 브라우저에서 출력을 해보면 출력은 다음과 같다.
개발자가 의도한 것은 가 있으면 해당 부분을 강조하는 것이 목적이었다.
그런데 태그가 그대로 나온다. 소스보기를 하면 < 부분이 < 로 변경된 것을 확인할 수 있다.
웹 브라우저는 <를 HTML 태그의 시작으로 인식한다. 따라서 < 를 태그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라 한다. 그리고 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 한다. 그리고 타임리프가 제공하는 th:text , [[...]] 는 기본적으로 이스케이스(escape)를 제공한다.
그러면 이스케이프 기능을 사용하지 않으려면 어떻게 해야 할까?
타임리프는 두 가지 기능을 제공한다.
- th:text -> th:utext
- [[...]] -> [(...)]
한번 코드를 아래와 같이 바꿔보겠다.
<span th:utext="${item}">hello</span>
<span>[(${item})]</span>
이렇게 수정하고 실행해보면 <b> 태그를 사용한 곳이 글씨 굵기가 굵어지는 것을 확인하며 정상 수행되는 것을 확인할 수 있다.
주의!
실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수많은 문제가 발생한다. escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용하자.
변수 -SpringEL
타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다.
- 변수 표현식 : ${...}
그리고 이 변수 표현식에는 스프링 EL이라는 스프링이 제공하는 표현식을 사용할 수 있다.
가정을 하나 하고 시작하겠다. 우리는 User라는 클래스가 존재한다. 이에 대한 인스턴스를 여러 개 만들어서 List에 넣는다. 이후 모델에 담고 타임리프를 통해 렌더링 시킬 것이다. 이 User라는 클래스는 username 프로퍼티를 가지고 있다.
그럼 이제 어떻게 변수를 사용할 수 있는지 아래 코드를 통해 확인해보자.
<ul>Object
<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>
<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[0].getUsername()} = <span th:text="${users[0].getUsername()}"></span></li>
</ul>
<ul>Map
<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>
- 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를 찾고 메서드 직접 호출
지역 변수 선언
th:with를 사용하면 지역 변수를 선언해서 사용할 수 있다. 지역 변수는 선언한 태그 안에서만 사용 가능.
<div th:with="first=${users[0]}">
<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>
기본 객체들
타임리프는 기본 객체들을 제공한다.
- ${#request}
- ${#response}
- ${#session}
- ${#servletContext}
- ${#locale}
그런데 #request는 HttpServletRequest 객체가 그대로 제공되기 때문에 데이터를 조회하려면 request.getParameter("data")처럼 불편하게 접근해야 한다. 이런 점을 해결하기 위해 편의 객체도 제공한다.
- HTTP 요청 파라미터 접근: param 예) ${param.paramData}
- HTTP 세션 접근: session 예) ${session.sessionData}
- 스프링 빈 접근: @ 예) ${@helloBean.hello('Spring!')}
th:text를 이용해서 출력해보면 확인할 수 있다.
유틸리티 객체와 날짜
타임리프는 문자, 숫자, 날짜, URI 등을 편리하게 다루는 다양한 유틸리티 객체들을 제공한다.
타임리프 유틸리티 객체들
- #message : 메시지, 국제화 처리
- #uris : URI 이스케이프 지원
- #dates : java.util.Date 서식 지원
- #calendars : java.util.Calendar 서식 지원
- #temporals : 자바 8 날짜 서식 지원
- #numbers : 숫자 서식 지원
- #strings : 문자 관련 편의 기능
- #objects : 객체 관련 기능 제공
- #bools : boolean 관련 기능 제공
- #arrays : 배열 관련 기능 제공
- #lists , #sets , #maps : 컬렉션 관련 기능 제공
- #ids : 아이디 처리 관련 기능 제공, 뒤에서 설명
타임리프 유틸리티 객체 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-utilityobjects
유틸리티 객체 예시 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expressionutility-objects
자바 8 날짜
타임리프에서 자바 8 날짜인 LocalDate , LocalDateTime , Instant를 사용하려면 추가 라이브러리가 필요하다. 스프링 부트 타임리프를 사용하면 해당 라이브러리가 자동으로 추가되고 통합된다.
타임리프 자바 8 날짜 지원 라이브러리 - thymeleaf-extras-java8 time
자바 8 날짜용 유틸리티 객체 - #temporals
사용 예시는 아래와 같다.
<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
<!--model.addAttribute("localDateTime", LocalDateTime.now()); 매핑된 컨트롤러에서 이를 실행 -->
URL 링크
타임리프에서 URL을 생성할 때는 @{...} 문법을 사용하면 된다.
아래와 같은 컨트롤러 메서드가 있다.
@GetMapping("/link")
public String link(Model model) {
model.addAttribute("param1", "data1");
model.addAttribute("param2", "data2");
return "basic/link";
}
타임리프는 아래와 같은 html이다. 짧게 URL 링크를 사용하는 태그만 작성하겠다.
<li><a th:href="@{/hello}">basic url</a></li>
<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>
단순한 URL
@{/hello} -> /hello
쿼리 파라미터
@{/hello(param1=${param1}, param2=${param2})}
/hello? param1=data1¶m2=data2
()에 있는 부분은 쿼리 파라미터로 처리된다.
경로 변수
@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
/hello/data1/data2 URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리된다.
경로 변수 + 파라미터
@{/hello/{param1}(param1=${param1}, param2=${param2})}
/hello/data1? param2=data2
경로 변수와 쿼리 파라미터를 함께 사용할 수 있다.
리터럴 Literals
리터럴은 소스 코드상에 고정된 값을 말하는 용어다.
예를 들어서 다음 코드에서 "Hello"는 문자 리터럴, 10, 20는 숫자 리터럴이다.
String a = "Hello"
int a = 10 * 20
타임리프는 다음과 같은 리터럴이 있다.
- 문자 : 'hello'
- 숫자 : 10
- 불린 : true, false
- null : null
타임리프에서 문자 리터럴은 항상 ' (작은따옴표)로 감싸야한다.
그런데 문자를 항상 ' 로 감싸는 것은 너무 귀찮은 일이다.
공백 없이 쭉 이어진다면 하나의 의미 있는 토큰으로 인지해서 다음과 같이 작은따옴표를 생략할 수 있다.
룰: A-Z , a-z , 0-9 , [] ,. , - , _
오류
<span th:text="hello world!"></span>문자 리터럴은 원칙상 ' 로 감싸야한다. 중간에 공백이 있어서 하나의 의미 있는 토큰으로도 인식되지 않는다.
수정
<span th:text="'hello world!'"></span>
이렇게 ' 로 감싸면 정상 동작한다. 하지만 이는 너무 불편하다 이를 대체하기 위한 문법이 존재한다.
<span th:text="'hello'+' world!'"></span>
<span th:text="'hello world!'"></span>
<span th:text="'hello '+${data}"></span>
<span th:text="|hello ${data}|"></span>
리터럴 대체라고 한다.
아래와 같은 코드는 정상적으로 작동한다.
<span th:text="|hello ${data}|">
연산
타임리프 연산은 자바와 크게 다르지 않다. HTML 안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하자.
코드는 아래와 같다. 이번에는 경우가 많아 전체 HTML을 가져왔다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>산술 연산
<ul>
<li>10 + 2 = <span th:text="10 + 2"></span></li>
<li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
</ul>
</li>
<li>비교 연산
<ul>
<li>1 > 10 = <span th:text="1 > 10"></span></li>
<li>1 gt 10 = <span th:text="1 gt 10"></span></li>
<li>1 >= 10 = <span th:text="1 >= 10"></span></li>
<li>1 ge 10 = <span th:text="1 ge 10"></span></li>
<li>1 == 10 = <span th:text="1 == 10"></span></li>
<li>1 != 10 = <span th:text="1 != 10"></span></li>
</ul>
</li>
<li>조건식
<ul>
<li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)?
'짝수':'홀수'"></span></li>
</ul>
</li>
<li>Elvis 연산자 <!--조건식 축약 버전 -->
<ul>
<li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가없습니다.'"></span></li>
<li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?:'데이터가 없습니다.'"></span></li>
</ul>
</li>
<li>No-Operation
<ul>
<li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></li>
<li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가없습니다.</span></li>
</ul>
</li>
</ul>
</body>
</html>
- 비교 연산: HTML 엔티티를 사용해야 하는 부분을 주의하자, > (gt), < (lt), >= (ge), <= (le),! (not), == (eq),!= (neq, ne)
- 조건식: 자바의 조건식과 유사하다.
- Elvis 연산자: 조건식의 편의 버전
- No-Operation: _ 인 경우 마치 타임리프가 실행되지 않는 것처럼 동작한다. 이것을 잘 사용하면 HTML의 내용 그대로 활용할 수 있다. 마지막 예를 보면 데이터가 없습니다. 부분이 그대로 출력된다.
속성 값 설정
타임리프 태그 속성(Attribute)
타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다. th:* 로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다.
<input type="text" name="mock" th:name="userA" />
<!-- name="userA"로 바뀌어 있다.-->
<h1>속성 추가</h1>
- th:attrappend = <input type="text" class="text" th:attrappend="class='large'" /><br/>
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large'" /><br/>
- th:classappend = <input type="text" class="text" th:classappend="large" /><br/> <!--이거 자주 쓴다고 한다 -->
<h1>checked 처리</h1>
- checked o <input type="checkbox" name="active" th:checked="true" /><br/>
- checked x <input type="checkbox" name="active" th:checked="false" /><br/>
- checked=false <input type="checkbox" name="active" checked="false" /><br/>
속성 설정
th:* 속성을 지정하면 타임리프는 기존 속성을 th:* 로 지정한 속성으로 대체한다. 기존 속성이 없다면 새로 만든다.
속성 추가
th:attrappend : 속성 값의 뒤에 값을 추가한다.
th:attrprepend : 속성 값의 앞에 값을 추가한다.
th:classappend : class 속성에 자연스럽게 추가한다.
checked 처리
HTML에서는 <input type="checkbox" name="active" checked="false"/>
이 경우에도 checked 속성이 있기 때문에 checked 처리가 되어버린다.
HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked라는 속성만 있어도 체크가 된다. 이런 부분이 true , false 값을 주로 사용하는 개발자 입장에서는 불편하다. 타임리프의 th:checked는 값이 false 인 경우 checked 속성 자체를 제거한다.
<input type="checkbox" name="activ" th:checked="false"> 타임리프 렌더링 후
-> <input type="checkbox" name="active"/>
이상으로 반복 이전까지 정리했습니다. 포스팅을 마치겠습니다.
댓글