Server Side Rendering (Thymeleaf)

728x90

도입

서버 개발자가 웹페이지를 구성하여 보여주는 기능을 SSR이라고 한다. SSR은 여러가지 방법으로 구현될 수 있는데 그 기술 중 네츄럴 템플릿인 Thymeleaf를 알아보도록 하자.

SSR(Server-Side Rendering)

서버 개발자가 보여주고 싶은 웹페이지를 구성하여 보여주는 방법을 SSR이라고 한다.

서버를 활용하여 웹페이지를 랜더링하기 때문에 CSR(Client-Side Rendering) 보다는 페이지를 생성하여 보여주는 것보다 느리지만, 데이터를 가져와 웹페이지의 콘텐츠를 모두 추가하여 보여주는 면에서는 더 빠르다.

Thymeleaf

SSR을 구성하는 방법 중 하나로 Thymeleaf가 있다. 이 기술의 특징은 네츄럴 템플릿 이라는 점이다.

Html의 tag안에 동적으로 서버에서 처리할 데이터를 넣어주게되면, 이를 View로 처리할 때 데이터를 바꾸어 Html을 구성하고 보여준다.

Html을 그냥 파일로 열게 되면 해당 Thymeleaf로 넣어준 데이터가 아니라 기존에 html에 있던 데이터가 들어가게 된다. 즉 View로 서버에서 처리하여 나온 웹페이지와 Html 파일을 열어본 결과 두가지 모두 정상적으로 확인이 가능하다. 이것은 네츄럴 템플릿의 특징이고 쉽게 말해 순수 HTML을 그대로 유지하며 뷰 템플릿의 기능도 사용할 수 있는 기능을 말한다.

Thymeleaf Dependency 추가

Thymeleaf를 사용하기 위해서는 Dependency를 추가해야한다.

스프링 프로젝트를 만들 때, Thymeleaf 기능을 추가하면 상관이 없지만 그렇지 않은 경우에는

Gradle Project를 사용하면 build.gradle에 들어가서 아래 코드를 추가해주면 된다. (Maven은 pom.xml에 다르게 추가)

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

Thymeleaf 사용부터 기본 문법까지

Thymeleaf는 html에 직접 th:xxx로 넣어주어 사용하게 된다.

우선 사용을 하려면 html 태그에 아래와 같이 넣어주어야한다.

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

html의 대부분의 값을 th:xxx로 넣어주면 Server-Side Rendering 할 수 있다.

1. URL 링크 표현식 @{ ~ }

url링크는 @{~}로 변경할 수 있다.

<link th:href="@{/css/bootstrap.min.css}"
            href="../css/bootstrap.min.css" rel="stylesheet">

위처럼 th:href를 활용하여 css를 링크하는 href를 서버에서 변경할 수 있다. 이 때 @{/css/bootstrap.min.css} 이렇게 링크표현식을 작성하여 준것을 알 수 있다.

2. 변수 표현식 ${ ~ }

변수를 표현하는 방법으로 ${ ~ }를 사용한다.

<td th:text="${item.price}">1000</td>

위 표현식을 사용하면 model에서 item의 객체를 가져와서 model.getPrice()를 사용하여 price를 가져올 것이다.

그리고 th:text를 사용하여 해당 text를 변경해 줄 것이다.

이 때 특수한 경우로 쿼리파라미터를 쉽게 꺼내는 방법으로 param.name으로 꺼낼 수 있다. (타임리프에서 기능 제공)

3. 리터럴 대체문법 | ~ |

타임리프에서는 문자와 표현식이 분리되어 있기 때문에 + 연산을 사용하여 두개를 더해 넣어주어야한다.

<span th:text="'Hi my name is, ' + ${user.name} + '!'">

예를들어 위 코드를 보면 text를 'Hi my name is, ${user.name}!'를 표현하고 싶은 것을 알 수 있다.

이 때 표현식은 분리되어 있어 + 연산을 활용하여 끊어서 넣어주는 것을 알 수 있다.

이를 '|' 연산을 활용하면 문자와 표현식이 분리되지 않기 때문에 + 연산을 사용하지 않고 구현할 수 있다.

<span th:text="|Hi my name is, ${user.name}!|">

4. 반복문법 th:each

th:each 를 사용하면 반복이 가능하다.

<tr th:each="item : ${items}">
<td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
<td><a href="item.html" th:href="@{|/basic/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
<td th:text="${item.price}">10000</td>
<td th:text="${item.quantity}">10</td>
</tr>

위 코드를 사용하면 items라는 Collection 객체를 model에서 가져와서 item으 변수를 넣어주며 반복한다.

그리고 반복을 진행하며 Collection의 수 만큼 <tr>..</tr>의 하위태그로 <td>가 계속 생성될 것이다.

5. 조건문 th:if

th:if는 조건문으로 동작한다.

<h2 th:if="${param.status}" th:text="'안녕하세요'"></h2>

만약, param.status가 true이라면 위 h2 태그에 '안녕하세요'가 들어가 보여질 것이다.

배운내용

1. SSR중 natural templete인 Thymeleaf를 알아보았다.

2. Thymeleaf의 기본적인 문법들을 알아보았다.

이 글은 김영한님의 'Spring MVC 1편' 강의를 공부한 후 작성한 글입니다.