try{}~ catch(){}~ finally{}: 실패했든 성공했든 마지막에 실행을 하고 끝낸다
React-Quill
yarn add react-quill
import 'react-quill/dist/quill.snow.css';
next에서 사용할 때 FE에서 한번 그리고 Br에서 한번 그리기때문에 Fe에서는 html이 없어서 에러가 발생한다.
이를 위해서 Dynamic Import를 이용해서 ssr(server side rendering)을 false로 줌으로써 Fe에서는 그리지 말라고 명령을 해주면 에러가 발생하지 않는다.
.png)
react-quill로 작성한 내용을 조회 할 때 기존방식으로 출력하면 불필요한 태그까지 같이 출력된다
.png)
이렇게 dangerouslySetInnerHTML을 이용하면 contents안에 html태그들을 실행하면서 react-quill로 입력한 내용(굵은글씨, 밑줄 등..)을 똑같이 출력해주게 된다.
.png)
해킹방지
dangerouslySetInnerHTML을 사용하면 결국 input이 하나의 script로 작용하게되어 보안성이 떨어진다.
예시 :
<img src='#' onerror='console.log(localStorage.getItem(\"myAccessToken\"))'>contents에 위 내용을 넣으면 localStorage에 있는 개인정보를 가져올수 있다.
.png)
- Dompurify : data에 <>가 있으면 이를 특정 문자로 변환해서 코드로 작용하는 문제를 해결해 준다.
yarn add dompurify
next에서 라이브러리를 사용시 주의점
- next는 기본적으로 FrontEnd 서버에서 컴포넌트를 한번그리고, Browser에서도 한번 그리고 두개를 비교하는 디핑을 한 후 렌더링하는 방식을 사용한다
- FrontEnd 서버에서 그릴때 라이브러리에 따라 그리는 것이 불가능한 라이브러리가 있다. 이럴때 에러가 발생한다.
해결방법
- process.browser &&(렌더링할 내용) : 브라우저에서일때만 랜더하도록 조건부랜더링 실행
.png)
- typeof window !== "undefined" && : window일때 즉 브라우저에서만 랜더하도록 조건부랜더링 실행
.png)
