[SSAFYcial] 신한 해커톤 React Editor 적용기

안녕하세요 ! 싸피셜 11기 이지혜 기자입니다.

 

이번 기사는 React 프로그램에 Editor를 적용하는 과정에 대해서 담아보려고 합니다.

 

❔ Editor를 왜 사용하게 됐나요 ?

정말 감사하게도, 이번에 신한은행에서 SSAFY 재학생들을 대상으로 진행하는 신한 해커톤 참여자로 선정되어 참여하게 됐습니다.

 

2024 신한 해커톤

 

이번 해커톤에서 저희 프로젝트의 주제상 글 작성 시에 다양한 내용 처리가 필요했고, 이를 이유로 React에서 위지윅 Editor가 필요하다고 판단하였습니다.

 

💁‍♀️ 어떤 Editor를 채택했고, 그 이유가 뭔가요 ?

 

우선적으로 말씀드리면, 제가 채택한 Editor는 React Quill입니다.

 

에디터 선택 시에 제가 고려한 점들은 다음과 같습니다.

1. 멀티 이미지를 지원할 것

2. react 18을 지원할 것

 

이 두가지가 필수적으로 지원되면서, PWA 앱 특성에 맞게 무겁지 않은 가벼운 에디터를 찾고자 하였습니다.

---

📌 Editor 선정 과정

 

가장 처음 고려한 에디터는 CK Editor5입니다.

CK Editor - Classic Editor

 

CK Editor5의 경우, 깔끔하고 직관적인 UI를 제공하고 이미지 리사이징이 가능하다는 점에서 뛰어난 UX를 제공할 수 있을 것이라고 생각하였습니다. 이러한 이유로, CK Editor의 적용 방법을 알아보던 중 다중 이미지 처리나 고급 이미지 관리 기능을 도입할 시에는 상용 라이선스를 도입해야 한다는 것을 알게 되었습니다.

 

또한, 모바일 앱으로 간단한 조작만 지원하면 되는 저희 서비스에 비해 CK Editor는 다양한 기능을 제공하는 만큼, 무겁고 로딩 시간이 더 길어질 수 있다는 단점 역시 CK Editor를 포기하게 되는 이유 중 하나였습니다.

 

두번째로 고려한 것은 Toast UI입니다.

 

Toast UI 역시 잘 알려진 에디터로, CK Editor와 달리 MIT 라이선스를 따르기 때문에 추후 상업적 사용을 하게 되더라도 문제가 없다는 점이 마음에 들었습니다.

 

하지만, 실제로 Toast UI의 경우 React 18 버전과 아직 호환되지 않는 문제가 있었고 실제로 프로젝트에 적용해본 결과 버전 문제로 인한 충돌이 발생하였습니다. 

 

@toast-ui/react-editor 버전 3.2.3은 react 17.x.x 버전과 호환되도록 설정되어 있지만, 프로젝트에서 react 18.x.x를 사용하고 있기 때문에 충돌이 발생

 

'--legacy-peer-deps' 플래그를 사용하면 npm이 동시대 이전의 의존성 트리를 무시하고 설치를 시도한다는 일시적인 해결 방안이 있었지만, 이 방법으로 충돌이 발생하는 패키지를 무시하고 설치를 진행할 경우, 추후에 문제가 발생할 가능성을 배제할 수 없습니다.

이러한 시도 끝에, 저희는 React-Quill 에디터를 채택하게 되었습니다.

 

하지만 react-quill 적용 역시 쉽지만은 않았는데요, 에디터를 적용시키자 아래와 같은 경고 메세지를 마주치게 된겁니다.

 

Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

 

이러한 에러메세지에 대해 알아보았더니, 에러가 발생하는 원인을 아래와 같이 정리할 수 있었습니다.

 

---

findDOMNode : React에서 DOM 요소에 직접 접근하기 위해 사용되는 메서드

- React 16.3 이후로, 이 메서드는 점차 폐기될 예정이며, 그 대신 ref를 사용하여 요소에 접근하는 방식이 권장

 

그러나 React Quill 자체는 사용자가 직접 수정할 수 없는 서드파티 라이브러리이기 때문에,

이 문제를 해결하려면 React Quill의 업스트림 업데이트를 기다려야 함

---

 

😥😥😥...

 

하지만, 포기할 수 없다. 이 문제를 해결하기 위해 찾아보던 중 아래와 같은 주소를 찾았고, 해당 페이지에서 마지막 유저분께서 알려주신 대로, react-quill-new를 적용해보았더니 원하는 에디터가 잘 생성된 것을 볼 수 있었습니다 !!

 

https://github.com/zenoamaro/react-quill/issues/972

React 19 will remove findDOMNode · Issue #972 · zenoamaro/react-quill

 

좋은 기회를 얻은 만큼 최선을 다해서 좋은 결과 얻어보도록 하겠습니다 :)

오늘 기사도 읽어주셔서 갑사합니다 🤍🤍