YG-39 [feat]: editor

[55555-Jyeon]

개요

게시글 작성을 위한 에디터 설치했습니다.

YG-39 #open #comment 🟢 quill 컴포넌트
YG-39 #close #comment 🟢 quill 컴포넌트 옵션 및 스타일 적용
YG-39 #close #comment 🎁 디테일한 스타일 조정

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• PR 제목 및 커밋 메시지 컨벤션 확인
• 직접 만든 함수가 있다면 이에 대한 설명 추가 (ex. JS DOCS)
• 변경 사항에 대한 테스트 완료 (버그 수정/기능에 대한 테스트)
• Label 확인
• Assignees 설정 확인
• Reviewers 설정 확인

PR details

저희가 사용하기로 한 에디터는 react-quill 이었습니다.

Why Quill ?

next.js에서 사용할 수 있는 에디터 관련 라이브러리로는 대표적으로 Draft.js, Slate.js, Quill.js, CKEditor 등이 있습니다.
그 중 quill을 사용한 이유는 아래와 같이 정리할 수 있습니다.

1️⃣ 간편한 사용성
Quill은 사용하기 쉽고 직관적인 API를 제공합니다.
React와의 통합이 잘 되어 있어서 React 애플리케이션에서 쉽게 사용할 수 있습니다.

2️⃣ 커스터마이징
uill은 많은 커스터마이징 옵션을 제공합니다.
에디터의 외관 및 동작을 필요에 맞게 조정할 수 있습니다.

3️⃣ 풍부한 기능
Quill은 텍스트 편집을 위한 다양한 기능을 제공합니다.
텍스트 서식 지정, 이미지 및 동영상 삽입, 텍스트 스타일링 등을 포함합니다.

4️⃣ 커뮤니티 및 문서
Quill은 활발한 커뮤니티와 잘 작성된 문서를 가지고 있어서 문제 발생 시 해결하기 쉽습니다.
또한 다양한 플러그인이 존재하여 필요에 맞게 확장할 수 있습니다.

5️⃣ 성능
Quill은 빠른 렌더링 및 사용자 경험을 위해 최적화되어 있습니다.

How to use Quill...

공식문서 → 🔗 https://quilljs.com/docs/quickstart

editorQuill 이라는 파일로 분리했으니 게시글 작성하는 파일에서 해당 에디터를 import 해 사용하시면 됩니다.
editorQuill을 사용하면서 발생하는 문제들은 다른 개발자들의 깃 이슈 목록을 살펴 보는 것을 추천드립니다.

react-quill issues → 🔗 https://github.com/zenoamaro/react-quill/issues

"use client"

import dynamic from "next/dynamic"
import "react-quill/dist/quill.snow.css"

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false })

export const QuillEditor = () => {
    return (
        <ReactQuill className="quill-editor" modules={{toolbar: [ "toolbar에 들어갈 기능들"] }}  />
    )
}

dynamic import

react-quill issue :

• Server-Side Rendering (SSR), NextJS, etc.
• ReactQuill component not appearing in NextJS 13.4.2

quill-editor 자체가 SSR에서 불러와 사용할 수 없는 모듈이었기 때문에 해당 컴포넌트 자체를 동적으로 가져오도록 설정하는 것이 대부분이었습니다. 이유를 검색해보니 아래와 같이 정리할 수 있었어요. 참고하시면 좋을 것 같습니다. 🙂

1️⃣ 번들 크기 최적화

Quill은 꽤 큰 라이브러리이기 때문에 애플리케이션의 초기 로딩 시간을 줄이기 위해 필요할 때만 동적으로 로드하는 것이 유용합니다.
이렇게 하면 사용자가 페이지를 방문할 때 필요한 라이브러리만 로드되므로 초기 로딩 시간이 단축되고 페이지 성능이 향상될 수 있습니다.

2️⃣ 페이지 렌더링 성능 개선

동적으로 Quill을 로드하면 페이지의 초기 렌더링 시간이 단축될 수 있습니다.
초기 로딩 시간을 줄이는 것은 사용자 경험을 향상시키고 페이지의 빠른 렌더링을 가능하게 합니다.

3️⃣ 리소스 관리

필요하지 않은 경우에는 Quill을 로드하지 않고 필요할 때만 로드함으로써 애플리케이션의 메모리 리소스를 절약할 수 있습니다.
특히, Quill을 사용하는 페이지가 많지 않은 경우에는 불필요한 리소스 사용을 피할 수 있습니다.

4️⃣ 코드 스플리팅

동적으로 Quill을 로드하면 코드를 더 작은 청크(chunk)로 나눌 수 있으며,
이는 코드 스플리팅을 통해 애플리케이션의 성능을 최적화할 수 있는 기회를 제공합니다.

Jayden 님이 만든 에디터 :

quill 에디터를 커스텀한 모습 :

제공하는 기능들의 차이와 변경할 수 없는 디자인이 있어 Jayden 님의 에디터와 차이가 있습니다.

에디터의 툴바(tool-bar)와 텍스트를 입력 받는 부분(container) 사이의 간격을 떨어뜨릴 수 있지만 freeForm과 memoForm 에디터의 간격이 일정하지 않습니다.

위에서 입력 받을 정보들 (다녀온 지역과 기간, 제목 등)을 사이에 두는 것이 아닌 다른 곳에 두는 것이 나을지 아니면 페이지마다 toolbar와 container의 간격을 다르게 주는 것이 나을지 Jayden 님 및 다른 프론트 분들의 의견 궁금합니다.

우선은 두 개가 붙어 있을 것이라는 가정 하에 임의의 간격(20px)으로 설정해두었습니다.

👩🏻‍💻 의견 공유합니다

react-quill 라이브러리에서 기본적으로 이미지는 base64로 인코딩되어서 img 태그의 src 속성에 삽입되기 때문에 사용자가 짧은 글을 작성했다 하더라도 이미지 때문에 내용이 어마어마하게 길어진다고 합니다. quill을 사용한 다른 개발자 분들은 그래서 이 이미지를 s3와 cloudfront를 이용해서 클라우드 서버 url을 통해 이미지를 불러오도록 변경한다고 하니 이 부분 고려해보면 좋을 것 같습니다.

When modifying code...

# Request Level
  - [ ] : "🔥 이대로 Merge 하면 안돼요~!"
  - [ ] : "🥹 고치면 분명 나아질 게 분명합니다.."
  - [ ] : "🤷 수정하면 좋지 않을까요?"

# Description

[ijimlnosk]

오 이 정도로 커스텀이 될줄은 몰랐습니다
어마어마하네요 고생하셨습니다

[55555-Jyeon]

오 이 정도로 커스텀이 될줄은 몰랐습니다 어마어마하네요 고생하셨습니다

그러니까요, 커스텀 진짜 용이한 것 같아요!
기능은 디자인이랑 좀 달라서 아쉽지만..

[kiminn]

우와 고생하셨습니다!!!!!

[hayoung78]

PR 디테일 장난아니네요.. 역시 Amyyyyyyy😎