📄 상세페이지 만들기 1 (URL 파라미터, Optional, @PathVariable)

EthAnalog·2025년 8월 20일

@PathVariable Backend JPA Java Spring boot optional thymleaf

Spring Boot

목록 보기

13/16

🔑 오늘 배운 핵심 3줄 요약

@GetMapping("/detail/{id}") + @PathVariable로 하나의 API로 여러 상품 상세 처리
itemRepository.findById(id)는 Optional을 반환하므로 부재 케이스를 안전하게 처리
Model로 조회 결과를 템플릿에 바인딩해 detail.html 렌더링

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

/detail/{id} 요청에 대해 해당 상품의 상세를 보여주기
URL의 {id} 값을 받아 DB에서 단건 조회
조회 실패 시 404/리다이렉트 등 안전 처리

👉 왜 이걸 배워야 하지?

목록 → 상세(1건) 패턴은 모든 서비스의 기본
URL 파라미터, Optional 안전 처리 패턴은 실무 빈출
이후 장바구니, 주문, 수정/삭제로 자연스러운 확장

📚 개념 정리

개념	설명
URL 파라미터	`/detail/{id}`처럼 경로 일부를 변수로 받는 방식
`@PathVariable`	경로 변수 값을 메서드 인자로 바인딩
`Optional<T>`	값이 없을 수 있음을 표현하는 컨테이너
`findById(id)`	`Optional<Entity>` 반환 (JPA 기본)
`Model`	컨트롤러 → 뷰로 데이터 전달
`templates/*.html`	`return "뷰명"`으로 Thymeleaf 렌더링

⚙️ 구현 흐름 및 코드

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

package com.apple.shop;

import com.apple.shop.item.Item;
import com.apple.shop.item.ItemRepository;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

@Controller
public class ItemController {

    private final ItemRepository itemRepository;
    public ItemController(ItemRepository itemRepository) {
        this.itemRepository = itemRepository;
    }

    @GetMapping("/detail/{id}")
    public String detail(@PathVariable Long id, Model model) {
        var item = itemRepository.findById(id)
                .orElse(null); // 필요 시 orElseThrow로 예외 처리
        
        if (item == null) {
            return "redirect:/list"; // 또는 404 페이지로
        }
        model.addAttribute("item", item);
        return "detail"; // templates/detail.html
    }
}

{id} 자리에 오는 숫자를 @PathVariable Long id로 받는다
findById(id) 결과는 Optional<Item> → 부재 케이스 처리
모델에 담아 detail.html에서 ${item.*}로 접근

📄 `src/main/resources/templates/detail.html`

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title th:text="${item.title}">상세페이지</title>
  <style>
    .detail { text-align: center; }
    .detail img { max-width: 30%; display: block; margin: auto; }
  </style>
</head>
<body>
  <div th:replace="~{nav.html :: navbar}"></div>

  <div class="detail">
    <h4>상세페이지</h4>
    <img src="https://placehold.co/300" alt="thumbnail">
    <h4 th:text="${item.title}">상품명</h4>
    <p th:text="${#numbers.formatInteger(item.price, 0, 'COMMA')}">가격</p>
  </div>
</body>
</html>

${item.title}, ${item.price}로 바인딩된 데이터 출력
th:replace로 공통 Navbar 재사용

📄 `src/main/resources/templates/list.html` (상세 링크 예시)

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>목록</title></head>
<body>
  <div th:replace="~{nav.html :: navbar}"></div>
  <h3>상품 목록</h3>
  <ul>
    <li th:each="it : ${items}">
      <a th:href="@{|/detail/${it.id}|}" th:text="${it.title}">상품명</a>
      <span th:text="${it.price}">가격</span>
    </li>
  </ul>
</body>
</html>

각 항목에 /detail/{id} 링크 연결

📌 사용된 개념 요약

키워드	한 줄 요약
`@GetMapping("/detail/{id}")`	상세페이지 라우팅
`@PathVariable`	URL 경로 값을 인자로 수신
`Optional`	값 부재를 표현, NPE 방지
`findById`	단건 조회 메서드
`Model`	템플릿 데이터 전달

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

상품/게시글/프로필 상세
공지/주문/댓글 단건 조회
목록 → 상세 → 수정/삭제 표준 흐름

✍️ 개인 정리 및 회고

하나의 API로 N개의 상세를 처리하려면 URL 파라미터가 필수
Optional로 “없음”을 명시적으로 다루면 안정성이 올라간다
템플릿 바인딩으로 UI/데이터 분리가 자연스러워진다

EthAnalog

이전 포스트

🛒 상품 추가기능 2 & Navbar 만들기

다음 포스트

📄 상세페이지 만들기 1 (URL 파라미터, Optional, @PathVariable)

Spring Boot

🔑 오늘 배운 핵심 3줄 요약

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

👉 왜 이걸 배워야 하지?

📚 개념 정리

⚙️ 구현 흐름 및 코드

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

📄 `src/main/resources/templates/detail.html`

📄 `src/main/resources/templates/list.html` (상세 링크 예시)

📌 사용된 개념 요약

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

✍️ 개인 정리 및 회고

🛒 상품 추가기능 2 & Navbar 만들기

📄 상세페이지 만들기 2 & 예외처리 (Thymeleaf, @PathVariable, Optional, error.html)

0개의 댓글

📄 상세페이지 만들기 1 (URL 파라미터, Optional, @PathVariable)

Spring Boot

🔑 오늘 배운 핵심 3줄 요약

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

👉 왜 이걸 배워야 하지?

📚 개념 정리

⚙️ 구현 흐름 및 코드

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

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

📄 src/main/resources/templates/list.html (상세 링크 예시)

📌 사용된 개념 요약

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

✍️ 개인 정리 및 회고

🛒 상품 추가기능 2 & Navbar 만들기

📄 상세페이지 만들기 2 & 예외처리 (Thymeleaf, @PathVariable, Optional, error.html)

0개의 댓글

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

📄 `src/main/resources/templates/detail.html`

📄 `src/main/resources/templates/list.html` (상세 링크 예시)