스프링 부트 CKEditor
스프링 부트 CKEditor 12 - 글목록 조회 코드 작성
카테고리 : 개발자 유미
https://youtu.be/Nf6pwESESzg?si=9xDEb9-2MmTnlP7F
스프링 부트 CKEditor 12 - 글목록 조회 코드 작성
- 스프링 부트 CKEditor 12 - 글목록 조회 코드 작성
Spring Boot + CKEditor 12 : 게시글 목록 조회 (Service → Controller → View)
이번 글에서는 CKEditor로 저장된 게시글을 목록 형태로 조회해서 화면에 출력하는 기능을 구현한다.
여기서 중요한 건 단순 조회가 아니다.
“DB → Service → Controller → View 흐름을 완성하는 것”
1. 전체 흐름 이해
목록 조회는 아래 흐름으로 동작한다.
DB → Repository → Service → Controller → View
👉 이전 저장 기능과 반대 방향이다.
2. Repository 역할 (이미 준비됨)
우리는 이미 Repository를 만들어 두었다.
public interface ContentRepository extends JpaRepository<ContentEntity, Long> {
}
핵심 메소드
findAll()
👉 의미:
- DB의 모든 데이터를 가져온다
- List 형태로 반환
3. Service 계층 구현
이제 Service에서 조회 메소드를 만든다.
Service 코드
import java.util.List;
public List<ContentEntity> selectContents() {
return contentRepository.findAll();
}
핵심 포인트
- 반환 타입:
List<ContentEntity> - 역할: DB 조회 위임
👉 Service를 쓰는 이유:
Controller에서 DB 로직을 직접 쓰지 않기 위해
4. Controller에서 데이터 받기
이제 Controller에서 Service를 호출한다.
Controller 코드
import org.springframework.ui.Model;
@GetMapping("/list")
public String list(Model model) {
List<ContentEntity> contents = contentsService.selectContents();
model.addAttribute("contentList", contents);
return "list";
}
5. Model의 역할 (중요)
model.addAttribute("contentList", contents);
👉 의미:
Controller → View 데이터 전달
👉 key-value 구조
"contentList" → contents
6. View (Thymeleaf)에서 출력
이제 HTML에서 데이터를 출력한다.
기본 출력
<div th:each="content : ${contentList}">
<p th:text="${content.title}"></p>
</div>
설명
contentList → 리스트
content → 각 요소
👉 반복문 구조
for (content in contentList)
7. 화면 개선 (가독성)
줄바꿈 추가
<div th:each="content : ${contentList}">
<p th:text="${content.title}"></p>
<br>
</div>
👉 결과:
- 게시글 하나씩 출력
- 가독성 향상
8. 상세 페이지 링크 연결
이제 각 게시글에 링크를 추가한다.
코드
<div th:each="content : ${contentList}">
<a th:href="@{/content/{id}(id=${content.id})}">
<span th:text="${content.title}"></span>
</a>
<br>
</div>
핵심 포인트
@{/content/{id}(id=${content.id})}
👉 의미:
/content/1
/content/2
/content/3
👉 동적 URL 생성
9. 실행 결과
DB 상태
1 | 제목1 | 내용1
2 | 제목2 | 내용2
화면 출력
제목1
제목2
👉 정상 조회 성공
10. 구조를 다시 보면
Controller → Service → Repository → DB
↓
View 출력
👉 이 구조가 유지보수의 핵심이다.
11. 실무 관점에서 중요한 포인트
1. Service 분리 이유
❌ Controller에서 직접 DB 조회
contentRepository.findAll();
✅ Service 사용
contentsService.selectContents();
👉 이유:
- 코드 재사용 가능
- 유지보수 쉬움
- 테스트 용이
2. Model 사용 이유
👉 View와 데이터 연결
3. Entity 그대로 View에 넘기는 문제
👉 실무에서는:
- DTO로 변환해서 전달
12. 지금 단계에서 중요한 것
이 단계는 단순 조회가 아니다.
핵심 이해 포인트
- 계층 구조 유지
- DB → View 흐름 이해
- 템플릿 엔진 사용법
13. 다음 단계
이제 CRUD 거의 완성이다.
다음 작업
- 게시글 상세 조회
- 수정 기능
- 삭제 기능
정리
이번 글의 핵심은 한 줄이다.
조회는 “Service에서 가져와 Controller를 통해 View로 전달”하는 흐름이다
핵심 요약
- Repository.findAll() 사용
- Service에서 메소드 정의
- Controller에서 Model로 전달
- Thymeleaf로 반복 출력
다음 글 흐름
- 게시글 상세 페이지 구현
- /content/{id} 처리
