안녕하세요, 여러분의 든든한 백엔드 길잡이 데브프리입니다.
지난 시간에는 사용자가 입력한 데이터를 데이터베이스(DB) 창고에 안전하게 저장하는 '글쓰기 기능'을 완성했습니다. 다들 H2 콘솔 창에서 데이터가 예쁘게 들어간 것을 확인하셨죠?
오늘은 창고에 쌓여있는 그 데이터들을 꺼내서, 웹 브라우저 화면에 표(Table) 형태로 깔끔하게 쫙 뿌려주는 '게시글 목록(List) 보기 기능'을 구현해 보겠습니다.
어려운 환경 설정은 1, 2탄에서 모두 끝났습니다. 오늘부터는 추가 설치나 복잡한 설정 없이 아주 매끄럽게 진행되니, 가벼운 마음으로 코드를 따라 쳐보세요!
👉 [이전 글 확인하기: 2026 스프링 부트 게시판 만들기 ②: 글쓰기 기능 완성]
https://devlog-tech.tistory.com/entry/spring-boot-board-write-controller-thymeleaf
2026 스프링 부트 게시판 만들기 ②: 글쓰기 기능 완성 (Lombok, Controller, Thymeleaf)
안녕하세요, 여러분의 든든한 백엔드 길잡이 데브프리입니다. 지난 시간에는 H2 데이터베이스를 연결하고 Board 엔티티를 만들어 데이터베이스에 게시판 테이블을 띄우는 것까지 성공했습니다.
devlog-tech.tistory.com
1. Controller 수정: DB에서 데이터 꺼내오기
사용자가 "게시판 목록 보여줘!"라고 요청하면, 컨트롤러는 DB에서 데이터들을 몽땅 꺼내온 뒤 HTML 화면으로 넘겨주어야 합니다.
이때 데이터를 담아서 화면으로 배달해 주는 바구니 역할을 하는 것이 바로 스프링의 Model입니다. 지난 시간에 만들었던 BoardController.java 파일을 열고, 아래 코드를 추가해 줍니다.
package com.데브프리.demo.controller;
import com.데브프리.demo.entity.Board;
import com.데브프리.demo.repository.BoardRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model; // ⭐️ Model 임포트 필수!
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class BoardController {
@Autowired
private BoardRepository boardRepository;
// --- (지난 시간에 작성한 글쓰기 코드 2개는 그대로 둡니다) ---
// 3. 게시글 목록을 보여주는 역할 (이번에 추가할 코드)
@GetMapping("/board/list")
public String boardList(Model model) {
// boardRepository.findAll() : DB에 있는 Board 테이블의 모든 데이터를 리스트 형태로 가져옵니다.
// 가져온 데이터를 "list"라는 이름표를 붙여서 model 바구니에 담습니다.
model.addAttribute("list", boardRepository.findAll());
return "boardlist"; // templates 폴더 안의 boardlist.html을 찾아가라는 뜻!
}
}
2. Thymeleaf HTML 생성: 반복문으로 목록 띄우기
이제 컨트롤러가 넘겨준 "list" 바구니를 받아서 화면에 그려줄 HTML 파일을 만들 차례입니다. 데이터가 10개든 100개든 일일이 HTML을 작성할 필요 없이, 타임리프의 반복문(th:each)을 사용하면 코드를 단 몇 줄로 끝낼 수 있습니다.
- 좌측 탐색기에서 src > main > resources > templates 폴더를 우클릭합니다.
- [New] > [HTML File]을 클릭하고 파일 이름을 boardlist.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: 800px; margin: 0 auto; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: center; }
th { background-color: #00ED64; color: black; }
.btn { display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #00ED64; color: black; text-decoration: none; border-radius: 4px; font-weight: bold; }
</style>
</head>
<body>
<div class="layout">
<h2>게시글 목록</h2>
<table>
<thead>
<tr>
<th>글번호</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr th:each="board : ${list}">
<td th:text="${board.id}">1</td>
<td th:text="${board.title}">여기에 제목이 들어갑니다</td>
</tr>
</tbody>
</table>
<a href="/board/write" class="btn">글쓰기</a>
</div>
</body>
</html>
3. 실행 및 결과 확인!
모든 준비가 끝났습니다. 이번에는 오류 화면 없이 아주 시원하게 데이터가 출력될 것입니다.
- 메인 클래스를 실행하여 서버를 켭니다.
- 브라우저를 열고 http://localhost:8080/board/list 에 접속합니다.
- 2탄에서 열심히 테스트하며 작성해 두었던 글들이 깔끔한 표(Table) 형태로 쫙 출력되는 것을 확인합니다.
- 아래쪽의 [글쓰기] 버튼을 눌러 새 글을 하나 더 작성해 보고, 다시 리스트 주소로 돌아와서 목록이 갱신되는지 직접 테스트해 보세요!
마무리
오늘은 컨트롤러의 Model 객체를 통해 DB의 데이터를 화면으로 전달하고, 타임리프의 강력한 반복문(th:each)을 이용해 깔끔한 게시판 목록을 완성해 보았습니다.
데이터베이스에서 데이터를 꺼내와 화면에 뿌려주는 이 과정은 실무에서 '조회(Read)' 파트의 가장 기초이자 핵심이 되는 로직입니다.
이제 게시판의 구색이 거의 다 갖춰졌네요! 다음 4탄에서는 목록에서 특정 제목을 클릭했을 때, 해당 글의 '내용'을 자세히 볼 수 있는 상세 보기 페이지를 만들어보겠습니다.
점점 완성되어 가는 게시판을 보며 코딩의 재미를 느끼셨길 바랍니다. 지금까지 데브프리였습니다. 감사합니다!
'🛠️ IT 실전 가이드 (SW 도구)' 카테고리의 다른 글
| 2026 스프링 부트 게시판 만들기 ⑤: 드디어 완결! 게시글 수정 및 삭제 기능 (CRUD 완성) (0) | 2026.06.12 |
|---|---|
| 2026 스프링 부트 게시판 만들기 ④: 내용이 궁금해! 게시글 상세 보기 기능 구현 (0) | 2026.06.11 |
| 2026 스프링 부트 게시판 만들기 ②: 글쓰기 기능 완성 (Lombok, Controller, Thymeleaf) (0) | 2026.06.09 |
| 2026 스프링 부트 게시판 만들기 ①: 가장 쉬운 DB 연결과 JPA 세팅 (H2 404 에러 완벽 해결) (0) | 2026.06.08 |
| 엑셀 VLOOKUP #N/A 오류, 딱 3가지만 확인하면 1분 만에 해결! (0) | 2026.06.06 |
