작심삼일 개발이야기

SunEditor를 사용해서 공지사항 WYSIWYG 기능을 구현하고 있었고, 이미지 업로드 리팩토링이 필요해서 정리해 두면 좋을 것 같았다. Editor를 사용해서 글을 작성하면 HTML로 이루어진 코드를 확인할 수 있다. 글 작성과 함께 추가한 이미지는 base64로 인코딩 되어 HTML코드에 입력된다. 인코딩 된 base64 데이터는 이미지의 품질을 떨어뜨리고 데이터 크기를 늘어나게 하는 단점이 있어서 추가한 이미지는 S3로 업로드하고 업로드된 주소를 HTML코드의 img 태그 src속성에 치환하여 저장했다. 기존 로직 Editor에 글, 이미지 작성(HTML 코드로 작성됨) 이미지 추가 -> 글과 별개로 상태 값에 File 객체 추가 (상태값 2개 관리) 이미지 추가, 수정 될 때마다 File 객체..

🔍 해당 라이브러리를 선택한 이유 1. 글 좌우 정렬 2. 폰트 변경 3. 이미지 첨부 4. 텍스트 컬러 변경 위 4가지가 필요한 기능이었다. 많이 사용한다고 들었던 TOAST UI Editor를 사용하려 했으나 1번 요구사항이 만족하지 못해 다른 editor를 찾아보게 되었다. 여러 에디터가 존재했지만 해당 sundeditor는 위의 모든 요구사항을 충족하고, issue를 등록하면 빠르게 대답해주어서 맘에 들었다. 🔍 설치 및 버전 $ npm install --save suneditor suneditor-react "suneditor": "^2.44.3", "suneditor-react": "^3.4.1", 🔍 초기 렌더링 import React, { useRef } from "react"; impor..