[MVC-1편] 웹페이지, 타임리프(Thymeleaf) 구성

해당 포스팅은 인프런스프링 MVC1편 강의를 듣고 적은 강의 노트를 정리하며 기록하기 위한 글입니다.

강의를 시청하며, 프로젝트에 적용할 수 있는 부분들이나 궁금한 기능들을 정리하며 포스팅할 예정입니다.

제 개인적인 의견이 더해져 올바르지 않은 정보가 들어가 있다면, 피드백이나 댓글로 남겨주시면 감사하겠습니다.

자세한 강의 내용은 인프런 스프링 MVC에서 만나보실 수 있습니다.

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의

웹 애플리케이션을 개발할 때 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 MVC의 핵심 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., -

www.inflearn.com

템플릿 엔진

지정된 템플릿 양식과 데이터가 결합하여 HTML문서를 출력해 주는 소프트웨어

템플릿 엔진은 크게 서버사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)으로 나뉜다.

여기서 타임리프는 SSR에 속하며, 템플릿 엔진의 특징과 종류에대해서 간단히 정리하고 넘어가자.

특징

코드량 감소 : HTML에 비해 간단한 문법을 사용하기 때문에 코드량을 줄일 수 있다.
재사용성 : 템플릿에 맞추어 데이터만 변경되는 경우가 많다.
유지보수에 용이 : 넘겨주는 데이터만 수정하면 된다.

Java에서의 템플릿 엔진 특징

JSP : 현재 스프링에서 비권장
Freemarker: 템플릿 엔진으로서 기능이 너무 다양함. 숙련도 낮은 경우 비즈니스 로직이 추가됨.
Thymeleaf :현재 스프링에서 권장
- HTML 태그에 속성로 템플릿 기능을 사용하기에 기존 템플릿 엔진과 다르다.
- JS Framework에 익숙한 사람이라면 사용하기 좋다.
Mustache : 심플하고 서버, 클라 모두 사용 가능

여기서 현재 스프링에서 권장하는 Thymeleaf에 대해 정리해 보자.

타임리프(Thymeleaf)

타임리프는 컨트롤러가 전달하는 데이터를 이용해 동적으로 화면을 만들어주는 역할을 하는 뷰 템플릿 엔진이다.

타임리프가 갖는 대표적인 특징은 다음과 같다.

서버상에서 동작하지 않아도 HTML 파일의 내용을 바로 확인이 가능하다.
순수 HTML 구조를 유지한다.

순수 HTML 구조를 유지한다는 말이 무엇일까?

타임리프는 순수 HTML을 유지하기 때문에 Natural Template(내추럴 템플릿)이라고도 불린다.

서버를 가동하지 않으면 순수 HTML을, 서버를 구동하여 뷰 템플릿을 거쳐 동적으로 변경된 HTML을 확인할 수 있다.

JSP 같은 경우는 서버를 구동하지 않고 해당 파일을 열게 되면 JSP 소스코드와 HTML이 섞여있어서 정상적인 확인이 불가능했다. 즉 오직 서버를 통해서 JSP을 열어야 JSP 파일을 확인할 수 있었다.

반면에 타임리프는 화면 구성을 서버 가동없이 쉽게 파악할 수 있어 개발에 수정할 때마다 서버 재가동이 필요 없어지기 때문에 개발에 용이해진다.

뿐만 아니라 spring에서 thymeleaf 사용을 권장하는 이유는

spring에서 th속성들로 유지관리 및 확장이 쉽도록 자동으로 처리해 주는 부분이 있었다.

해당 내용은 MVC-2편과 추가적인 공부를 통해 포스팅하도록 하겠다.

Thymeleaf 사용하기

Gradle - build.gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

Maven - pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

위 설정을 추가 후 빌드하면 application.properties에 아래 코드가 자동으로 추가된다.

spring.thymeleaf.prefix=classpath:/templates/ 
spring.thymeleaf.suffix=.html

만약 다음과 같이 String으로 경로를 반환을 하게 되면

@GetMapping
public String items(Model model) {
    List<Item> items = itemRepository.findAll();
    model.addAttribute("items", items);
    return "basic/items";
}

/templates/basic/items.html로 기본 경로가 전환된다.

사용할 HTML 파일 상단에 코드 추가

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

Thymeleaf 웹페이지 예제

다음 코드를 살펴보자. (간단한 상품 등록 버튼)

<div class="row">
        <div class="col">
            <button class="btn btn-primary float-end"
                    onclick="location.href='addForm.html'"
                    th:onclick="|location.href='@{/basic/items/add}'|"
                    type="button">상품 등록</button>
        </div>
</div>

기본 onclick 태그의 html 코드에서 th태그가 붙은 부분 (th:onclick)이 서버 사이드에서 렌더링 되어,

location을 th태그 속성의 값으로 대체되어 있다.

이렇게 사용되는 타임리프의 장점은 다음과 같다.

코드를 변경하지 않기 때문에 서버팀과 퍼블팀 간의 협업이 편해진다.
비즈니스 로직과 분리되어 View에 집중할 수 있다.
서버상에서 동작하지 않아도 되기 때문에, 서버 동작 없이 화면을 확인할 수 있다. (서버가 구동하지 않는 경우 정적 콘텐츠)

Thymeleaf 문법

표현	의미	예시
@{...}	URL 링크 표현식	th:href="@{/css/bootstrap.min.css}"
\|...\|	리터럴 대체	th:onclick= "'location.href=' + '\'' + @{/basic/items/add} + '\''" -> "\|location.href='@{/basic/items/add}'\|"
th:each	반복 출력	<tr th:each="item: ${items}"> <td th:text="${item.price}">100</td> </tr>
${...}	변수 표현식	th:text=${item.price}
th:text	내용 변경	<span th:text="\|Welcome to our application, ${user.name}!\|">
*{...}	선택 변수	<tr th:object="${item}"> <td th:text="*{price}">100</td> </tr> eq ${item.price}

타임리프의 많은 문법과 기본 표현식 등 많은 정보들이 있지만

mvc-2편 타임리프와 spring을 통합하는 강의를 듣고 정리 후 타임리프 2편을 업로드하겠습니다.

감사합니다.

'Back-End > Spring' 카테고리의 다른 글

[Spring] 테스트 코드 작성, Mock (0)	2023.04.17
[MVC-2편] 오류 코드와 메시지 처리 (0)	2023.04.16
[MVC-1편] given-when-then 패턴이란 (0)	2023.03.18
[MVC-1편] 기본 기능, HTTP 요청, 요청 파라미터 (0)	2023.03.14
[MVC-1편] 기본 기능, logging 알아보기 (0)	2023.03.14