[TIL] Thymeleaf에 관한 것

1.Thymeleaf 란?

Thymeleaf는 HTML, XML, JavaScript, CSS 및 일반 텍스트를 처리할 수 있는

웹 및 독립 실행형 환경 모두를 위한 최신 *서버 측 Java 템플릿 엔진입니다.

 

Thymeleaf는 spring MVC에서 뷰(View)를 담당하는 라이브러리로 흔히 뷰 템블릿(view template)으로 불립니다.

    - > 뷰 템플릿은 컨트롤러가 전달하는 데이터를 이용하여 동적으로 화면을 구성할 수 있게 해줍니다.

    즉, Thymeleaf는 html파일을 가져와서 파싱해서 분석후

    정해진 위치에 데이터를 치환해서 웹 페이지를 생성해주는 역할을 합니다.

 

Thymeleaf는 서버를 가동하지 않으면 순수 HTML을,

서버를 구동하면 뷰 템플릿을 거쳐 동적으로 변경된 HTML을 확인할 수 있습니다.

 

JSP같은 경우는 서버를 구동하지 않고 해당 파일을 열게 되면

-> JSP 소스코드와 HTML이 섞여있어서 정상적인 확인이 불가능했습니다.

    즉 오직 서버를 통해서 JSP을 열어야 JSP 파일을 확인할 수 있었습니다.

 

반면에 타임리프는 화면 구성을 서버 가동없이 쉽게 파악할 수 있어

개발에 수정할 때마다 서버 재가동이 필요 없어지기 때문에 개발에 용이해집니다.

 

출처 : https://jddng.tistory.com/223

위 이미지를 보면 타임리프는 순수 HTML파일을 유지하기 때문에

웹브라우저를 통해 해당 파일의 경로를 입력하면 화면이 잘 나온 것을 볼 수 있습니다.

반면에 JSP는 화면이 아닌 그냥 코드가 나타난 것을 볼 수 있습다.

 

 

왜 ? 그럴까요? 

서버 가동없이 웹 브라우저를 이용해 해당 파일을 열게 되면 ?

-> 웹 브라우저는 타임리프가 사용하는 속성인 th:속성을 알지 못하기 때문에 ! HTML로만 해석할 수 있죠, 

따라서, 앞에 추가해준 타임리프 속성을 제외한 순수 HTML 속성으로 화면을 구성하여

-> 순수 HTML파일을 유지할 수 있습니다. 그래서 잘 보입니다.

 

그리고 서버가 가동이 되어 타임리프 뷰 템플릿 엔진을 이용하게 되면

서버 사이드에서 렌더링 되어 기존 HTML의 속성이 아닌 타임리프의 속성으로 대체되어

동적 HTML 파일을 제공할 수 있게됩니다. 

 

Thymeleaf이외에 jsp라는 HTML 코드에 JAVA코드를 넣어 동적웹페이지를 만드는

웹어플리케이션도구가 있음에도 불구하고

spring boot는 Thymeleaf의 사용을 권장하고 있습니다.

 

 

 

 

2.Thymeleaf 의 주요 목표는?

-> 유지 관리가 쉬운 템플릿 생성 방법을 제공

-> 이를 위해 *Natural Templates 의 개념을 기반으로 합니다.

-> 이를 통해 디자인 커뮤니케이션이 향상되고, 디자인 팀과 개발 팀 간의 격차가 해소됩니다 ! 

 

 

*서버 측 Java 템플릿 엔진
서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 템플릿(Template)에 넣어
HTML 문서를 만들어 클라이언트에 전달해주는 역할을 합니다.

즉, HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고
동적으로 생성되는 부분만 템플릿의 특정 부분에 끼워 넣는 방식으로 동작합니다.

 

*Natural Templates
HTML 처럼 보이고 HTML 처럼 사용할 수 있습니다 ! 

공식 문서를 보면, Thymeleaf의 궁극적인 목적은
'개발의 workflow를 natural templates로 가지고 올 수 있다'는 것입니다.

Thymeleaf 문법으로 쓰여진 HTML templates는 항상 마크업 언어 안쪽에
속성으로 쓰여지기 때문에 HTML 페이지처럼 보이고
실제로 동작하는데 그것을 natural templates라고 부릅니다.

즉, 서버를 구동하지 않으면 순수 HTML을,
서버를 구동하면 동적으로 HTML이 생성된다고 하는데,

-> 타임리프는 순수 HTML을 유지하기 때문에 natural templates으로도 불리는 것입니다.

 

3.Thymeleaf 의 주요 장점은?

-> 편리함 ! 

 

템플릿 코드 자체가 그냥 html 이기 때문에 뷰 파일을 was 없어도 브라우저에서 직접 띄워볼 수 있습니다.
기존의 템플릿으로는 항상 서버를 구동시켜 결과물을 확인해야 했습니다만,

 

타임리프의 경우 static 파일을 사용하듯 해당 내용을 브라우저에서 바로 확인할 수 있다는 장점이 있습니다.

 

-> 이것이 가능한 이유는 타임리프가 HTML의 속성(Attribute)을 기반으로 작성되기 때문에

기존의 HTML구조를 건드리지 않기 때문이다.

 

 

 

 

4.Thymeleaf를 프로젝트에 적용하기!

프로젝트에 적용하기

 

타임리프를 사용하기 위해서는,,

thymeleaf 디펜던시 추가

 

1) build.gradle에  해당 줄을 입력합니다.

 

 

 

2) html_타임리프를 사용하는 html 파일에도 타임리프를 쓰겠다고 속성으로 써줘야 합니다.

 

-> 타임리프가 HTML의 속성(Attribute)을 기반으로 작성됩니다. 덕분에, 기존의 HTML구조를 건드리지 않죠😊

 

 

 

 

5.Thymeleaf 문법

 

 대부분의 HTML 속성은 타임리프의 속성으로 쓰이는 th:html 속성으로 변경할 수 있습니다.

 

 

@{ URL 링크 } - URL 링크 표현식

• @{ URL 링크 } : 타임리프는 URL 링크를 사용하는 경우 @{...}를 사용합니다.
• 예시)
  th:href="@{/css/bootstrap.min.css}"

 

| 리터럴 | - 리터럴 대체

• 타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 합니다.
• 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있습니다 ! 
• 예시)
  <span th:text="'welcome to our application, ' + ${user.name} + '!' ">
  <span th:text="|welcome to our application, ${user.name}!|">
  
  

${ 변수명 } - 변수 표현식

• 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있습니다.
• 프로퍼티 접근법을 사용 ( item.getPrice() -> item.price )
• 예시)
  <td th:text="${item.price}">10000</td> ( 10000 대신 item.price 값이 들어간다. )

 

#{ 변수명 } - 외부 자원 변수 표현식

• 메시지, properties와 같은 외부 자원의 데이터를 조회
• 예시)
  th:text="#{member.register}"

 

 

 

 

 

참고 블로그 :

Thymeleaf

 

Spring MVC - 타임리프(Thymeleaf)에 대한 간단한 정리