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

EthAnalog·2025년 8월 20일

@PathVariable Backend Java Sprung Boot Thymeleaf errorhandling optional

Spring Boot

목록 보기

14/16

🔑 오늘 배운 핵심 3줄 요약

@GetMapping("/detail/{id}") + @PathVariable로 URL의 id를 받아 단건 상세 처리
itemRepository.findById(id)는 Optional → 부재 시 리다이렉트/404로 안전 처리
스프링 + 타임리프는 templates/error.html만 둬도 기본 에러 페이지 커스텀 가능

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

/detail/{id}로 들어온 요청별로 각 상품의 상세 화면 렌더링
목록(list)에서 상품명 클릭 → 상세로 이동 링크 생성
잘못된 입력/데이터 없음/서버 에러 등 예외 상황 처리

👉 왜 이걸 배워야 하지?

실무 표준 흐름: 목록 → 상세(1건) + 철저한 예외 처리
URL 파라미터 처리/Optional 사용/에러 페이지 커스텀은 면접 단골 + 실무 필수

📚 개념 정리

개념	설명
`@PathVariable`	`/detail/{id}` 경로 변수 값을 메서드 인자로 바인딩
`Optional<T>`	값 부재 가능성 표현(NPE 방지). `isPresent`, `orElseThrow` 등 제공
`Model`	컨트롤러 → 템플릿으로 데이터 전달 컨테이너
`th:href`, `@{}`	타임리프에서 안전한 URL 생성
`error.html`	`templates/error.html`이 존재하면 스프링이 에러 시 이 뷰를 렌더

⚙️ 구현 흐름 및 코드

1) 상세 컨트롤러: URL 파라미터 + Optional + Model

📄 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.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

@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 optional = itemRepository.findById(id); // Optional<Item>
        if (optional.isPresent()) {
            model.addAttribute("data", optional.get());
            return "detail"; // templates/detail.html
        } else {
            return "redirect:/list"; // or return "error/404" 등
        }
    }
}

{id} 경로의 숫자를 @PathVariable Long id로 받음
findById(id) 결과가 없을 수 있으므로 Optional 안전 처리
model.addAttribute("data", ...) → 뷰에서 ${data.*}로 접근

2) detail.html: 모델 데이터 바인딩

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

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title th:text="${data.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="${data.title}">상품명</h4>
    <p th:text="${#numbers.formatInteger(data.price, 0, 'COMMA') + '원'}">가격</p>
  </div>
</body>
</html>

${data.title}, ${data.price} 등으로 컨트롤러에서 넘긴 값 출력
th:replace로 공통 Navbar 삽입

3) 목록에서 상세로 링크 만들기

📄 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>
  <div class="card" th:each="i : ${items}">
    <img src="https://placehold.co/300">
    <h4 th:text="${i.title}">상품명</h4>

    <!-- 방법 1: 문자열 연결 -->
    <a th:href="@{'/detail/' + ${i.id}}">상세보기</a>

    <!-- 방법 2: 템플릿 리터럴 스타일(가독성 ↑) -->
    <!-- <a th:href="@{|/detail/${i.id}|}">상세보기</a> -->

    <p th:text="${#numbers.formatInteger(i.price, 0, 'COMMA') + '원'}">가격</p>
  </div>
</body>
</html>

모든 카드가 /detail/1로 가는 실수를 방지 → 상품별 id로 링크 생성
@{} 구문은 컨텍스트 루트까지 고려해 안전한 URL 생성

4) 예외 상황 처리 (입력 오류/데이터 없음/서버 에러)

(A) 잘못된 경로 변수 타입(예: `/detail/abc`)

abc를 Long으로 변환하지 못해 400/500 에러 발생 가능
스프링은 기본 에러 페이지를 보여주지만, 사용성을 위해 커스텀 에러 페이지 제공이 바람직

(B) 존재하지 않는 id(예: `/detail/9999`)

findById 결과가 비어있음 → 리다이렉트 or 404 페이지 렌더

(C) 서버 에러(예: DB 다운, 제약조건 위반)

내부 예외 발생 → 에러 페이지로 포워딩

5) 기본 에러 페이지 커스텀(error.html)

📄 src/main/resources/templates/error.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>

  <h2>문제가 발생했습니다.</h2>
  <p th:text="'Status: ' + ${status}"></p>
  <p th:text="'Error: ' + ${error}"></p>
  <p th:text="'Path: ' + ${path}"></p>
  <p th:text="${message}"></p>
  <!-- 운영 환경에선 exception 노출은 지양 -->
</body>
</html>

타임리프 사용 시, templates/error.html이 존재하면 에러 시 자동 렌더
기본 제공되는 ${status}, ${error}, ${path}, ${message} 변수 활용
운영 환경에서는 상세 예외 메시지를 사용자에게 노출하지 않기

확장: 상황별 페이지를 분리하고 싶다면 templates/error/404.html, templates/error/500.html을 추가하면 상태 코드에 맞춰 자동 매핑됨.

📌 사용된 개념 요약

키워드	한 줄 요약
`@PathVariable`	경로 변수로 상세 라우팅
`Optional`	값 부재 안전 처리 컨테이너
`Model`	템플릿에 데이터 전달
`th:href` `@{}`	안전한 링크 생성
`error.html`	스프링 + 타임리프 기본 에러 페이지 커스텀

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

상품/게시글/공지/주문 상세 화면
404/500 등 상태별 에러 페이지 커스텀
목록 → 상세 → 수정/삭제의 표준 플로우 안정화

✍️ 개인 정리 및 회고

상세 페이지는 URL 파라미터로 유연하게 처리하는 게 정석.
Optional로 없음을 먼저 설계하면 예외가 단순해진다.
에러 페이지를 깔끔히 커스텀하면 사용자 경험이 눈에 띄게 좋아진다.

EthAnalog

이전 포스트

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

다음 포스트

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

Spring Boot

🔑 오늘 배운 핵심 3줄 요약

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

👉 왜 이걸 배워야 하지?

📚 개념 정리

⚙️ 구현 흐름 및 코드

1) 상세 컨트롤러: URL 파라미터 + Optional + Model

2) detail.html: 모델 데이터 바인딩

3) 목록에서 상세로 링크 만들기

4) 예외 상황 처리 (입력 오류/데이터 없음/서버 에러)

(A) 잘못된 경로 변수 타입(예: `/detail/abc`)

(B) 존재하지 않는 id(예: `/detail/9999`)

(C) 서버 에러(예: DB 다운, 제약조건 위반)

5) 기본 에러 페이지 커스텀(error.html)

📌 사용된 개념 요약

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

✍️ 개인 정리 및 회고

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

🚨 REST API 예외처리 정리

0개의 댓글

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

Spring Boot

🔑 오늘 배운 핵심 3줄 요약

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

👉 왜 이걸 배워야 하지?

📚 개념 정리

⚙️ 구현 흐름 및 코드

1) 상세 컨트롤러: URL 파라미터 + Optional + Model

2) detail.html: 모델 데이터 바인딩

3) 목록에서 상세로 링크 만들기

4) 예외 상황 처리 (입력 오류/데이터 없음/서버 에러)

(A) 잘못된 경로 변수 타입(예: /detail/abc)

(B) 존재하지 않는 id(예: /detail/9999)

(C) 서버 에러(예: DB 다운, 제약조건 위반)

5) 기본 에러 페이지 커스텀(error.html)

📌 사용된 개념 요약

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

✍️ 개인 정리 및 회고

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

🚨 REST API 예외처리 정리

0개의 댓글

(A) 잘못된 경로 변수 타입(예: `/detail/abc`)

(B) 존재하지 않는 id(예: `/detail/9999`)