Spring Boot - '프로젝트 구조 이해' / 데이터 흐름에 대한 이해 / Thymeleaf에 대한 이해 / view 처리

Spring Boot (+ RESTful)

Spring Boot - '프로젝트 구조 이해' / 데이터 흐름에 대한 이해 / Thymeleaf에 대한 이해 / view 처리

wy-family 2024. 12. 14. 22:20

우선, 조금 이해가 안 되는 부분이 있어서 공부를 좀 하고 넘어가도록 하겠다.

thymeleaf 가 html 인거야?

Thymeleaf는 HTML 템플릿 엔진입니다. 즉, HTML을 기반으로 동작하는 템플릿 엔진이기 때문에 HTML 문서 안에 서버 사이드 로직을 추가할 수 있습니다.

Thymeleaf의 개념

HTML 파일에 동적 데이터를 삽입하고 표현하기 위한 템플릿 엔진입니다.
Thymeleaf는 순수 HTML 문법을 사용하므로, 웹 브라우저에서 Thymeleaf 코드를 그대로 열어도 HTML처럼 보입니다.
Spring Boot에서 Thymeleaf는 View를 렌더링하는 데 사용됩니다.

Thymeleaf와 HTML의 관계

HTML: 정적 화면을 표시하는 구조화된 언어입니다.
Thymeleaf: HTML에 서버 사이드에서 동적 데이터를 표현하는 기능을 추가한 것입니다.
- th:text, th:each, th:if 등의 속성을 통해 HTML 문서 안에 동적인 데이터를 표현합니다.

Thymeleaf 예시

HTML (정적)

<!DOCTYPE html>
<html>
<head>
    <title>Static Page</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is a static HTML page.</p>
</body>
</html>

Thymeleaf (동적)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Dynamic Page</title>
</head>
<body>
    <h1 th:text="${title}">Default Title</h1>
    <p th:text="${message}">Default Message</p>
</body>
</html>

설명

HTML과 구조가 거의 같지만, th:text와 같은 Thymeleaf 속성이 추가됩니다.
${title}와 ${message}는 서버에서 전달한 데이터가 들어갈 위치입니다.
브라우저에서 Thymeleaf 코드를 그대로 열면 HTML처럼 보이지만, Spring Boot가 렌더링하면 동적인 데이터를 포함한 HTML 페이지가 됩니다.

결론

Thymeleaf는 HTML을 확장하여 동적 데이터 처리를 가능하게 하는 템플릿 엔진입니다.
따라서 HTML 파일과 매우 유사하지만, th:*와 같은 Thymeleaf 전용 속성을 사용하여 서버 사이드 데이터를 표현할 수 있습니다.

그럼 html 을 기반으로 동작하는 템플릿 엔진이 thymeleaf 말고도 더 있는거야?

네, HTML을 기반으로 동작하는 템플릿 엔진은 Thymeleaf 외에도 여러 가지가 있습니다. 각 템플릿 엔진은 서버 사이드에서 HTML을 동적으로 생성하거나 처리할 수 있도록 도와줍니다.

HTML 기반의 주요 템플릿 엔진

1. Thymeleaf

주요 특징: 순수 HTML과 호환되며 Spring Boot와의 연동이 뛰어납니다.
장점:
- 브라우저에서 Thymeleaf 코드가 HTML처럼 보입니다.
- th:text, th:each, th:if 등 강력한 속성 제공.
용도: 서버 사이드에서 동적 페이지 렌더링.
적용: Spring Boot 프로젝트에 기본 탑재.

2. JSP (Java Server Pages)

주요 특징: 오래된 Java 기반 템플릿 엔진입니다.
장점:
- 간단한 Java 코드를 HTML 안에 삽입 가능.
- Servlet과 함께 사용.
단점:
- 코드가 복잡해질 수 있고 유지보수가 어렵습니다.
- 최신 Spring Boot 프로젝트에서는 점차 사용 빈도가 줄어들고 있습니다.
예시:

<html>
    <body>
        <h1>Welcome, <%= request.getAttribute("username") %></h1>
    </body>
</html>

다른 엔진도 있지만, 중요한 2개만 좀 더 공부해보자.

Thymeleaf vs JSP

Thymeleaf와 JSP는 모두 서버 사이드 템플릿 엔진으로 HTML 기반 동적 웹 페이지를 만들 때 사용됩니다. 하지만 작동 방식, 사용성, 확장성 등에서 차이가 있습니다. 아래 비교를 통해 각 특징을 정리하고 공부할 수 있도록 가이드하겠습니다.

1. 기본 개념


구분	Thymeleaf	JSP
정의	HTML을 확장한 모던한 템플릿 엔진	Java Server Pages, Java 기반 템플릿
주요 목적	서버 사이드 데이터 렌더링 (Spring과 연동)	Java 코드와 HTML의 혼합을 통한 동적 페이지 생성
사용 기술	순수 HTML + Thymeleaf 속성 (th:*)	HTML에 Java 코드 삽입 (<% %>, EL 등)

2. 문법 비교

Thymeleaf 문법 예시

HTML에 th:* 속성을 사용하여 동적 데이터를 표현합니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Example</title>
</head>
<body>
    <h1 th:text="${title}">Default Title</h1>
    <p th:text="'Hello, ' + ${name}">Hello, User</p>

    <!-- 반복문 -->
    <ul>
        <li th:each="item : ${items}" th:text="${item}">Item</li>
    </ul>
</body>
</html>

JSP 문법 예시

HTML에 Java 코드를 삽입하거나 EL(Expression Language)로 데이터를 출력합니다.

<!DOCTYPE html>
<html>
<head>
    <title>JSP Example</title>
</head>
<body>
    <h1><%= request.getAttribute("title") %></h1>
    <p>Hello, ${name}</p>

    <!-- 반복문 -->
    <ul>
        <% 
            List<String> items = (List<String>) request.getAttribute("items");
            for(String item : items) { 
        %>
            <li><%= item %></li>
        <% } %>
    </ul>
</body>
</html>

3. 주요 차이점 비교


구분	Thymeleaf	JSP
코드 가독성	좋음: HTML 문법에 가까워서 가독성이 뛰어남.	낮음: Java 코드와 HTML이 섞여 복잡해질 수 있음.
문법	th:text, th:each 등 간단한 속성 기반 문법.	<% %>, EL, JSTL 등 Java 코드와 태그 사용.
브라우저 호환성	좋음: Thymeleaf 코드를 그대로 브라우저에서 열 수 있음.	불가: JSP는 서버를 통해 렌더링된 후만 실행 가능.
Spring 호환성	최적화: Spring Boot에 기본 탑재됨.	Spring에서도 사용 가능하지만 Thymeleaf보다 번거로움.
학습 곡선	낮음: HTML과 유사해서 학습이 쉬움.	높음: Java 코드와 EL 문법 학습이 필요함.
속도 및 성능	빠름: 경량화된 템플릿 엔진.	느림: JSP는 렌더링 시 더 많은 리소스를 사용함.
확장성 및 유지보수	우수: 템플릿의 유지보수가 쉽고 모던한 구조.	낮음: 코드와 화면이 혼합되면 유지보수가 어려움.

4. 어떤 것을 선택해야 할까?

Thymeleaf를 선택하는 경우

Spring Boot 프로젝트: Thymeleaf는 Spring과 자연스럽게 통합됩니다.
모던한 개발 환경: HTML 구조를 유지하면서 동적 데이터 처리가 필요할 때.
협업: 프론트엔드 개발자와 백엔드 개발자가 함께 작업하기 좋습니다.

JSP를 선택하는 경우

기존의 레거시 시스템: 기존에 JSP를 사용 중인 프로젝트를 유지보수할 때.
간단한 학습 환경: Java 코드와 HTML만으로 빠르게 프로토타입을 만들 때.
비용과 시간 제약: 새로운 템플릿 엔진 도입이 불가능한 상황.

백엔드, 데브옵스 - 개발자, 엔지니어 라고 한다면, thymeleaf 를 어떻게 알고 있으면 되는거야?

백엔드 개발자나 데브옵스 엔지니어로서 Thymeleaf를 학습할 때는 필수 개념과 적용 수준을 명확히 구분해서 접근하는 것이 중요합니다.

1. 왜 Thymeleaf를 알아야 하는가?

**Thymeleaf는 서버 사이드 렌더링(SSR)**을 위해 사용되는 HTML 기반의 템플릿 엔진입니다.
Spring Boot와 자연스럽게 통합되며, 서버에서 데이터를 동적으로 처리해 클라이언트에 HTML을 렌더링할 수 있습니다.
프론트엔드 개발자와 협업 시 HTML과 거의 동일한 구조를 사용하므로 이해하기 쉽고 생산성이 높습니다.

2. 백엔드 개발자로서 알아야 할 핵심

(1) Thymeleaf의 역할과 개념 이해

뷰(View) 템플릿 엔진: 서버 사이드에서 동적으로 HTML 페이지를 생성합니다.
Spring MVC와의 연동: 컨트롤러에서 모델(Model)에 데이터를 담아 Thymeleaf로 전달합니다.
HTML 기반: 순수 HTML과 호환되며, 브라우저에서 열어도 일반 HTML처럼 보입니다.

핵심 예시

@Controller
public class HomeController {
    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("message", "Hello, Thymeleaf!");
        return "hello"; // hello.html 뷰로 전달
    }
}

<!-- hello.html (Thymeleaf 템플릿) -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello</title>
</head>
<body>
    <h1 th:text="${message}">Default Message</h1>
</body>
</html>

th:text: 모델의 데이터를 템플릿에 바인딩.
실행 결과: <h1>Hello, Thymeleaf!</h1>가 출력됩니다.

(2) Thymeleaf의 주요 문법과 기능

Thymeleaf를 학습할 때 반드시 알아야 할 문법은 다음과 같습니다:


기능	Thymeleaf 문법	설명
텍스트 출력	th:text="${data}"	데이터 출력 (HTML에 안전하게 삽입)
반복문	th:each="item : ${list}"	리스트나 배열을 순회
조건문	th:if="${condition}"	조건부 렌더링
링크 생성	th:href="@{/path}"	동적 URL 생성
폼 데이터 바인딩	th:field="*{fieldName}"	입력 필드와 모델 객체의 필드 바인딩
조각 (Fragment)	th:replace, th:insert	공통 레이아웃 또는 부분 뷰 재사용

반복문 예시

<ul>
    <li th:each="item : ${items}" th:text="${item}">Item</li>
</ul>

items 리스트의 각 요소를 반복해서 출력합니다.

3. 백엔드 및 데브옵스 엔지니어로서의 Thymeleaf 학습 포인트

백엔드 개발자

Spring MVC와 Thymeleaf 연동:
- 컨트롤러 → 모델 데이터 → Thymeleaf 템플릿에 바인딩.
주요 문법 학습:
- th:text, th:each, th:if, th:href 등 주요 기능.
템플릿 재사용:
- Fragment 기능 (th:replace, th:insert)을 사용해 공통 레이아웃 작성.
폼 처리 및 데이터 바인딩:
- th:field를 이용한 데이터 입력과 검증.

데브옵스 엔지니어

Thymeleaf의 역할 이해:
- Thymeleaf는 서버 사이드 렌더링의 일부로 백엔드 애플리케이션의 UI 처리 역할을 합니다.
애플리케이션 배포 시 최적화:
- Thymeleaf는 HTML 기반이라 정적 파일로도 배포할 수 있어 성능상 이점이 있습니다.
템플릿 캐싱 관리:
- 운영 환경에서 Thymeleaf 캐시 설정을 확인하여 성능을 최적화합니다.

4. 학습 방법

Spring Boot 프로젝트 생성:
- Spring Initializr에서 Thymeleaf 의존성을 추가하여 실습 시작.
간단한 템플릿 제작:
- 데이터 출력, 반복문, 조건문을 포함한 기본 템플릿 작성.
폼 데이터 처리:
- th:field를 사용하여 입력 폼을 다뤄보기.
레이아웃과 Fragment:
- th:replace와 th:insert를 사용해 공통 레이아웃과 조각 템플릿 적용.

결론

백엔드 개발자로서는 Thymeleaf를 Spring MVC의 뷰 레이어로 이해하고, 주요 문법과 동작 방식을 학습하면 충분합니다. 데브옵스 엔지니어로서는 Thymeleaf가 애플리케이션 내에서 어떤 역할을 하는지, 그리고 최적화된 배포를 위한 설정 등을 이해하면 됩니다.

프론트엔드 개발자랑 협업할 때 중요한건가?

네, Thymeleaf를 사용할 때 프론트엔드 개발자와 협업이 중요한 이유와 그에 따른 핵심 포인트를 정리해드리겠습니다.

1. 협업이 중요한 이유

Thymeleaf는 HTML 기반의 템플릿 엔진입니다. 따라서 프론트엔드 개발자가 작성한 HTML에 백엔드 개발자가 Thymeleaf 문법을 추가하면 동적인 데이터를 뷰(View)에 표현할 수 있습니다.

협업의 핵심 포인트

HTML 구조 유지
- Thymeleaf는 기존 HTML 파일을 최대한 보존하며 서버 사이드 데이터만 추가합니다.
- 프론트엔드 개발자는 브라우저에서 Thymeleaf 코드가 없는 HTML처럼 파일을 열어볼 수 있습니다.
역할 분리
- 프론트엔드 개발자: HTML, CSS, JavaScript를 작성해 화면을 디자인합니다.
- 백엔드 개발자: Thymeleaf 문법을 사용해 서버에서 데이터를 동적으로 채워넣습니다.
간단한 수정 가능
- 프론트엔드 개발자는 Thymeleaf 문법을 몰라도 HTML을 수정할 수 있습니다.
- 백엔드 개발자는 프론트엔드에서 제공한 HTML 구조를 유지하면서 필요한 데이터만 삽입합니다.

2. 협업 시 중요 포인트

(1) HTML과 Thymeleaf 문법 분리

Thymeleaf 문법(th:text, th:each 등)을 HTML 구조에 추가하지만, CSS 클래스나 ID를 건드리지 않아야 합니다.
예시:

<!-- 프론트엔드 개발자가 작성한 코드 -->
<ul class="user-list">
    <li class="user-item">User Name</li>
</ul>

<!-- 백엔드 개발자가 수정한 코드 -->
<ul class="user-list">
    <li class="user-item" th:each="user : ${users}" th:text="${user.name}">User Name</li>
</ul>

CSS 클래스나 ID는 유지되기 때문에 프론트엔드 개발자가 스타일을 수정해도 문제가 없습니다.

(2) 공통 레이아웃과 재사용

프론트엔드 개발자는 헤더, 푸터, 네비게이션과 같은 공통 요소를 만듭니다.
백엔드 개발자는 Thymeleaf의 Fragment 기능(th:replace, th:insert)을 사용해 이를 재사용합니다.

예시: 공통 레이아웃

header.html

<header th:fragment="header">
    <h1>My Application</h1>
</header>

main.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Main Page</title>
</head>
<body>
    <div th:replace="header :: header"></div> <!-- 공통 헤더 사용 -->
    <h2>Main Content</h2>
</body>
</html>

이점: 프론트엔드 개발자가 헤더나 푸터를 수정하면 전체 페이지에 반영됩니다.

(3) 프론트엔드 코드와 Thymeleaf의 충돌 방지

Thymeleaf 문법(th:*)은 브라우저에서 렌더링되기 전까지 표준 HTML 속성처럼 보입니다.
그러나 프론트엔드 코드 작성 시 다음 사항을 주의해야 합니다:

JavaScript와 Thymeleaf 혼합 사용 시 주의:
- Thymeleaf가 서버에서 데이터를 렌더링하므로 JavaScript에서 데이터 바인딩이 필요하면 추가 작업이 필요합니다.
HTML 유효성 검사:
- Thymeleaf 속성(th:text, th:if)은 HTML 표준에 없는 속성이지만, 무시되므로 문제는 없습니다.

3. 협업 시 백엔드 개발자가 지켜야 할 사항

프론트엔드 개발자가 만든 HTML 구조를 최대한 유지합니다.
CSS 클래스나 ID를 변경하지 않고, Thymeleaf 문법만 추가합니다.
공통 레이아웃과 프래그먼트를 사용해 코드 재사용성을 높입니다.
프론트엔드와 백엔드의 역할을 명확하게 구분하고 필요한 API나 데이터만 전달합니다.

4. 결론

Thymeleaf는 HTML 구조를 최대한 보존하면서 동적 데이터를 렌더링할 수 있는 템플릿 엔진입니다.
프론트엔드 개발자는 Thymeleaf를 몰라도 HTML을 작성하고 수정할 수 있으며, 백엔드 개발자는 Thymeleaf 문법을 추가해 서버 데이터를 동적으로 처리하면 됩니다.

이러한 특성 덕분에 프론트엔드와 백엔드 협업이 효율적으로 이루어질 수 있습니다.

member 라고 했던 걸, memList 로 변경했다.

일단,

List<Member> memList 를 해가지고, 2명 밖에 없긴 하지만 어쨋든 리스트 어레이를 담아내고 있는 memList 가 있다.

어쨌든, 이 memList 라는 객체를, "memList" 에다가 연계를 시켜놓았다.

"memList" 를 Thymeleaf 로 포워딩이 되면은,

리스트에서 하나 씩 꺼내서 반복문을 작성하면 된다. (th:each 가 thymeleaf 에서는 반복문이다.)

먼저, xmls:th="http://www.thymeleaf.org" 를 해줘야 한다.

네임스페이스를 th 라고 하고, thymeleaf 라이브러리를 쓰기 위해서 저렇게 네임스페이스를 걸어줘야 한다.

이 html 은 이제 thymeleaf 템플릿이 해석을 해서 동작을 시켜주게 된다.

이제 <body> 안을 작성하자.

<body>
   <h1>Member List</h1>
   <table border="10">
      <thead>
       <tr>
         <th>ID</th>
         <th>Username</th>
         <th>Name</th>
         <th>Role</th>
       </tr>
      </thead>
     <tbody>
     <tr th:each="member : ${memList}">
       <td th:text="${member.id}"></td>
       <td th:text="${member.username}"></td>
       <td th:text="${member.name}"></td>
       <td th:text="${member.role}"></td>
     </tr>
     </tbody>
   </table>
</body>

결과가 이렇게 나왔다!

Good~

조금 더 공부하고 넘어가자!

위에 있는 html <body> 코드에 대해 HTML 구조와 Thymeleaf 문법을 상세하게 설명해 드리겠습니다. 하나하나 뜯어서 정리하니 차근차근 이해해보세요.

1. HTML 구조 설명

1.1 <h1> 태그

의미: <h1>은 **가장 중요한 제목(Heading Level 1)**을 나타냅니다.
용도: 페이지나 섹션의 주제를 강조할 때 사용합니다.
기본 스타일: 글씨가 굵고 크기가 큽니다.
예시:

<h1>Member List</h1>

브라우저 화면에 **"Member List"**라는 제목이 크게 출력됩니다.

1.2 <table> 태그

의미: <table>은 **표(table)**를 만들 때 사용됩니다.
속성:
- border="10": 테두리의 두께를 설정합니다.
  - 주의: HTML5에서는 border 속성이 비권장입니다. 대신 CSS를 사용하세요.
  - CSS 예시: style="border: 1px solid black;"

1.3 <thead> 태그

의미: <thead>는 표의 헤더 부분을 나타냅니다.
용도: 표의 열 제목(ID, Username, Name, Role)을 정의합니다.
예시:

<thead>
   <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Name</th>
      <th>Role</th>
   </tr>
</thead>

1.4 <tr> 태그

의미: <tr>은 **표의 한 행(Row)**을 나타냅니다.
용도: <thead>와 <tbody> 안에서 데이터의 행을 만듭니다.
예시:

<tr>
   <th>ID</th>
   <th>Username</th>
   <th>Name</th>
   <th>Role</th>
</tr>

1.5 <th> 태그

의미: <th>는 열의 제목(Header)을 나타냅니다.
기본 스타일: 글씨가 굵고 가운데 정렬됩니다.
용도: <thead> 안에서 각 열의 제목을 정의할 때 사용됩니다.
예시:

<th>ID</th>
<th>Username</th>

1.6 <tbody> 태그

의미: <tbody>는 표의 **내용 부분(Body)**을 나타냅니다.
용도: 동적으로 바뀌는 데이터 행을 담을 때 사용됩니다.
예시:

<tbody>
   <tr>
      <td>1</td>
      <td>john123</td>
      <td>John Doe</td>
      <td>Admin</td>
   </tr>
</tbody>

1.7 <td> 태그

의미: <td>는 표의 셀 데이터를 나타냅니다.
용도: <tr> 태그 안에서 각 열의 데이터를 담습니다.
예시:

<td>1</td>
<td>john123</td>

2. Thymeleaf 문법 설명

2.1 th:each (반복문)

의미: th:each는 Thymeleaf의 반복문입니다.
용도: 리스트나 배열의 각 요소를 순회하며 데이터를 출력합니다.
문법:

<tr th:each="member : ${memList}">

member: 반복할 때 사용되는 현재 객체의 이름입니다.
memList: 컨트롤러에서 전달된 리스트 데이터입니다.
예를 들어, memList가 [member1, member2, member3]이면, member가 순서대로 각 객체를 가리킵니다.

2.2 th:text (데이터 출력)

의미: th:text는 모델에 담긴 데이터를 HTML에 출력합니다.
용도: 동적으로 데이터를 출력하고, 기존 내용은 덮어씁니다.
문법:

<td th:text="${member.id}"></td>

${}: Thymeleaf 표현식입니다.
${member.id}: member 객체의 id 필드를 가져와 출력합니다.

3. 전체 코드 흐름

HTML 구조
- <h1>: 제목 출력.
- <table>: 표를 생성합니다.
- <thead>: 표의 열 제목을 정의합니다.
- <tbody>: 컨트롤러에서 전달된 목록 데이터를 반복하여 출력합니다.
Thymeleaf 문법
- th:each: 리스트 데이터를 반복합니다.
- th:text: 반복된 각 객체의 필드를 출력합니다.
- ${}: 모델에서 값을 가져옵니다.

4. 요약

HTML 태그
- <h1>: 제목.
- <table>: 표 생성.
- <thead>, <tbody>: 표의 구조 정의.
- <tr>: 행(Row), <th>: 열 제목, <td>: 데이터 셀.
Thymeleaf 문법
- th:each: 반복문.
- th:text: 모델 데이터를 출력.
- ${}: Thymeleaf 표현식으로 값을 가져옵니다.

'Spring Boot (+ RESTful)' 카테고리의 다른 글

Spring Boot - 자동 구성 메커니즘 Auto Configuration / 실습 - #Project 01 (1)	2024.12.15
Spring Boot - Starter / MVN Repository / (0)	2024.12.15
Spring Boot - '프로젝트 구조 이해' / 어떤 원리와 어떤 관계, 어떤 순서로 실행이 되는 것인지 프로젝트 구조와 함께 확실하게 파악! (1)	2024.12.14
Spring Boot - H2 Database - DB 연결 / Entity / Hibernate / Lombok (2)	2024.12.13
Spring Boot - POJO = Controller? / 3-tier Architecture / (2)	2024.12.13

현재글Spring Boot - '프로젝트 구조 이해' / 데이터 흐름에 대한 이해 / Thymeleaf에 대한 이해 / view 처리

wy_family

wy-family 님의 블로그 입니다.

restful, CI, CICD, 데브옵스, chatbot, 백엔드, 서버배포, 웹개발, it학습, PostgreSQL, KDT, SpringBoot, Docker, 진로계획, 자바, 진로고민, Python, restfulapi, spring, 오블완, restapi, cd, Django, 스마트팩토리, aws, Pipeline, GitLab, java, 티스토리챌린지, Rest,

Today :
Yesterday :

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31