Spring Boot 🍃타임리프(Thymeleaf)

🍃타임리프 (Thymeleaf)

타임리프 로고

스프링에서 공식적으로 지원하는 View 템플릿
HTML 문서를 그대로 쓸 수 있다.
HTML은 브라우저에 올바르게 표시될 수 있고 정적 프로토타입으로도 작동하여 개발 팀에서 보다
강력한 협업을 가능하게 한다.

 

🍃타임리프의 특징

Spring Framework용 모듈, 선호하는 도구와의 통합 호스트 및 고유한 기능을 플러그인할 수 있는 기능을 갖추어서
백엔드와 프론트엔드에서 둘 다 협업해서 사용 가능하다.

JSP는 프론트엔드가 서버쪽을 다루는 것은 힘들다. 그러나 스프링의 타임리프는 둘 다 협업하여 사용 가능하기 때문에
서버없이 단독으로 돌아가는 형태를 만들 수 있어 편의성이 좋다.

즉 JSP와 달리 Thymeleaf 문서는 html 확장자를 갖고 있어 JSP처럼 Servlet이 문서를 표현하는 방식이 아니기 때문에 서버 없이도 동작 가능하다.

 

SSR:Server Side Rendering 
백엔드에서 HTML을 동적으로 생성한다.

서버 쪽에서 화면에 대한 것들을 구성을 하여 응답을 한다.

 

Client Side Rendering
Rest API + React.js

클라이언트 측에서 렌더링을 한다라는 의미이다.

서버는 데이터만 진행하고 클라이언트측은 View만 진행한다.

 

템플릿 엔진

이터와 이 데이터들을 표현 할 템플릿을 결합해주는 도구

데이터베이스와 + 웹 램플릿을 결합해주는 역할을 한다.

 

그럼 타임리프의 장점과 단점은 무엇일까?

🍃장점은

1.HTML 그대로 열고, 그대로 쓸 수 있다.
HTML의 기본 구조를 그대로 사용할 수 있으며 HTML파일을 직접 열어도 동작한다
2.디자인과 개발을 분리해서 작업할 수 있다.
3.WAS를 통해 수행하지 않더라도 파일 웹 브라우저를 통해 열 수 있다.

 

 

🍃단점은

1.jsp 태그 라이브러리와 custom태그들을 사용할 수 없어서 기존 jsp코드를 재사용할 수 없다는 점
2.기존 태그를 유지하고 속성으로 템플릿 구문을 넣는데 있어 어느정도 한계가 있고 자바스크립트나 제이쿼리의 도움이 필요할 수 있다.

---

주석

표현식

종류	문법	설명
변수 표현식	${...}	paramter, session, model 등에 저장되어 있는 변수의 값들을 문자열로 변환하여 불러온다.
메세지 표현식	#{...}	message source로부터 키에 해당하는 메시지를 가져온다.
링크 표현식	@{...}	th:href, th:src, th:action 등과 같이 URL이 지정되는 속성에 사용한다.
선택 변수 표현식	@{...}	부모 태그의 th:object에 지정된 객체를 기준으로 해당 객체의 속성에 접근한다.
인라인 표현	[[...]], [(...)]	텍스트 모드나 자바스크립트 모드로 내부에 선언한 변수 표현식의 값을 가져와서 html에 직접 표시한다.

parameter로 넘어온 경우 => param
session attribute인 경우 => session
request attribute(model)인 경우는 따로 명시하지 않는다. request라고 명시하면 오류 발생한다.

파라미터가 존재하지 않을 경우 항상 오류가 발생한다.

 

	<p th:text="#{ message.first }"></p>
	<p th:text="#{ message.second(everyone) }"></p>

 

제어문

SpringEL

변수 표현식(#{...})에서 SpringEL을 사용하여 단순한 변수가 아닌 Object, List, Map같은 객체의 값들을 불러올 수 있음

종류	문법	설명
Object	${객체명.속성명}	해당 객체의 속성값을 불러온다.
	${객체명['속성명']}
	${객체명.속성의 getter()}
List	${List객체명[index번째 객체].속성명}	List에서 index번째 객체의 속성을 불러온다.
	${List객체명[index번째 객체]['속성명']}
	${List객체명[index번째 객체].속성의 getter()}
	${List객체명.get(index번째 객체).속성의 getter()}
	${List객체명.get(index번째 객체).속성명}
Map	${Map객체명['객체의 키값'].속성명}	Map에서 키값에 해당하는 객체의 속성을 불러온다.
	${Map객체명['객체의 키값']['속성명']}
	${Map객체명['객체의 키값'].속성의 getter()}