https://youtu.be/I1x2MFfeVls?si=IYStxtOWH3jCFu7T

스프링 부트 CKEditor 4 - 컨트롤러, 뷰 기본 코드 작성

스프링 부트 CKEditor 4 - 컨트롤러, 뷰 기본 코드 작성

Spring Boot에서 CKEditor 4 사용을 위한 Controller & View 기본 구조 설계

이번 글에서는 Spring Boot 프로젝트에서 CKEditor 4를 사용하기 위한 가장 기본적인 구조, 즉 Controller와 View를 어떻게 설계하고 연결하는지를 단계적으로 정리한다.

핵심은 단순하다.

“요청 URL → Controller → View 반환” 구조를 먼저 완성하는 것

이 구조가 완성되어야 이후에

CKEditor 붙이기
DB 저장
이미지 업로드

같은 기능을 확장할 수 있다.

1. 전체 구조를 먼저 이해하기

CKEditor를 붙이기 전에 반드시 이해해야 할 흐름:

사용자 요청 → Controller → View(HTML) → 사용자 응답

지금 단계에서는 👉 데이터 저장보다 “페이지 이동 구조”가 더 중요하다

2. 필요한 URL 설계 (핵심 설계 포인트)

이번 프로젝트에서 필요한 기본 URL은 다음과 같다.

경로	역할
`/`	메인 페이지
`/editor`	글 작성 페이지 (CKEditor 위치)
`/save`	글 저장 (POST 요청)
`/list`	게시글 목록
`/content/{id}`	게시글 상세

왜 이렇게 나눌까?

이 구조는 거의 모든 게시판 시스템의 기본 구조다.

👉 중요한 포인트:

화면용 URL (GET)
데이터 처리용 URL (POST)

👉 역할을 명확히 분리

3. Controller 설계

이제 각 URL을 처리할 Controller를 만든다.

1) Controller 패키지 생성

src/main/java
 └─ controller

2) Controller 클래스 생성

예시:

MainController
EditorController
ListController
ContentController
SaveController

3) @Controller 어노테이션

@Controller
public class MainController {
}

👉 이 어노테이션이 있어야

Spring이 해당 클래스를 Bean으로 등록
요청을 처리할 수 있음

4. View (HTML) 생성

Controller가 반환할 화면을 만든다.

위치

src/main/resources/templates

생성할 파일

main.html
editor.html
list.html
content.html

기본 HTML 구조

<!DOCTYPE html>
<html>
<head>
    <title>Page</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

👉 이 단계에서는 디자인보다 👉 파일이 연결되는지 확인하는 것이 중요

5. Controller와 View 연결 (핵심)

이제 가장 중요한 단계다.

“URL 요청 → 어떤 HTML을 반환할 것인가”

@GetMapping 사용

1) 메인 페이지

@Controller
public class MainController {

    @GetMapping("/")
    public String main() {
        return "main";
    }
}

👉 / 요청 → main.html 반환

2) 에디터 페이지

@Controller
public class EditorController {

    @GetMapping("/editor")
    public String editor() {
        return "editor";
    }
}

3) 리스트 페이지

@Controller
public class ListController {

    @GetMapping("/list")
    public String list() {
        return "list";
    }
}

4) 상세 페이지 (기초 형태)

@Controller
public class ContentController {

    @GetMapping("/content")
    public String content() {
        return "content";
    }
}

👉 이후 DB 연동 시 /content/{id}로 확장

6. 왜 return “main”; 이렇게 쓰는 걸까?

return "main";

👉 의미:

templates/main.html 파일을 찾아서 렌더링

👉 확장자는 자동으로 붙는다.

7. 실행 및 테스트

이제 서버를 실행한다.

실행 후 확인

http://localhost:8080 → main 페이지
http://localhost:8080/editor → editor 페이지
http://localhost:8080/list → list 페이지

👉 정상 동작 기준:

페이지가 뜬다 = 성공
에러 없음 = 구조 정상

8. 자주 발생하는 문제

1) Whitelabel Error

원인:

View 파일 없음
이름 불일치

2) Template 인식 안됨

Mustache / Thymeleaf 의존성 확인 필요

3) URL 매핑 안됨

@GetMapping 경로 확인
Controller에 @Controller 빠짐

9. 현재 단계에서 중요한 것

지금 단계는 기능 구현이 아니다.

👉 목표:

URL 구조 이해
Controller 역할 이해
View 연결 이해

10. 다음 단계에서 할 것

이제 여기서 이어진다.

다음 작업

editor.html에 CKEditor 4 붙이기
입력 데이터 POST 요청 만들기
DB 저장 로직 연결
리스트 & 상세 페이지 데이터 출력

정리

이번 글의 핵심은 단 하나다.

Spring Boot에서 화면은 “Controller → View 매핑”으로 시작된다

핵심 요약

Controller는 요청을 받는다
View는 화면을 보여준다
@GetMapping으로 연결한다
return “파일명”으로 View 지정