에디터를 도입하는 이유

제가 이 기능을 개발하는 이유는 충북대학교 각 단과대학, 학과 학생회 임원분들이 공지사항을 '카카오톡'으로 전달하는 것이 아닌 '충림이'를 통해 공지사항을 좀 더 효율적으로 올리기 위함이며 학생들 또한, 전달되는 공지사항들을 한 눈에 빠르고 쉽게 확인하기 위함.입니다. 또한, 기존 '카카오톡'방식은 어떤 공지사항이 어디에 있는지 학생들이 일일이 찾아봐야 한다는 단점이 있습니다. 그리하여 에디터 기능을 통해 공지사항을 사용자가 편리하게 올리도록 도입하게 되었습니다.

이 에디터들을 직접 사용해보지 않고 조사를 통해 결정하는 이유

시간 제약 때문입니다. 핑계이지만 누구나 그렇듯 저에게도 시간은 매우 중요합니다. 그리하여 구글링과 다른 사람들의 실제 사용기를 통해 각 오픈소스 에디터에서 발생되는 이슈를 중점으로 다뤄 그 이슈를 해결할 수 있을 만한 에디터를 사용하고자 합니다.

왜 오픈소스 에디터?

오픈소스 에디터를 사용하는 이유는 마찬가지로 시간 제약 때문입니다. 가능하면 라이브러리 사용을 지양하는 저는 에디터 또한 제가 직접 만들어보고 싶다는 생각을 계속 해왔습니다. 하지만 에디터를 직접 만드는 것은 시간이 많이 걸리기에 우선 많이 쓰이는 오픈소스 에디터를 사용해야 겠다고 생각했습니다. 시간을 핑계로 오픈소스 에디터를 결정한 저를 반성하고 꼭 완성하여 사용자의 편리성을 개선해야겠다는 다짐을 했습니다. 오늘의 집 에디터 개발기를 보며 나중에는 꼭 직접 에디터를 만들어 제가 지금도 사용하고 있는 velog를 만드신 velopert님처럼 저 또한 저만의 블로그 서비스를 만들고자 합니다.

어떤 오픈소스 에디터?

1. react-draft-wysiwyg 출처
가장 많이 알려진 오픈소스 에디터입니다. 페이스북에서 관리하는 에디터인 draft.js를 사용하기 쉽게 react로 구성한 것입니다.
하지만 치명적인 문제점이 있습니다.

• 한글 입력 시 바로바로 onChange가 되지 않아 글자를 작성하고 바로 shift + enter키를 입력할 때 상태값이 변하지 않아 꼬이는 현상이 발생합니다. 그에 따라, 기존에 작성중이던 글자들이 삭제되는 현상이 발생합니다.
• 이미지 등록 시 발생하는 Unknown DraftEntity key: null.에러가 발생하는데, 이 문제도 이미지를 등록 후 한글로 작성 시에 생기는 오류인 것 같다는 생각입니다.

하지만 react-draft-wysiwyg을 사용한다면 유저들이 분명히 불편함을 느낄 것이라고 생각합니다. 물론 이러한 문제점을 해결하기 위해서는 직접 만드는 것이 가장 좋다고 생각합니다..

2. react-quill 참고자료
draft와 함께 에디터의 양대산맥을 이루는 오픈소스 에디터입니다.
마찬가지로 이슈가 있습니다. 이미지를 업로드하게 되면 <img src='엄청나게 긴 base64 문자열=이미지'/>과 같이 엄청나게 긴 문자열이 생깁니다. 이 링크를 통해 직접 이미지를 업로드해보시면 알 수 있습니다. 따라서 따로 처리를 해줘야 한다는 이슈가 있습니다. 하지만 위 react-draft-wysiwyg에 비해 해결할 수 있는 이슈라고 생각했고 react-quill을 도입하기로 결정했습니다.

3. Toast UI Editor
NHN에서 개발한 국내 유일의 Github 1만 스타를 달성한 에디터입니다. 하지만 wysiwyg에디터보다 UI에디터라는 말이 맞게끔 마크업 언어로 작성한 것들을 태그화해서 표시해주는 에디터입니다.

게시판에 글을 쓰는 것보다는 홈페이지의 페이지를 에디터로 작성한다는 느낌입니다. 즉, 글을 쓰는 것이 아니라 페이지를 만드는 느낌입니다. 따라서 일반 사용자가 사용하기엔 부적합하며 마크업언어를 어느정도 숙지할 수 있는 개발자의 관점에서 좋은 에디터라고 생각합니다.

마지막으로

제가 react-quill로 오픈소스 라이브러리를 결정한 이유는 위와 같습니다. 사용자의 편리성을 위해 꼭 좋은 에디터를 완성하겠다는 다짐을 하며 글을 마칩니다. 이후 개발을 하며 생긴 이슈와 해결 방법은 차후 포스팅을 업로드할 예정입니다.