🛍️ 상품목록 페이지 만들기 (Thymeleaf)

EthAnalog·2025년 8월 21일

Controller Java ListPage Spring boot TemplateEngine Thymeleaf model

Spring Boot

목록 보기

6/16

✅ 어떤 기능을 만드는 것인가?

/list로 접속하면 상품 목록 페이지(list.html)를 전송
컨트롤러에서 Model에 담은 데이터를 Thymeleaf로 바인딩
정적 HTML → 동적 페이지로 전환하는 첫 단계 확보

👉 왜 이걸 배워야 하지?

쇼핑몰/블로그의 기본 흐름은 목록 → 상세
템플릿 엔진을 알아야 DB 데이터로 화면을 동적으로 구성할 수 있음
이후 JPA 연동 시 findAll() 결과를 th:each로 렌더링하는 발판

📚 개념 정리

키워드	설명
Controller	API를 담는 클래스. 요청을 받아 어떤 뷰를 반환할지 결정
`@GetMapping`	특정 URL의 GET 요청을 처리하는 API 정의
templates/	Thymeleaf 템플릿 위치. `return "list"` → `templates/list.html` 렌더
Model	컨트롤러 → 템플릿으로 보내는 데이터 컨테이너
`th:text`	태그 내부 텍스트를 서버 데이터로 치환
Thymeleaf	서버 데이터 → HTML에 주입하는 템플릿 엔진

⚙️ 구현 흐름 및 코드

1) 컨트롤러 만들기

📄 src/main/java/com/apple/shop/item/ItemController.java

package com.apple.shop.item;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ItemController {

    @GetMapping("/list")
    String list(Model model){
        model.addAttribute("name", "홍길동"); // 임시 데이터
        return "list"; // templates/list.html
    }
}

패키지 선언을 맞춰야 다른 곳에서 찾을 수 있음 (package com.apple.shop.item;)
return "list"처럼 확장자 생략 권장(Thymeleaf 규칙)

2) 템플릿(HTML) 만들기

📄 src/main/resources/templates/list.html

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>상품 목록</title>
</head>
<body>
  <div>
    <img src="https://placehold.co/300" alt="thumb">
    <h4 th:text="${name}">바지</h4>
    <p>7억</p>
  </div>

  <div>
    <img src="https://placehold.co/300" alt="thumb">
    <h4>셔츠</h4>
    <p>8억</p>
  </div>
</body>
</html>

xmlns:th 선언으로 Thymeleaf 속성 사용 가능
${name} ← 컨트롤러에서 보낸 Model 데이터

3) 의존성 추가(최초 1회)

📄 build.gradle

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

추가 후 Load Gradle Changes → 서버 재시작

4) 동작 확인

서버 실행 → 브라우저에서 http://localhost:8080/list 접속
<h4>에 홍길동이 보이면 성공(임시 데이터 바인딩 확인)
다음 단계: DB 연동 후 th:each로 목록 반복 렌더링

💡 이런 곳에 활용할 수 있어요

상품/게시글/공지 목록 페이지
필터·정렬·페이지네이션(이후 JPA와 확장)
목록 → 상세로 링크 연결

✍️ 개인 정리 및 회고

Controller → Model → Template 데이터 흐름 체득
정적 HTML에서 동적 렌더링으로 전환
다음은 DB에서 findAll() 결과를 받아 th:each로 반복 출력

🔑 오늘 배운 핵심 3줄 요약

/list API에서 Model로 데이터 전달 → list.html에서 Thymeleaf 바인딩
템플릿은 반드시 templates/에 두고 return "뷰이름"으로 렌더
이후 DB 데이터도 같은 패턴으로 쉽게 확장 가능

EthAnalog

이전 포스트

🌙 HTTP 요청 & REST API 개념 정리

다음 포스트

🛍️ 상품목록 페이지 만들기 (Thymeleaf)

Spring Boot

✅ 어떤 기능을 만드는 것인가?

👉 왜 이걸 배워야 하지?

📚 개념 정리

⚙️ 구현 흐름 및 코드

1) 컨트롤러 만들기

2) 템플릿(HTML) 만들기

3) 의존성 추가(최초 1회)

4) 동작 확인

💡 이런 곳에 활용할 수 있어요

✍️ 개인 정리 및 회고

🔑 오늘 배운 핵심 3줄 요약

🌙 HTTP 요청 & REST API 개념 정리

🛠️ JPA와 MySQL 접속 + 테이블(Entity) 만들기

0개의 댓글