[멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_96일차_"블로그 프로젝트의 에디터 도입"

🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁
TIL 회고 - [96]일차

🚀96일차에는 블로그 프로젝트를 개발하면서 필요했던 에디터 (Editor, 게시글을 작성할때 필요한 텍스트 박스 관련)에 대해 회고해보고자 한다. (2025.04.29)

---

❓블로그 프로젝트에서 에디터를 사용하는 이유

 

기존에는 input 태그(textarea)를 사용해 글을 입력받음

• 텍스트 꾸미기 (굵게, 기울임, 색상) 지원 안 됨
• 이미지 삽입 어려움
• 코드 블록, 표 삽입 불가
• ➡️이처럼 기본 input/textarea는 한계가 있음

✅전문적인 블로그 기능을 위해서는 "WYSIWYG 에디터" 도입 필요

• WYSIWYG: "What You See Is What You Get"
  ➡️작성하는 화면이 결과물과 똑같이 보이는 편집기
• 대표적인 라이브러리 종류
  - CKEditor
  - TinyMCE
  - Toast UI Editor 
  - Quill 등

 

작동 원리

프론트엔드	WYSIWYG 에디터(ex. CKEditor, TinyMCE)를 설치하고 게시글 작성 UI에 적용
백엔드	에디터가 생성한 HTML 포맷의 콘텐츠를 수신하여 데이터베이스에 저장
실행결과	사용자는 직관적인 에디터로 텍스트, 이미지, 표, 링크 등을 삽입 가능

 

---

CKEditor vs TinyMCE 차이점

	CKEditor	TinyMCE
라이선스	무료/유료 버전 모두 존재	오픈소스/유료 기능 별도 제공
배포 안정성	매우 안정적 (많은 사례)	추가 설정 필요할 수 있음
이미지 업로드	자체 플러그인 제공	플러그인 설치 필요
커스터마이징	유연함 (플러그인 다양)	고급 설정 시 약간 복잡할 수 있음

 

CKEditor 설치 및 연동 (Next.js)

• 패키지 설치

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

 

• 연동 방법 (Next.js 컴포넌트) >> components/MyEditor.tsx

import React, { useState } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const MyEditor = ({ onChange }: { onChange: (data: string) => void }) => {
  const [editorData, setEditorData] = useState('');

  return (
    <div>
      <CKEditoreditor={ClassicEditor}
        data={editorData}
        onChange={(event, editor) => {
          const data = editor.getData();
          setEditorData(data);
          onChange(data);
        }}
      />
    </div>
  );
};

export default MyEditor;

• import로 CKEditor를 사용할 수 있다.

 

• 게시글 작성 페이지

import React, { useState } from 'react';
import MyEditor from '@/components/MyEditor';

const PostCreatePage = () => {
  const [content, setContent] = useState('');

  const handleSubmit = () => {
    console.log('작성된 게시글 내용:', content);
    // 백엔드로 content 전송
  };

  return (
    <div>
      <h1>게시글 작성</h1>
      <MyEditor onChange={setContent} />
      <button onClick={handleSubmit}>제출</button>
    </div>
  );
};

export default PostCreatePage;

• MyEditor로 받아와서 필요한 form 부분에 사용할 수 있다.

---

CKEditor vs Toast UI Editor 차이점

• 마크다운 변환 필요시 Toast UI Editor 고려

	CKEditor	Toast UI Editor
렌더링 방식	HTML 기반 (WYSIWYG)	Markdown 기반 (WYSIWYG + Markdown 동시지원)
이미지 업로드	자체 플러그인, S3 연동 등 가능	커스터마이징 필요 (직접 핸들러 작성)
Next.js 호환성	SSR 미지원 → dynamic import 필요	SSR 잘 작동
사용 편의성	워드같은 편리한 UI	개발자 친화적 UI (양방향 모드)
출력 형태	HTML	Markdown + HTML

정리하자면

블로그 스타일 게시판, 다양한 사용자 대상 ➡️CKEditor
개발 블로그, 기술문서, 마크다운 중심 ➡️Toast UI Editor

 

Toast UI Editor 설치 및 연동 (Next.js)

npm install @toast-ui/react-editor

import { Editor } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css';

export default function MyToastEditor() {
  return (
    <EditorinitialValue="내용을 입력하세요"
      previewStyle="vertical"
      height="500px"
      initialEditType="markdown"
      useCommandShortcut={true}
    />
  );
}

• Next.js에서는 Toast UI가 설정과 SSR 대응 측면에서 더 편리

---

🚀회고 결과 :

회고를 통해 블로그 프로젝트의 게시글 작성 부분을 일반 input태그 등으로 처리하는 것이 아닌

외부 Editor를 설치하여서 사용하는 방법을 공부할 수 있었다.

각각의 Editor별로 스타일이 달라 기획하고자하는 서비스에 맞게 도입하는 것도 회고를 통해 알 수 있었다.