6주차 수요일

목차

1. 웹에디터 >>> Web-Editor
2. 로컬스토리지는 위험해! >>> Cross-Site-Script(XSS)
3. 하이드레이션에서 CSS문제 발생! >>> Hydration-Issue

1. Web-Editor

• 대표적인 종류: react-draft-wysiwyg, react-quill, toast ui editor

React-quill

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

• onChange함수에 event가 들어오는 것이 아니다 >>> 라이브러리이기 때문에!!
• value가 들어오게끔 만들었다!!
  - !!주의!! 브라우저에서만 Reactquill을 실행시켜주어야한다!

import 자체를 서버 말고, 브라우저에서만 해라! 라는 것을 적용해야한다 >> Dynamic import

Dynamic import

import dynamic from 'next/dynamic'

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

• 서버사이드에서는 그리지않고, 클라이언트 사이드(브라우저)에서만 그리겠다라는 말!!

useForm에 ReactQuill적용한 contents부분 적용하는 방법( register 사용 X )

web-editor로 작성한 내용 그대로 보여지게 하기

• 문자열이 아닌 html 태그로 인식하게하는 방법!
• dangerouslySetInnerHTML

Dom-purify

yarn add dompurify
yarn add @types/dompurify --dev