https://youtu.be/Nf6pwESESzg?si=9xDEb9-2MmTnlP7F

스프링 부트 CKEditor 12 - 글목록 조회 코드 작성

스프링 부트 CKEditor 12 - 글목록 조회 코드 작성

Spring Boot + CKEditor 12 : 게시글 목록 조회 (Service → Controller → View)

이번 글에서는 CKEditor로 저장된 게시글을 목록 형태로 조회해서 화면에 출력하는 기능을 구현한다.

여기서 중요한 건 단순 조회가 아니다.

“DB → Service → Controller → View 흐름을 완성하는 것”

1. 전체 흐름 이해

목록 조회는 아래 흐름으로 동작한다.

```text id=”x7f3k2” DB → Repository → Service → Controller → View

👉 이전 저장 기능과 반대 방향이다.

---

## 2. Repository 역할 (이미 준비됨)

우리는 이미 Repository를 만들어 두었다.

```java id="3b2d9k"
public interface ContentRepository extends JpaRepository<ContentEntity, Long> {
}

핵심 메소드

```java id=”m92d6a” findAll()

👉 의미:

* DB의 모든 데이터를 가져온다
* List 형태로 반환

---

## 3. Service 계층 구현

이제 Service에서 조회 메소드를 만든다.

---

### Service 코드

```java id="d1z9x4"
import java.util.List;

public List<ContentEntity> selectContents() {
    return contentRepository.findAll();
}

핵심 포인트

반환 타입: List<ContentEntity>
역할: DB 조회 위임

👉 Service를 쓰는 이유:

Controller에서 DB 로직을 직접 쓰지 않기 위해

4. Controller에서 데이터 받기

이제 Controller에서 Service를 호출한다.

Controller 코드

```java id=”k8q4p1” 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의 역할 (중요)

```java id=”w9x2mc” model.addAttribute(“contentList”, contents);

---

👉 의미:

```text id="c2l9zn"
Controller → View 데이터 전달

👉 key-value 구조

```text id=”f4u7y0” “contentList” → contents

---

## 6. View (Thymeleaf)에서 출력

이제 HTML에서 데이터를 출력한다.

---

### 기본 출력

```html id="g3n5pz"
<div th:each="content : ${contentList}">
    <p th:text="${content.title}"></p>
</div>

설명

```text id=”j2n8fs” contentList → 리스트 content → 각 요소

---

👉 반복문 구조

```text id="v7h2kj"
for (content in contentList)

7. 화면 개선 (가독성)

줄바꿈 추가

```html id=”r2y4pk”

---

👉 결과:

* 게시글 하나씩 출력
* 가독성 향상

---

## 8. 상세 페이지 링크 연결

이제 각 게시글에 링크를 추가한다.

---

### 코드

```html id="y8n3kq"
<div th:each="content : ${contentList}">
    <a th:href="@{/content/{id}(id=${content.id})}">
        <span th:text="${content.title}"></span>
    </a>
    <br>
</div>

핵심 포인트

```html id=”c5j9re” @{/content/{id}(id=${content.id})}

---

👉 의미:

```text id="t6g8wz"
/content/1
/content/2
/content/3

👉 동적 URL 생성

9. 실행 결과

DB 상태

```text id=”k4n8oz” 1 | 제목1 | 내용1 2 | 제목2 | 내용2

---

### 화면 출력

```text id="y2c6nd"
제목1
제목2

👉 정상 조회 성공

10. 구조를 다시 보면

```text id=”m9x4va” Controller → Service → Repository → DB ↓ View 출력

---

👉 이 구조가 유지보수의 핵심이다.

---

## 11. 실무 관점에서 중요한 포인트

---

### 1. Service 분리 이유

❌ Controller에서 직접 DB 조회

```java id="p2j7nx"
contentRepository.findAll();

✅ Service 사용

java id="c8v3hk" 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} 처리

스프링 부트 CKEditor