오늘 배울 내용!
Web-Editor
사용가능한 라이브러리
react draft wysiwyg
react quill
@toast-ui/editor 등등..
quill실습!
docs 보고 따라하면 된다.
근데 이 상태로 실행을 하면 오류가 뜬다.
프론트엔드서버에서 edit을 다운받으려니 오류가 뜨는 것이다. 해결방법은 3개!
1.process.browser
2.typeof window !== "undefined"
3.useEffect
중 1가지를 이용하면 되고
우리가 import해오는 방식이 한페이지 들어갈때 전부 다운받는데
next에서 제공하는 dynamic을 이용하면 import를 사용할 때 다운 받을 수 있다.
이런 방식을 code-splitting(코드스플링팅)이라 한다.(성능 최적화!!)
안쓰는걸import안해오니 훨씬 효율적!
editor를 이용해서 데이터를 불러오면 태그까지 같이 온다.
그걸 dangerouslySetInerHTML을 이용하면 
이렇게 잘 나온다.
주의해야할 점이 dangerouslySetInerHTML이 지금 태그를 인식하는데
만약 해커가 이런식으로 scrit를 적고 안에 로직을 적어놓으면 예를들어 어떤 상품을 구매하려고 쇼핑몰에 들어가서 로그인을 하고 구매를 하러 들어갔다가 이런식으로 로그인의 accesstoken을 해커의 backend서버에 정보를 뺏기는거다.
이렇게 sciprt를 집어넣어서 공격을 하는게 XXS(Cross Site Script)라고 한다.
이런 공격을 막기위한 dompurify라는 라이브러리가 있다.
yarn add dompurify
yarn add --dev @types/dompurify설치 후
pre-rendering을 하기전에 실행이되면 오류가 뜨기 때문에 조건문으로 기다려주게 해주고
__html안에 넣어주면 완벽!
Hydration
React는 실제 주소가 없고 가짜주소를 사용한다. 처음 렌더링될 때 모든페이지의 html,css,js를 다운받기 때문에 첫 로딩때 느리지만 페이지 안에선 굉장히 빠르다.
next.js에선
수분이 없는 나무에 물을 줘서 살아나게끔 하듯이 브라우저가 렌더링 되는 과정도 그렇기 때문에 hydration이라고 이름이 붙여졌다.
어? 그럼 프리렌더링을 했다가 브라우저에서 다시 그리면 더 느린거 아닌가?
배포할때 bulid를 사용하면 모든 페이지의 프리렌더링을 한 파일이 만들어지기 때문에 훨씬 빠르다.
