알고리즘 너무 어려운데??
오늘 배운 것
웹에디터를 써 보았다. 라이브러리의 매력은 구현하기 어려운 것을 쉽고 안전하게 사용할 수 있다는 것.
react-quill을 써보았는데 next의 작동 특성인 프리렌더링을 한 후 브라우져에 그리게 되는데 두가지 구조를 비교하는 과정을 diffing, 이 내용을 종합적으로 브라우져에 그리는 과정을 hydration이라고 한다.
그런데 프리렌더링시 document나 window가 존재하지 않아 웹에디터를 그려줄 수없었다.
그래서 이를 해결하기위해 dynamic import로 react-quill을 브라우져일때만 그려주게 했다. ssr(서버사이드랜더링)은 하지 않도록 설정해주었다.
react-quill은 react-hook-form과 함께 사용할때 register로 인식시켜줄수 없고 onChange가 적용되지않아 setValue에 담고 trigger를 통해서 contents를 담았다.
웹에디터에서 내용을 다 지워도 태그가 남는 문제가 있었는데, 이것은 dangerouslySetInnerHTML을 통해 해결했으나 보안문제가 발생할 수 있었다. 그래서 dompurify의 sanitize를 함께 써주었다.
hyrataion 오류도 알아보았는데, 이것은 태그의 개수를 맞춰주어 해결할 수 있었다.
https://velog.io/@owlsuri/react-quill
게시판 프로젝트 진행상황
마켓상품리스트 페치 및 CSS
기억이 안되면, 기록을 -