-
[김영한 스프링] 05. 타임리프 기본 기능 - 리터럴(Literals) & 연산Spring/스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 2023. 7. 26. 23:05
리터럴(Literals)
리터럴은 소스 코드상에 고정된 값을 말하는 용어이다.
예를 들어서 다음 코드에서 "Hello"는 문자 리터럴, 10, 20은 숫자 리터럴이다.
String a = "Hello"
int a = 10 * 20타임리프는 다음과 같은 리터럴이 있다.
- 문자 : 'hello'
- 숫자 : 10
- 불린 : true, false
- null : null
타임리프에서 문자 리터럴은 항상 '(작은 따옴표)로 감싸야한다.
<span th:text="'hello'">
그런데 문자를 항상 '로 감싸는 것은 너무 귀찮은 일이다. 공백 없이 쭉 이어진다면 하나의 의미 있는 토큰으로 인지해서 다음과 같이 작은 따옴표를 생략할 수 있다.
룰 : A-Z, a-z, 0-9, [], ., -, _
<span th:text="hello">
오류
<span th:text="hello world!"></span>
문자 리터럴은 원칙상 '로 감싸야한다. 중간에 공백이 있어서 하나의 의미 있는 토큰으로도 인식되지 않는다.
수정
<span th:text="'hello world!'"></span>
이렇게 '로 감싸면 정상 동작한다.
BasicController 추가
@GetMapping("/literal") public String literal(Model model) { model.addAttribute("data", "Spring!"); return "basic/literal"; }
literal.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>리터럴</h1> <ul> <!--주의! 다음 주석을 풀면 예외가 발생함--> <!-- <li>"hello world!" = <span th:text="hello world!"></span></li>--> <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> </ul> </body> </html>
main/resources/templates/basic/literal.html 생성
리터럴 대체(Literal substitutions)
<span th:text="|hello ${data}|">
마지막의 리터럴 대체 문법을 사용하면 마치 템플릿을 사용하는 것처럼 편리하다.
실행
연산
타임리프 연산은 자바와 크게 다르지 않다. HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하자.
BasicController 추가
@GetMapping("/operation") public String operation(Model model) { model.addAttribute("nullData", null); model.addAttribute("data", "Spring"); return "basic/operation"; }
operation.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>
main/resources/templates/basic/operation.html 생성
- 비교연산 : HTML 엔티티를 사용해야 하는 부분을 주의하자.
- > (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)
- 조건식 : 자바의 조건식과 유사하다.
- Elvis 연산자 : 조건식의 편의 버전
- No-Operation : _인 경우 마치 타임리프가 실행되지 않는 것처럼 동작한다. 이것을 잘 사용하면 HTML의 내용 그대로 활용할 수 있다. 마지막 예를 보면 데이터가 없습니다. 부분이 그대로 출력된다.
실행
출처 : https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
'Spring > 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술' 카테고리의 다른 글
[김영한 스프링] 07. 타임리프 기본 기능 - 조건부 평가 & 주석 & 블록 (0) 2023.08.11 [김영한 스프링] 06. 타임리프 기본 기능 - 속성 값 설정 & 반복 (0) 2023.07.26 [김영한 스프링] 04. 타임리프 기본 기능 - 유틸리티 객체와 날짜 & URL 링크 (0) 2023.07.26 [김영한 스프링] 03. 타임리프 기본 기능 - 변수(SpringEL) & 기본 객체들 (0) 2023.07.26 [김영한 스프링] 02. 타임리프 기본 기능 - 텍스트(text, utext) & 변수(SpringEL) (0) 2023.07.25