Lexical Editor 사용법 및 Dribble

들어가며

이번 챕터는 항해를 시작하고서 주특기 주차까지 배웠던 내용을 토대로

백엔드분들과 함께 조를 이루어 자유주제로 2주간 프로젝트를 진행하는

주특기 프로젝트 주차였습니다.

저희 조에서는 'Dribble' 이라는 소셜 네트워킹 플랫폼을

클론코딩하고, 이를 디벨롭하기로 했었습니다. 

드리블 사이트에 대해 간략하게 설명을 덧붙이면,

디지털 디자이너의 포트폴리오를 올리고, 공유하는 핀터레스트 사이트입니다.

https://dribbble.com/following

Dribbble - Discover the World’s Top Designers & Creative Professionals

 

프로젝트 info

프로젝트의 주요 기능으로는 다음과 같습니다.

1. 이메일 인증
2. 게시글 CURD
3. 게시글 카테고리화
4. 텍스트 에디터
5. 댓글 CRUD
6. 좋아요 기능
7. 북마크 기능
8. ..로그인 기능, 게시글 카테고리화, 게시글 페이지네이션, 북마크, 좋아요 등

이번 글에서는 제가 처음으로 다루어보았더 텍스트 에디터 기능에 대해서만 작성해보도록 하겠습니다.

 

텍스트 편집기 프레임워크, Lexical 

lexical 이란?

Lexical 은 안정성, 접근성 및 성능에 중점을 둔 확장 가능한 JavaScript 웹 텍스트 편집기 프레임워크입니다.

Lexical 을 사용하면 내장된 브라우저 도구로 하드코딩하기에 매우 복잡할 텍스트 편집 도구를 쉽게 만들 수 있습니다. 

 

lexical 을 선택한 이유

실은 처음 고른 editor 라이브러리로 Draft.js 였습니다. 사용한 사람들의 사례가 많아 사용하는 데에 도움이 되는 자료들로 생각해서 골랐지만, Draft 를 만든 페이스북팀이 드래프트는 너무 오래전에 만들어져서 원하는 만큼 성능이나 호환성이 나오지 않아서 다른 편집기 프레임워크인 Draft.js, Slate, ProsMirror 에서 아이디어를 가져와 종속성이 없는 새로운 텍스트 편집기 프레임워크인 'Lexical' 를 발표했다고 해서 찾아보았는데, 사용하는 방법도 쉬워보였고, 간편해보여 이를 선택했습니다. 그리고 다음과 같은 이유가 있습니다.

• 자유롭게 확장가능한 JavaScript 웹 텍스트 에디터 프레임워크 오픈소스
• 1개의 ContentEditable 개체에 붙어 사용가능
• 최소화된 형태로 빠름. UI 및 기타 기능들을 플러그인을 통헤 제공
• 프레임워크 상관없이 동작, React 용 바인딩을 제공해서 좀 더 편하게 개발 가능

 

lexical 사용방법

1. lexcial & @lexical/react 패키지 설치

npm install --save lexical @lexical/react

 

2. Powerful Features clone

기본 편집기가 아닌, 기능이 추가된 편집기를 원했기 때문에 기본 편집기에 따로 플러그인을 넣어줄 필요 없이 공식홈페이지에서 아래 링크에 들어가 해당 편집기 코드를 클론해왔습니다. 

https://codesandbox.io/s/lexical-rich-text-example-5tncvy?from-embed 

lexical-rich-text-example - CodeSandbox

위 에디터의는 목록, 링크, 테이블, 편집상태 뒤로가기/앞으로가기, 폰트 디자인등과 같은 기능을 포함하고 있습니다.

 

3. Overview

lexical 에디터의 폴더구조를 살펴보겠습니다.

nodes 폴더와 plugins 에 대해 자세히 보면,

• nodes : 편집기를 구성하는 가장 작은 요소라고 생각하시면 됩니다. 노션의 '블록' 과 같은 역할이라고 할 수 있죠.
  • 예 : 이모지, 멘션, 이미지, 투표 등
  • src/nodes/PlaygroundNodes.ts 에 커스터마이징한 노드를 등록할 수 있습니다.
• plugins : 등록된 노드들을 이용해 편집기에 적용가능하도록 플러그인을 만들 수 있습니다.
  • lexical 에서 단일 책임 원칙에 의해 캡슐화해 코드를 관리하도록 유도했음을 알 수 있습니다.