https://youtu.be/-5fC7HHUF6Q?si=niTgi-s5jAkBBjkb

스프링 부트 CKEditor 8 - 글작성 - DTO - 컨트롤러

스프링 부트 CKEditor 8 - 글작성 - DTO - 컨트롤러

Spring Boot + CKEditor 5 : 작성한 글을 Controller에서 DTO로 받기

이번 글에서는 CKEditor로 작성한 데이터를 Spring Boot 서버에서 실제로 받아오는 과정을 정리한다.

여기서부터는 단순 UI가 아니라 👉 “Frontend → Backend 데이터 흐름”이 시작된다.

핵심은 한 줄이다.

폼의 name 값과 DTO 변수명을 맞추면 Spring이 자동으로 데이터를 매핑해준다

1. 전체 데이터 흐름 이해

먼저 전체 흐름을 이해해야 한다.

사용자 입력 → Form → POST 요청 → Controller → DTO

조금 더 확장하면:

CKEditor → Form → Controller → Service → DB

👉 이번 글에서는 Controller까지 다룬다.

2. Form → 서버로 데이터 보내기

이미 작성한 HTML Form을 다시 보면:

<form action="/save" method="post">

    <input type="text" name="title">

    <textarea id="content" name="content"></textarea>

    <button type="submit">등록</button>

</form>

중요한 포인트

name="title"
name="content"

👉 이 name 값이 서버에서 변수명이 된다.

3. DTO 클래스 생성

이제 데이터를 받을 객체를 만든다.

1) DTO 패키지 생성

src/main/java
 └─ dto

2) DTO 클래스 생성

import lombok.Data;

@Data
public class SaveDTO {

    private String title;
    private String content;
}

핵심 포인트

👉 변수명 = form의 name 값

title ↔ name="title"
content ↔ name="content"

👉 이게 다르면 매핑 실패

Lombok 사용 이유

@Data

👉 자동 생성:

getter
setter
toString
생성자

👉 특히 중요한 건 setter

Spring은 setter를 통해 데이터를 넣는다

4. Controller에서 DTO 받기

이제 실제로 데이터를 받아보자.

Controller 작성

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class SaveController {

    @PostMapping("/save")
    public String save(SaveDTO dto) {

        System.out.println(dto.getTitle());
        System.out.println(dto.getContent());

        return "redirect:/";
    }
}

5. 동작 원리 (중요)

Spring 내부에서 일어나는 일:

1단계: 요청 수신

POST /save

2단계: 파라미터 분석

title=값
content=값

3단계: DTO 객체 생성

SaveDTO dto = new SaveDTO();

4단계: setter 호출

dto.setTitle("값");
dto.setContent("값");

👉 이 모든 과정이 자동으로 이루어진다.

6. 실행 및 테스트

1) 서버 실행

2) 에디터 페이지 이동

http://localhost:8080/editor

3) 데이터 입력

제목 입력
내용 작성 (CKEditor)

4) 등록 버튼 클릭

5) 결과 확인

콘솔 출력:

제목값
내용값 (HTML 형태)

👉 성공

7. CKEditor 데이터 특징

여기서 중요한 포인트 하나.

content 값 형태

<p>안녕하세요</p>
<strong>굵은 글씨</strong>

👉 HTML 문자열로 넘어온다

의미

단순 텍스트가 아님
HTML 구조 포함

👉 이후 단계에서:

DB 저장
HTML 렌더링

이 연결된다

8. 자주 하는 실수

1) name 불일치

name="content"

private String contents; ❌

👉 매핑 실패

2) setter 없음

👉 Lombok 없거나 setter 누락 시 오류

3) @PostMapping 경로 불일치

action="/save"

@PostMapping("/save")  // 반드시 동일

4) redirect 누락

👉 페이지 재요청 문제 발생 가능

9. 지금 단계에서 중요한 것

이 단계는 단순 데이터 수신이 아니다.

핵심 이해 포인트

HTTP 요청 → 객체 매핑
DTO = 데이터 전달 객체
Spring 자동 바인딩

정리

이번 글의 핵심은 한 줄이다.

Spring Boot는 Form 데이터를 DTO로 자동 변환해준다

핵심 요약

name 값 = DTO 변수명
DTO는 setter 필요
Controller에서 객체로 바로 받는다
CKEditor 데이터는 HTML 형태

스프링 부트 CKEditor