안녕하세요, 여러분의 든든한 백엔드 길잡이 데브프리입니다.
지난 3탄에서는 데이터베이스에 쌓여있는 글들을 꺼내어 웹 브라우저에 깔끔한 표(Table) 형태로 목록을 띄워주는 것까지 성공했습니다. 하지만 목록만 있고 글의 '내용'을 볼 수 없다면 반쪽짜리 게시판이겠죠?
오늘은 사용자가 목록에서 특정 '제목'을 클릭했을 때, 해당 게시글의 상세 내용(Content)을 보여주는 페이지를 만들어보겠습니다.
새로운 환경 설정이나 복잡한 라이브러리 추가는 전혀 없습니다! 우리가 이미 만들어둔 도구들을 활용해 가벼운 마음으로 코드를 연결해 보겠습니다. 바로 시작합니다!
👉 [이전 글 확인하기: 2026 스프링 부트 게시판 만들기 ③: 데이터 쫙 불러오기! 글 목록(List) 구현]
https://devlog-tech.tistory.com/entry/spring-boot-board-list-view-thymeleaf
2026 스프링 부트 게시판 만들기 ③: 데이터 쫙 불러오기! 글 목록(List) 구현
안녕하세요, 여러분의 든든한 백엔드 길잡이 데브프리입니다. 지난 시간에는 사용자가 입력한 데이터를 데이터베이스(DB) 창고에 안전하게 저장하는 '글쓰기 기능'을 완성했습니다. 다들 H2 콘솔
devlog-tech.tistory.com
1. boardlist.html 수정: 제목에 링크(URL) 달아주기
게시글의 상세 내용을 보려면, 우선 목록 화면에서 제목을 '클릭'할 수 있어야 합니다. 타임리프(Thymeleaf)의 링크 문법인 th:href를 사용하여 제목에 링크를 달아주겠습니다.
지난 시간에 만들었던 src > main > resources > templates > boardlist.html 파일을 열고, 제목을 출력하던 <td> 태그 부분을 아래와 같이 수정해 줍니다.
<td>
<a th:href="@{/board/view(id=${board.id})}" th:text="${board.title}">제목</a>
</td>
2. Controller 추가: 특정 ID의 데이터만 쏙 뽑아오기
이제 사용자가 제목을 클릭하면 /board/view?id=1 같은 주소로 컨트롤러에게 요청이 날아옵니다. 컨트롤러는 주소 뒤에 붙은 id 번호를 확인하고, 창고(DB)에서 그 번호에 해당하는 데이터만 쏙 뽑아서 화면에 넘겨주어야 합니다.
BoardController.java 파일을 열고, 아래 코드를 추가해 줍니다.
// --- (기존의 write, writepro, list 메서드 아래에 추가합니다) ---
// 4. 게시글 상세 내용을 보여주는 역할
@GetMapping("/board/view") // localhost:8080/board/view?id=1 형태로 들어옴
public String boardView(Model model, Long id) {
// boardRepository.findById(id).get() : 창고에서 id 번호에 해당하는 데이터를 하나 찾아옵니다. (.get()은 그 데이터를 열어서 꺼내겠다는 뜻입니다)
// 찾아온 데이터를 "board"라는 이름표를 붙여서 model 바구니에 담습니다.
model.addAttribute("board", boardRepository.findById(id).get());
return "boardview"; // templates 폴더 안의 boardview.html을 찾아가라는 뜻!
}
3. boardview.html 생성: 상세 내용 화면 만들기
마지막으로 컨트롤러가 넘겨준 "board" 바구니를 풀어서 화면에 예쁘게 그려줄 HTML 파일을 만듭니다.
- 좌측 탐색기에서 src > main > resources > templates 폴더를 우클릭합니다.
- [New] > [HTML File]을 클릭하고 파일 이름을 boardview.html로 만듭니다.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>게시글 상세 보기</title>
<style>
body { font-family: sans-serif; padding: 50px; }
.layout { width: 600px; margin: 0 auto; border: 1px solid #ddd; padding: 30px; border-radius: 8px; }
.title { font-size: 24px; font-weight: bold; margin-bottom: 10px; color: #333; }
.info { color: #888; font-size: 14px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.content { min-height: 200px; line-height: 1.6; white-space: pre-wrap; /* 줄바꿈을 유지해 줍니다 */ }
.btn { display: inline-block; margin-top: 30px; padding: 10px 20px; background-color: #00ED64; color: black; text-decoration: none; border-radius: 4px; font-weight: bold; }
</style>
</head>
<body>
<div class="layout">
<div class="title" th:text="${board.title}">여기에 제목이 들어갑니다</div>
<div class="info">글 번호: <span th:text="${board.id}">1</span></div>
<div class="content" th:text="${board.content}">여기에 내용이 들어갑니다</div>
<a href="/board/list" class="btn">목록으로 돌아가기</a>
</div>
</body>
</html>
4. 실행 및 결과 확인!
모든 조각이 맞춰졌습니다! 서버를 켜고 직접 화면을 넘나들며 테스트해 봅시다.
- 메인 클래스를 실행하여 서버를 켭니다.
- 브라우저를 열고 http://localhost:8080/board/list 에 접속합니다.
- 목록에 파란색 링크로 바뀐 제목들이 보일 것입니다. 그중 하나를 클릭합니다!
- 주소창이 http://localhost:8080/board/view?id=(글번호) 로 바뀌면서, 해당 글의 제목과 내용이 깔끔하게 표시되는 상세 페이지가 열리면 대성공입니다!
- 하단의 [목록으로 돌아가기] 버튼을 눌러 목록과 상세 페이지를 부드럽게 오가는지 확인해 보세요.
마무리
오늘은 타임리프의 링크 생성 문법(th:href)을 활용하여 파라미터(id)를 넘기고, 컨트롤러에서 findById를 통해 특정 데이터만 정확히 집어내어 화면에 뿌려주는 '상세 보기 기능'을 구현해 보았습니다.
새로운 환경 설정 에러 없이, 순수하게 데이터가 흘러가는 길을 코딩하는 과정이라 훨씬 재미있게 느껴지셨을 거라 생각합니다!
이제 이 게시판 시리즈의 대장정도 마지막 한 단계만을 남겨두고 있습니다. 다음 5탄에서는 잘못 쓴 글을 고치고 불필요한 글을 지우는 '수정 및 삭제(Update & Delete)' 기능을 추가하여 게시판 프로젝트를 완벽하게 마무리 지어보겠습니다.
오늘도 코딩하시느라 고생 많으셨습니다. 다음 완결 편에서 만나요! 데브프리였습니다.
'🛠️ IT 실전 가이드 (SW 도구)' 카테고리의 다른 글
| 프론트엔드 기다릴 필요 없어요! 백엔드 개발자 필수 도구 'Postman' 200% 활용법 (0) | 2026.07.03 |
|---|---|
| 2026 스프링 부트 게시판 만들기 ⑤: 드디어 완결! 게시글 수정 및 삭제 기능 (CRUD 완성) (0) | 2026.06.12 |
| 2026 스프링 부트 게시판 만들기 ③: 데이터 쫙 불러오기! 글 목록(List) 구현 (0) | 2026.06.10 |
| 2026 스프링 부트 게시판 만들기 ②: 글쓰기 기능 완성 (Lombok, Controller, Thymeleaf) (0) | 2026.06.09 |
| 2026 스프링 부트 게시판 만들기 ①: 가장 쉬운 DB 연결과 JPA 세팅 (H2 404 에러 완벽 해결) (0) | 2026.06.08 |
