프론트엔드 라이브러리 기술 검토

코드 업로드를 위한 에디터로 @uiw/react-codemirror 라이브러리를 선정하고자 합니다.

코드 에디터 - @uiw/react-codemirror

도입 배경

• 코드를 주요 콘텐츠로 다루는 서비스이기 때문에 코드 하이라이팅에 대한 고민을 하게 되었다. 처음에는 코드 에디터를 단순한 textarea로 하고, 좀 더 가벼운 코드 하이라이팅 기능만 가진 뷰어를 도입할지 고민이 있었다. 하지만 주요 고객 타겟층이 개발자인만큼 코드를 올리는 과정에서도 하이라이팅이 되는 것이 UX가 좋다고 판단하여 에디터를 도입하기로 결정했다.

프로젝트 요구 사항

1. 코드 문법에 맞는 하이라이팅이 될 것
2. 기본 textarea나 markdown 에디터보다 '코드'에만 집중 가능한 에디터일 것
3. 커스텀 스타일 가능할 것
4. react의 Controled, Uncontroled 형식으로 사용 가능할 것
5. 여러 이벤트 (onChange, onBlur,,) 처리가 가능할 것
6. 가능하다면 코드 에디터의 부가기능 사용 가능할 것 (단축키, 검색 등)

선정 이유

1. 비교 대상 라이브러리보다 요구 사항을 모두 충족하며 특히 커스텀하고 쓸 수 있는 옵션이 많음
2. 공식 문서가 자세하며 찾을 수 있는 use case가 많음, 학습 곡선 적어 빠른 도입이 가능
3. 에디터가 직접 개발하기에 공수가 많이 드는 작업이 많은데, 다른 주요 기능과 UI/UX에 시간을 더 쓸 수 있음 (해당 프로젝트의 주요 기능은 코드 에디터가 아니라고 판단)
4. 적용 가능한 다양한 테마
5. 다양한 문법 하이라이팅 지원 가능
6. 오픈소스이며 여러 Issue와 유지보수가 진행중.

우려했던 점

1. 다양한 코드 문법 하이라이팅을 지원하다보니 무거운 라이브러리
   주요 비교 대상이었던 react-ace와는 bundle.js 기준 0.6mb 차이가 났음 (minzipped size는 codemirror가 더 작음)
   추후 bundle 사이즈를 줄이는 방안이나 시간을 갖고 다른 라이브러리를 검토해볼 예정.

2. 해당 라이브러리에서만 지원하는 부가기능에 대한 의존성(테마, 단축키 등)

비교했던 라이브러리

• react-simple-code-editor
• react-ace
  : theme과 문법 하이라이팅 적용이 제한적이거나 불편, codemirror보다 레퍼런스가 적음.
• monaco editor
• react-md-editor
  : 코드에 집중된 에디터가 아닌 마크다운 에디터