[Next] Next.js에 React-Quill 에디터 적용하기

WYSIWYG 에디터 중 Quill 에디터를 사용해보기로 했는데 사용하는데 엄청 애먹어서 블로그에 작성해보려고 한다.

 

문서 확인

react-quill 라이브러리 설치해주기

npm install react-quill

 

사용할 컴포넌트에 아래 코드 작성하기

'use client'
import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function MyComponent() {
  const [value, setValue] = useState('');

  return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}

 

하지만 Next.js를 사용중이라면 분명 에러가 날텐데 Quill에디터는 SSR을 지원하지 않기 때문에 이를 비동기적으로 가져와야한다.

'use client'
import dynamic from 'next/dynamic';
import React, { useState } from 'react';
import 'react-quill/dist/quill.snow.css';

const QuillNoSSRWrapper = dynamic(() => import('react-quill'), {
    ssr: false,
    loading: () => <p>Loading ...</p>,
});

const TextEditor = () => {
    const [value, setValue] = useState('');
    return <QuillNoSSRWrapper theme="snow" value={value} onChange={setValue} />;
}

dynamic함수는 로딩 시 CSR과 SSR사이에서 조절할 수 있는데 ssr 옵션을 false로 적용했다.

에디터 툴바를 커스텀 하려면 아래 글을 참고하면 된다.

https://quilljs.com/docs/modules/toolbar/

 

 

 

근데 에디터에서 작성한 내용을 그대로 출력하게 된다면 html 태그도 함께 출력된다. 

 

그럴 땐 dangerouslySetInnerHTML를 사용해서 html 태그를 노출시키지 않도록 할 수 있다.

<div dangerouslySetInnerHTML={{ __html: 출력할 내용 || '' }} />

 

그러나 주의 할 점 dangerouslySetInnerHTML을 사용하면 XSS 공격에 노출될 수 있다.

그래서 XSS 공격을 방지하는 DOMPurify를 설치해주기

npm i isomorphic-dompurify

import DOMPurify from "isomorphic-dompurify"

<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(출력할 내용 || '') }} />

이렇게 하면 html이 안전하게 렌더링 된다.

 

근데 가장 큰 문제가 또 있다.

이미지를 저장하면 base64로 인코딩 되어 저장이 되기 때문에 만약 그대로 서버에 저장한다면?

엄청난 텍스트 데이터가 저장되기 때문에 서버에 부하를 줄 수 있다.

그래서 S3와 CloudFront를 이용해서 이미지를 저장 후 URL을 가져오기로 했다.

 

다음 글 계속..