SpringBoot/스프링 MVC 1편-백엔드 웹 개발 핵심 기술

1. [타임리프] 기본 기능(1)

퓨처디벨로퍼 2022. 8. 6. 14:26

목차

1. 타임리프 소개
2. 텍스트-text,utext
3. 변수-SpringEL
4. 기본 객체들
5. 유틸리티 객체와 날짜
6. URL 링크
7. 리터럴
8. 연산

1. 타임리프 소개

1.1. 타임리프 특징

  • 서버 사이드 HTML 렌더링(SSR): 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용된다.
  • 네츄럴 템플릿: 타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다. JSP를 포함한 다른 뷰 템플릿들은 해당 파일을 열면, 예를 들어서 JSP 파일 자체를 그대로 웹 브라우저에서열어보면 JSP 소스코드와 HTML이 뒤죽박죽 섞여서 웹 브라우저에서 정상적인 HTML 결과를 확인할 수 없다.
  • 스프링 통합 지원: 타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.

1.2. 타임리프 사용 선언

<html xmlns:th="http://www.thymeleaf.org">

1.3. 기본 표현식

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

• 리터럴
◦ 텍스트: 'one text', 'Another one!',…
◦ 숫자: 0, 34, 3.0, 12.3,…
◦ 불린: true, false
◦ 널: null
◦ 리터럴 토큰: one, sometext, main,…

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

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

• 불린 연산:
◦ Binary operators: and, or
◦ Boolean negation (unary operator): !, not

• 비교와 동등:
◦ 비교: >, <, >=, <= (gt, lt, ge, le)
◦ 동등 연산: ==, != (eq, ne)

• 조건 연산:
◦ If-then: (if) ? (then)
◦ If-then-else: (if) ? (then) : (else)
◦ Default: (value) ?: (defaultvalue)
• 특별한 토큰:
◦ No-Operation: _

2. 텍스트 - text, utext(th:text)

2.1. text

  • 텍스트 출력
<li>th:text 사용 <span th:text="${data}"></span></li>
<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>

2.2. Escape

  • escape 유무에 따른 텍스트 출력

  • HTML 엔티티: 웹 브라우저는 < 를 HTML 테그의 시작으로 인식한다. 따라서 < 를 테그의 시작이 아니라 문자로 표현하는 방법이다.

  • Escape: HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것.

Escpae EscapeX
th:text th:utext
[[...]] [(...)] 
<ul>
 <li>th:text = <span th:text="${data}"></span></li>
 <li>th:utext = <span th:utext="${data}"></span></li>
</ul>
<h1><span th:inline="none">[[...]] vs [(...)]</span></h1>
<ul>
 <li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
 <li><span th:inline="none">[(...)] = </span>[(${data})]</li>
</ul>
  • 주의!: 실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수 많은 문제가 발생한다. escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용하자.

3. 변수 - SpringEL(${...})

  • 타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다

3.1. 변수 표현식

  • ${...}

3.2. SpringEL 다양한 표현식 사용

[BasicController]

  • 컨트롤러에서 Data를 model에 담아 보낸다.
    @GetMapping("/variable")
public String variable(Model model) {
...
model.addAttribute("user", userA);
model.addAttribute("users", list);
model.addAttribute("userMap", map);
return "basic/variable";
}

[variable.html]

  1. 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>
  2. 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>
  3. 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>

3.3. 지역변수 선언

<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
 <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>

4. 기본 객체들

  1. 기본 객체
  • ${#request}
  • ${#response}
  • ${#session}
  • ${#servletContext}
  • ${#locale}
<li>request = <span th:text="${#request}"></span></li>
 <li>response = <span th:text="${#response}"></span></li>
 <li>session = <span th:text="${#session}"></span></li>
 <li>servletContext = <span th:text="${#servletContext}"></span></li>
 <li>locale = <span th:text="${#locale}"></span></li>
  1. 편의 객체
  • #request 는 HttpServletRequest 객체가 그대로 제공되기 때문에 데이터를 조회하려면 request.getParameter("data") 처럼 불편하게 접근해야 한다. 이런 점을 해결하기 위해 편의 객체도 제공한다.
  • HTTP 요청 파라미터 접근: param
    예) ${param.paramData}
  • HTTP 세션 접근: session
    예) ${session.sessionData}
  • 스프링 빈 접근: @
    예) ${@helloBean.hello('Spring!')}
<li>Request Parameter = <span th:text="${param.paramData}"></span></li>
 <li>session = <span th:text="${session.sessionData}"></span></li>
 <li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></
li>

5. 유틸리티 객체와 날짜

  • 타임리프는 문자, 숫자, 날짜, URI등을 편리하게 다루는 다양한 유틸리티 객체들을 제공한다.
  • 객체의 함수를 통해 이용

타임리프 유틸리티 객체들

  • #message : 메시지, 국제화 처리
  • #uris : URI 이스케이프 지원
  • #dates : java.util.Date 서식 지원
  • #calendars : java.util.Calendar 서식 지원
  • #temporals : 자바8 날짜 서식 지원
  • #numbers : 숫자 서식 지원
  • #strings : 문자 관련 편의 기능
  • #objects : 객체 관련 기능 제공
  • #bools : boolean 관련 기능 제공
  • #arrays : 배열 관련 기능 제공
  • #lists , #sets , #maps : 컬렉션 관련 기능 제공
  • #ids : 아이디 처리 관련 기능 제공

사용 예시

<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

6. URL 링크(@{...})

  • @{...} : URL 생성
1. <li><a th:href="@{/hello}">basic url</a></li>
2.  <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>
3. <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
4. <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>

1. 단순한 URL
@{/hello}
=> /hello
2. 쿼리 파라미터
@{/hello(param1=${param1}, param2=${param2})}
=> /hello?param1=data1&param2=data2

  • () 에 있는 부분은 쿼리 파라미터로 처리된다.

3. 경로 변수
@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
=> / hello/data1/data2

  • URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리된다.

4. 경로 변수 + 쿼리 파라미터
@{/hello/{param1}(param1=${param1}, param2=${param2})}
=> /hello/data1?param2=data2

  • 경로 변수와 쿼리 파라미터를 함께 사용할 수 있다
  • /hello : 절대 경로 hello : 상대 경로

7. 리터럴(Liteerals)

String a = "Hello"
int a = 10 * 20
  • 소스 코드 상에 고정된 값을 말하는 용어이다.
  • "hello"는 문자 리터럴/ 10, 20은 숫자 리터럴이다.문자 리터럴

문자 리터럴

 <li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>
 <li>'hello world!' = <span th:text="'hello world!'"></span></li>
 <li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>
 <li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>
  • 항상 '(작은 따옴표)로 감싸야한다!
  • 공백없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 작은 따옴표를 생략할 수 있다.
  • 리터럴 대체: 리터럴 대체 문법을 사용하면 마치 템플릿을 사용하는 것 처럼 편리하다.

8. 연산

산술 연산

 <ul>
 <li>10 + 2 = <span th:text="10 + 2"></span></li>
 <li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
 </ul>

비교 연산

 <ul>
 <li>1 > 10 = <span th:text="1 &gt; 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>
  • 비교: >, <, >=, <= (gt, lt, ge, le)
  • 동등 연산: ==, != (eq, ne)

조건식

 <li>조건식
   <ul>
    <li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)? 
    '짝수':'홀수'"></span></li>
    </ul>
</li>

Elvis 연산자

<ul>
 <li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가
없습니다.'"></span></li>
 <li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?: 
'데이터가 없습니다.'"></span></li>
 </ul>
  • 조건식의 편의 버전

No-Operation

```
<ul>
<li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</
span></li>
<li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가
없습니다.</span></li>
</ul>
```
  • _ 인 경우 마치 타임리프가 실행되지 않은 것 처럼 동작한다. 이것을 사용하면 HTML의 내용 그대로 활용할 수 있다.
  • No-Operation