스프링부트3 타임리프 사용이유 SpringBoot3 + thymeleaf

타임리프는 정적인 html을 동적인 html로 렌더링한다. 서버렌더링하여 html을 클라이언트로 내려준다. 클라이언트의 자바스크립트 또한 동적인html를 구현할 수 있다. 타임리프는 과거의 JSTL과 비슷한 면을 가진다. 서버에서 동적인 html을 구성하여 클라이언트에 html를 전달한다. 자바스크립트로 처리하기 어려운면을 타임리프가 처리하고 데이터의 흐름을 간편화 할 수 있는 장점도 생긴다. 어쨌든, 활용도가 높다.

스프링부트3 타임리프 사용이유
SpringBoot3 + thymeleaf

스프링부트3( SpringBoot3 )를 공부할 때 거의 필수적으로 설치하는 것이 타임리프 ( thymeleaf ) 이다.

스프링부트를 위해 사용한다기 보다는 스프링부트에서 사용하는 html 를 위한 것이다.

스프링부트 프로젝트에 추가되어 동적인 웹페이지를 구성하는 프론트엔드( Front-End )에 해당한다.

타임리프를 공부하다보니 예전에 어떤 것과 비슷한 생각이 들었다.

JSTL이다.

HTM이 렌더링되는 시점이 서버사이드( Server-Side)이며, 서버에서 원하는 형태로 만들고 HTML 로 렌더링되면 클라이언트에서 눈으로 보이는 HTML이 생성된다.

타임리프와 JSTL은 비슷한 면이 있지만, 시간이 지나니 타임리프를 자주 사용하는 시대가 되었다.

타임리프 / Thymeleaf 무엇인가

스프링부트3( SpringBoot3 ) 프로젝트를 만들 때 버릇처럼 타임리프( thymeleaf )를 추가한다.

구체적인 것은 모르지만, 따라하니 무엇인지는 알겠다.

왜 사용하는지는 궁금하지만, 사용하면 편하다.

아마 보통은 이런 느낌으로 시작하고 개발할 때는 검색과 적용을 하다보니 사용법을 익히기 될 것이다.

익숙해질 때가 되면 타임리프에 대해 구체적으로 알기 위해 스터디를 할지도 모른다.

타임리프는 동적으로 html을 렌더링하는 템플릿 엔진이다.

렌더링한다는 것은 html을 만든다는 것이며, 이것은 동적으로 html 생성이 가능한 것을 의미한다.

렌더링되는 시점은 서버사이드( Server-Side )이며, html 생성 후 화면에 표시된다.

비슷한 것으로 JSTL 이 있으며, 사용법은 비슷하다.

굳이 필요한가.

본인이 스프링부트3( SpringBoot 3 )를 공부하면서 느낀 것이 있다면 프론트엔드( FrontEnd ) 부분이 이렇게 어려운 부분이었나 하는 부분이었다.

의외로 간단한 부분도 손이 많이 가는 느낌.

결론부터 말하면 타임리프( Thymeleaf )는 이런 번거롭고 손이 많이 가는 작업을 수월하게 해주는 느낌이다.

프론트엔드 부분도 자바스크립트( JavaScript )만을 사용하여 똑같이 구현할 수도 있다.

하지만, 타임리프를 사용하면 상대적으로 손이 덜 가는 그런 느낌이 있었다. 편의성이 좋은 느낌.

이것은 과거의 JSTL을 사용해 본 개발자라면 느끼는 부분일 것이다.

하지만, 타임리프에 너무 의존하면 의외로 번잡한 부분도 생긴다.

사용하는 목적

html을 구성하는 방법은 여러가지가 있다.

타임리프( thymeleaf )를 사용하지 않는 개발자분들도 있고, 편의성을 위해 사용하는 분들도 있다.

지금은 거의 리액트( React )를 사용하여 백엔드( BackEnd )와 프론트엔드( FrontEnd )를 구분하긴 하지만, 그럼에도 스프링부트3( SpringBoot3 )에서 백엔드를 구현하고자 할 때 적합하다.

타임리프를 사용하는 이유가 굳이 이런 이유일까?

개발은 편해야하고 라이브러리는 정확해야 하는 것이 본인 생각이다.

타임리프에 대해 찾아보면 자바 웹 애플리케이션에서 사용할 수 있는 템플릿엔진이다.

스프링 프레임워크와 완벽한 통합을 그 목적으로 두고 있으며 JSP를 완벽하게 대체하고자 한다.

이 말은 곧 자바를 기반으로 하고 있는 스프링부트에서 html을 구성하는데 최적의 방법론을 제공한다는 것과 같다.

하지만, 굳이 이런저러 소개글 보다는 직접 해 보는 것이 피부에 와 닿을 것이다.

본인이 직접 개발하면서 겪어본 느낌이라면 서버사이드( Server-Side ) 에서 동적인 html을 구현하고 클라이언트사이드 ( Client-Side )에서 동적인 html을 구현하는 것이 편했다는 것이다.

그리고 중요한 것은 사용하는 사람들이 많기 때문에 도움받을 곳이 많다는 것도 장점이다.

타임리프 사용방법

스프링부트3( SpringBoot3 )에서 타임리프( thymeleaf )를 사용하는 방법은 간단하다.

Gradle에 라이브러리를 추가하고 컨트롤러에 URL을 지정한 다음 template 폴더에 있는 html을 매핑해주면 된다.

build.gradle에 의존성 추가하기
html 만들기
Controller 에서 매핑하기

build.gradle에 의존성 추가하기

스프링부트3( SpringBoot3 )는 build.gradle 를 이용해 필요한 라이브러리를 관리한다.

타임리프( thymeleaf )를 사용하기 위해선 의존성 라이브러리인 dependencies 에 해당하는 내용을 추가한다.

아래는 타임리프에 대한 라이브러리를 추가한 내용이다.

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

Controller에서 매핑하기

html에 접근하기 위한 컨트롤러( controller )를 하나 만들어 보자.

아래의 컨트롤러는 http://localhost:8080/test/ 으로 매핑이 되며,

타임리프( thymeleaf)는 templates/test.html 파일을 찾아 서버렌더링을 하고 웹브라우저에 html을 내려줄 것이다.

이것을 확인하기 위해 현재날짜를 표현하고 화면에 표현해 주도록 attribute를 설정했다.

@Controller
@RequiredArgsConstructor
public class ViewController {

    @GetMapping("/test")
    public String WebTest(Model model) {

        String svrDtNow = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss.SSS"));

        model.addAttribute("svrDtNow", svrDtNow );

        return "test";
    }
}

html 만들기

스프링부트3( SpringBoot3 ) 프로젝트의 template 폴더에 html 파일을 하나 만들어 두자.

만들어진 html은 컨트롤러( Controller )에서 MVC 매핑해주면 URL을 통해 접근할 수 있다.

아래 html 에는 타임리프( thymeleaf )을 사용하고 있으며 코드는 다음과 같다.

<p th:text="${svrDtNow}"></p>

해당 코드는 p태그에 타임리프를 이용하여 컨트롤러에서 보내진 날짜 문자열을 표현하는 것이다.

컨트롤러에서 만들어진 오늘날짜를 html로 전송하고 표시하는 것을 의미한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <div>
        <h1>Thymeleaf-Test</h1>
    </div>
    <div>
        <p th:text="${svrDtNow}"></p>
    </div>
    <div>
        Thymeleaf 타임리프 Test Page
    </div>
</body>
</html>

결과 확인하기

위의 코드를 사용해 타임리프( thymeleaf )를 사용한 모습이며, 과정은 다음과 같다.

build.gradle 에 타임리프를 사용할 라이브러리를 추가한다.
컨트롤러를 추가하고 MVC 매핑으로 html을 지정한다.
테스트로 현재날짜를 화면에 표시하도록 attribute를 지정한다.
html를 구성하고 타임리프에서 텍스트를 출력할 수 있도록 컨트롤러에서 보낸 attribute 를 지정한다.

결과화면은 다음과 같다.

저작자표시 비영리 변경금지

'programming > SpringBoot' 카테고리의 다른 글

스프링부트3 리포지토리 역할 springboot3 @Repository SQL 쿼리는 익혀두자 (0)	2024.08.12
스프링부트3 서비스 역할 springboot3 @service 비즈니스 로직을 구현한다. (0)	2024.07.31
스프링부트3 카페24 웹서비스 하기 개발보다 배포와 반영이 어렵다. (0)	2024.07.29
스프링부트3 Controller 컨트롤러의 역할 사용 방법 요청에 대한 응답을 한다. (1)	2024.07.21
스프링부트3 / start.spring.io 에서 프로젝트 생성하기 (0)	2024.07.10

스프링부트3 타임리프 사용이유 SpringBoot3 + thymeleaf