📦 상품목록 페이지 디자인 & DB 데이터 출력 (Thymeleaf)

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

• DB에 있는 상품 데이터를 불러와서 상품 목록 페이지에 출력
• CSS를 적용해 디자인 개선
• th:each 반복문으로 상품 데이터를 반복 출력

---

👉 왜 이걸 배워야 하지?

• REST API로 데이터만 주고받는 건 기초 수준
• 실제 웹서비스는 데이터 + 화면(UI) 을 함께 제공해야 의미 있음
• Spring + Thymeleaf를 활용하면 DB → 서버 → HTML 흐름을 완성할 수 있음

---

📚 개념 정리

개념	설명
th:each	리스트 데이터를 반복문으로 HTML에 출력할 때 사용
Model.addAttribute	서버에서 HTML로 데이터를 전달할 때 사용
@ToString	클래스의 모든 변수를 문자열로 출력해주는 Lombok 기능
List	여러 데이터를 한 변수에 담는 자료형
static 폴더	CSS, JS, 이미지 같은 정적 자원을 보관하는 폴더

---

⚙️ 구현 흐름 및 코드

1. 상품 목록 페이지 레이아웃 (list.html)

<div class="card" th:each="i : ${items}">
  <img src="https://placehold.co/300">
  <div>
    <h4 th:text="${i.title}">바지</h4>
    <p th:text="${i.price}">7억</p>
  </div>
</div>

• th:each="i : ${items}" → 서버에서 보낸 items 리스트를 하나씩 반복 출력
• ${i.title} → i 객체의 title 컬럼 출력
• ${i.price} → i 객체의 price 컬럼 출력

---

2. CSS 적용 (main.css, static 폴더에 저장)

.card {
  margin : 30px auto;
  display : flex;
}
.card img {
  width : 150px;
  margin-right : 20px;
}

<link href="/main.css" rel="stylesheet">

---

3. 서버 코드 (ItemController.java)

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

---

4. @ToString (Item.java)

@Entity
@ToString
public class Item {
  public Long id;
  public String title;
  public Integer price;
}

• @ToString 붙이면 System.out.println(item); 실행 시 모든 변수값이 출력됨

---

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

• 쇼핑몰 상품 리스트 출력
• 게시판 글 목록 출력
• 유저 프로필 목록 출력
• 공지사항 / 이벤트 목록 페이지

---

✍️ 개인 정리 및 회고

• REST API만으로는 서비스가 불완전하다.
• DB에서 데이터를 꺼내 HTML에 꽂는 흐름을 완성해야 "서비스" 느낌이 난다.
• th:each 문법은 처음엔 낯설지만 사실상 for문과 동일하다.

---

🔑 오늘 배운 핵심 3줄 요약

1. th:each로 HTML 반복 출력 가능
2. Model.addAttribute로 서버 데이터 → HTML 전달
3. @ToString으로 객체 출력 편리하게 처리