팀 프로젝트 - 게시판 기능 (CKEditor 5)

BooKi·2022년 7월 12일

React 프로젝트 - 축구 팀 관리

프로젝트 - 축구 팀 관리

목록 보기

52/53

팀 프로젝트 - 게시판 기능 (CKEditor 5)

개발 방향

게시판 기능을 만들기 위해서 라이브러리를 찾아보았다

대부분의 사람들이 CK에디터를 사용하는것 처럼 보였고 우리도 그것을 사용하기로 하였다

CKEditor에 들어가면 리액트로 사용하는 법이 나와있는데 옛날

클래스 문법을 사용하고 있어서 구글에 검색해서 사용했다

구현

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

에디터를 설치를 했다

이후 본인이 넣고싶은 곳에 아래와 같이 넣으면 된다

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

                <CKEditor
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    onReady={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />

이렇게 사용하는것 까지는 너무 간단하게 적용을 시켰는데

이미지를 올리는 부분에서 계속해서 문제가 생겼다

찾아보니까 이미지 업로드를 하는 어댑터?라는게 필요했다

근데 이게 아무리 찾아봐도 뭔가 정확하게 이해가 되는 자료가 없다

어댑터를 만드는 코드들이 죄다 클래스이거나 옛날 문법이다

그리고 이미지를 올릴 때 그 자체로 에디터에 올리면 무거워서

이미지를 올리면 그 즉시 서버에 전송을 하고 서버에서 받아온 가벼운 파일?로 띄운다고 되어 있었다

그렇기 때문에 서버에 보내야 하는데 대부분의 어댑터를 만드는 자료들을 보면

fetch로 서버에 전송을 한다

하지만 나는 지금까지 axios를 사용했고 서버에 어떻게 연결시키는지는 나와있지도 않아서

이 부분에서 지금 애를 먹고있다

어찌어찌 해서 유튜브에서 영어로된 영상과 어떤 한국인이 자신의 블로그에 올려놓은 두개의 자료를

내 입맛대로 변경해서 사용을 했는데 이해되지 않는 사항들이 있다

import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import axios from "axios";

const Board = () => {
  const API = '/api/img'
  const API_URL = "/api/img";
  const uploadAdapter = (loader) => {
  //1번 return
    return{
      upload : () => {
        return ((resolve, reject) => {//new Promise를 지우니까 제대로 됨
          const body = new FormData()
          loader.file.then((file) => {
            body.append("uploadImg", file)
            axios.post('/api/img', body)
            .then((res) => console.log(res.data))
            .then((res) => resolve({default: `${API_URL}/${res.filename}`}))
            .catch((err) => reject(err))//에러발생함
          })
        })
      }
    }
//2번 return
    // return {
    //   upload: () => {
    //     return new Promise((resolve, reject) => {
    //       const body = new FormData();
    //       loader.file.then((file) => {
    //         body.append("files", file);
    //         fetch(`${API_URL}`, {
    //           method: "post",
    //           body: body
    //         })
    //           .then((res) => res.json())
    //           // .then((res) => {
    //           //   resolve({
    //           //     default: `${API_URL}/${res.filename}`
    //           //   });
    //           // })
    //           .catch((err) => {
    //             reject(err);
    //           });
    //       });
    //     });
    //   }
    // }

  }
  //1번 업로더
  // const uploadPlugin = (editor) => {
  //   editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
  //     return uploadAdapter(loader);
  //   }
  // }
  //화살표 함수랑 익명함수랑 같은 내용인데 화살표 함수는 constructor 에러뜸
  
  //2번 업로더
  function uploadPlugin(editor) {
    editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
      return uploadAdapter(loader);
    };
  }
  return(
    <CKEditor className='editor'
    config={{
      extraPlugins: [uploadPlugin]
    }}
    data="<p>게시글을 작성해주세요</p>"
    editor={ClassicEditor}
    onReady={(editor) => {}}
    onBlur={(event, editor) => {}}
    onFocus={(event, editor) => {}}
    onChange={(event, editor) => {
      const data2 = editor.getData();
      // console.log(data2)
    }}
    />
  )
}
export default Board

우선 1번 return코드랑 2번 return코드랑 fetch, axios로 차이를 둬서 만들었다

근데 fetch는 자료가 서버로는 잘 넘어가는데 json으로 파싱하는 부분에서 에러가 났고

axios는 서버로 통신자체가 제대로 안됐다

500에러가 떳다

그래서 1번 return에서 new Promise를 지웠더니 500에러는 사라졌다

어떤 이유에서 그렇게 된건지는 파악하지 못했다

또한 1번 업로더와 2번 업로더는 함수를 정의하는 방법의 차이만 있다

화살표 함수로 처음에는 작성을 했었는데 계속 무슨 타입에러가 발생했다

그래서 혹시나 해서 블로그에 나와있는 익명함수를 사용했더니 타입에러가 발생하지 않았다

이것또한 이유를 발견하진 못했다

그리고 어찌저찌해서 에디터에 이미지가 올라오긴 하는데 뭔가 이게 제대로 된건지 뭐가 뭔지

아직 CKEditor에 대해서 정확히 파악하지 못하였다