https://youtu.be/9qABD8mf1w8?si=eH03gFWyorl5HCqq

스프링 부트 CKEditor 16 - 이미지 업로드 (프론트 엔드)

스프링 부트 CKEditor 16 - 이미지 업로드 (프론트 엔드)

Spring Boot + CKEditor 5 : 이미지 업로드 프론트엔드 설정하기

이번 글에서는 CKEditor 5에서 이미지 업로드 기능을 사용하기 위한 프론트엔드 설정을 구현한다.

이번 단계는 아직 실제 업로드가 완료되는 것은 아니다.

현재 단계의 목표는:

CKEditor가 선택한 이미지를 Spring Boot 서버로 전송할 수 있도록 만드는 것

이다.

1. 이미지 업로드 전체 구조 이해

CKEditor 이미지 업로드는 단순 기능처럼 보이지만 실제로는 다음과 같은 흐름으로 동작한다.

사용자 이미지 선택
   ↓
CKEditor
   ↓
JavaScript 업로드 요청
   ↓
Spring Boot Controller
   ↓
Service
   ↓
S3 업로드
   ↓
이미지 URL 반환
   ↓
CKEditor 화면 삽입

2. 이번 단계에서 하는 일

이번 글에서는 아래 부분만 구현한다.

CKEditor
   ↓
Spring Boot Controller

즉:

이미지를 선택하면
특정 URL로 업로드 요청 보내기

까지 구현한다.

3. CKEditor 이미지 업로드 핵심 원리

CKEditor는 단순 textarea 에디터가 아니다.

이미지를 업로드하려면:

업로드 어댑터(Adapter)

가 필요하다.

4. CKFinder Upload Adapter 플러그인

CKEditor 5에서 가장 많이 사용하는 업로드 플러그인은:

CKFinder Upload Adapter

이다.

5. CDN 방식 vs 다운로드 방식 차이

1) CDN 방식

이미 기본 플러그인이 포함된 경우가 많다.

즉:

<script src="https://cdn.ckeditor.com/..."></script>

만으로도 업로드 기능 사용 가능

2) 다운로드 방식

직접 커스텀 빌드를 했다면:

CKFinder Upload Adapter

플러그인을 반드시 추가해야 한다.

6. 다운로드 방식에서 플러그인 추가하기

CKEditor Custom Build 페이지에서:

추가해야 하는 플러그인

CKFinder Upload Adapter

주의사항

이전 강의에서:

CKBox 제거

하면서 같이 삭제될 수 있다.

👉 반드시 다시 추가해야 한다.

7. CKEditor 이미지 업로드 설정 코드

이제 핵심 JavaScript 설정을 작성한다.

8. editor.html 수정

<script>
ClassicEditor
    .create(document.querySelector('#content'), {

        language: "ko",

        ckfinder: {
            uploadUrl: '/image-upload',
            withCredentials: true
        }

    })
    .catch(error => {
        console.error(error);
    });
</script>

9. 핵심 설정 분석

1) ckfinder

ckfinder: {

CKEditor 업로드 어댑터 활성화

2) uploadUrl

uploadUrl: '/image-upload'

이미지 업로드 요청을 보낼 서버 주소

즉:

이미지 선택
↓
POST /image-upload

요청 발생

3) withCredentials

withCredentials: true

쿠키 / 인증 정보 포함

실무에서는:

JWT
Session
인증 처리

시 중요

10. 현재 단계에서 실제로 일어나는 일

현재 상태에서는:

이미지 선택 가능

하지만:

실제 업로드 실패

한다.

왜 실패할까?

아직 Spring Boot 서버에:

/image-upload

를 처리하는 Controller가 없기 때문이다.

즉 현재는:

프론트엔드만 구현 완료

상태

11. 브라우저에서 확인되는 현상

이미지 선택 시:

파일을 업로드할 수 없습니다.

메시지가 뜬다.

이건 정상이다.

왜냐하면:

백엔드 업로드 API 미구현

상태이기 때문이다.

12. 이미지 업로드가 실제로 되려면 필요한 것

현재 이후 단계는 다음과 같다.

STEP 1

Spring Boot Controller 작성

/image-upload

요청 받기

STEP 2

MultipartFile 받기

MultipartFile file

STEP 3

S3 업로드

STEP 4

업로드 URL 반환

{
  "url": "https://s3..."
}

STEP 5

CKEditor가 이미지 자동 삽입

13. 왜 uploadUrl만 설정하면 될까?

CKEditor 내부에는:

파일 업로드 로직

이 이미 구현되어 있다.

우리가 하는 일은:

업로드 API 주소 지정

뿐이다.

즉:

uploadUrl: '/image-upload'

한 줄이 핵심이다.

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

문제점 1 : 파일 검증 없음

현재는:

모든 파일 업로드 가능

상태

실무에서는 반드시:

확장자 제한
MIME TYPE 검사
용량 제한

필요

문제점 2 : 인증 없음

현재:

누구나 업로드 가능