[트러블슈팅] 글 작성 라이브러리(feat. react-draft-wysiwyg) 작동 안 하는 이슈

이번 프로젝트에서 글 작성을 해야하는 폼이 필요해서 라이브러리를 사용하기로 했다!

처음에는 Tiptab 라이브러리 사용하려고 했는데 이미지 처리에 어려움이 있어서 react-draft-wysiwyg로 결정하기로 했다.

먼저 둘의 공통점과 차이점을 보자

공통점은 둘 다 게시글 작성용 리치 에디터이다.

차이점은

react-draft-wysiwyg의 경우 간단하고 빠른데 커스터마이징에 한계가 있고
Tiptab의 경우 러닝커브가 높지만 커스터마이징이 가능하다

우리 프로젝트는 현재 간단한 글 작성과 이미지 삽입 기능이 핵심이기 때문에 react-draft-wysiwyg를 우선 선택! (향후 기능 확장이나 커스터마이징 요구가 커지면 Tiptap으로 전환하는 방안도 고려하고 있음)

일단 구현을 했는데 font + font 크기 + 이미지 등 기능이 작동을 안 하는 이슈가 발생했다🥺

일단 백엔드에서 이미지 처리 준비가 안되었다고 해서 빼뒀고 .. 폰트크기 수정만 가능하게 했다..!

일단 App.jsx에서 react-draft-wysiwyg.css를 import 해주었다.

import { BrowserRouter } from 'react-router-dom'
import AppRoutes from './routes/AppRoutes'
import PageScrollToTop from './components/common/PageScrollToTop'
import { useEffect } from 'react'
import useAuthStore from './store/login/useAuthStore'
import { ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css' //import 해주기

WriteEditor.jsx 기존 코드

import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'

const WriteEditor = ({ editorState, onEditorStateChange, placeholder }) => {
  return (
    <Editor
      editorState={editorState}
      onEditorStateChange={onEditorStateChange}
      placeholder={placeholder}
      wrapperClassName='demo-wrapper'
      editorClassName='demo-editor'
    />
  )
}

export default WriteEditor

기존 코드에서 폰트크기 선택이 가능하게 커스텀 해주었다.

import React from 'react'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'

const styleMap = {
  FONT_SIZE_8: { fontSize: '8px' },
  FONT_SIZE_10: { fontSize: '10px' },
  FONT_SIZE_12: { fontSize: '12px' },
  FONT_SIZE_14: { fontSize: '14px' },
  FONT_SIZE_16: { fontSize: '16px' },
  FONT_SIZE_18: { fontSize: '18px' },
  FONT_SIZE_24: { fontSize: '24px' },
  FONT_SIZE_30: { fontSize: '30px' },
  FONT_SIZE_36: { fontSize: '36px' },
}

const WriteEditor = ({ editorState, onEditorStateChange, placeholder }) => {
  return (
    <Editor
      editorState={editorState}
      onEditorStateChange={onEditorStateChange}
      placeholder={placeholder}
      wrapperClassName='demo-wrapper'
      editorClassName='demo-editor'
      customStyleMap={styleMap}
      toolbar={{
        options: ['inline', 'fontSize', 'list', 'textAlign', 'colorPicker', 'link', 'history'],
        fontSize: {
          options: [8, 10, 12, 14, 16, 18, 24, 30, 36],
        },
      }}
    />
  )
}

export default WriteEditor

근데 …!! 적용이 안되는 문제가 발생했다 🤦🏻‍♀️

코드에는 문제가 없어서.. 어떤게 문제일까 하는 마음에 엄청난 구글링 + AI 에게 도움을 받은 결과

StrictMode를 제거하라는 것을 확인했다.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import './styles/font.css'

createRoot(document.getElementById('root')).render(<App />)

제거 후

정상적으로 작동된다🥺

하지만 StrictMode 제거는 근본적인 문제 해결방법이 아니라서 왜 이런 문제가 발생했는 지에 대해 알아본 결과

react-draft-wysiwyg 문제점

유지보수가 안되고 있다😾
1. 오랜 기간 동안 업데이트가 없음
- npm에 최근 배포된 날짜가 오래되었고 새로운 기능 추가나 버그 수정이 거의 이루어지지 않고 있다.
1. 많은 미해결 이슈
- GitHub 저장소에 400개가 넘는 issue가 누적되어 있고 공식 데모 사이트에서도 동일한 버그가 반복적으로 발생하고 있지만 개발자가 이를 수정하지 않고 있다.
1. 커뮤니티의 피드백
- 사용자들이 제기한 버그(예: 엔터 입력 시 불필요한 <p></p> 태그 생성, 이미지 삽입 후 한글 입력 시 오류 등)가 장기간 방치되어 있고, 이에 대해 "아마 수정할 계획은 없는 것 같다"는 의견이 많다..
1. 대체 프로젝트 개발
- 기존 개발자가 새로운 에디터를 개발하고 있는 정황도 있어, 기존 프로젝트에 대한 관심이 줄어든 것으로 보인다..