초기 세팅 전 테스트해보고 싶었던 내용
- 블로그처럼 내가 쓸 글의 [H1, H2, bold, italic ] 등의 꾸미기 요소를 어떻게 처리하는가
- 처리가 되었다 치고, 그걸 DB에는 어떻게 저장할 것인가
- DB에 저장했다 치고, 그걸 가져와서 어떻게 html로 랜더링 해 줄 것인가..!
1. 블로그처럼 내가 쓸 글의 [H1, H2, bold, italic] 등의 꾸미기 요소를 어떻게 처리하는가
처음 든 생각은, 유저가 h1을 누르면 그 글에 < h1 >등의 태그를 붙여주고, 엔터를 누르면 그 태그가 닫히고.. 일반 글에 < p > 태그를 붙여주고, 또 엔터를 누르면 태그가 닫히고... 그걸 다 구현해 두어야 하나 생각해서 너무 디테일한 요소에 시간을 많이 잡아먹을까 걱정을 했는데..!
Quill Editor
https://quilljs.com/
라는 친구가 있었다..!
react-quill을 설치하고 컴포넌트에 Quill을 임포트하니까 document is not defined라는 에러가 발생했다.
조금 검색해보니, SSR 환경에서는 브라우저의 document에 접근할 수 없기 때문이여서 생기는 오류였다.
이는 next/dynamic을 통해 dynamic import를 해 줌으로서 해결 할 수 있었다.
import dynamic from "next/dynamic";
const ReactQuill = dynamic(import("react-quill"), {
ssr: false,
loading: () => <p>Loading ...</p>,
});이렇게 하면 SSR을 끝낸 뒤 document가 그려진 이후(클라이언트가 로드된 이후)에 import가 되면서 정상적으로 사용 가능하게 된다.
이렇게 html 태그가 붙으면서 value를 기록할 수 있게 된다.
2. 처리가 되었다 치고, 그걸 DB에는 어떻게 저장할 것인가
mySQL에 간단한 테이블을 만들었다.
지금은 post column의 타입이 text였으나, 최초 생성시에는 varchar였다.
샘플 블로그 글을(나름 긴 글을) 담아서 서버로 보냈더니 데이터가 너무 길어서 안된다는 오류 메시지가 떴다.
post column의 데이터 타입을 text로 수정해주면서 해결되었다.
- max size limit
varchar : 1 ~ 65535
text : only 65535
사실 varchar의 최대 크기로 지정해보려고 했으나, varchar(65535)로 변환을 해봤더니 안되더라..
결국 text로 변경하니 잘 되었다. 서버를 짤 때 다시한번 더 시도를 해보면 좋겠다.(찝찝...)
벨로그 메인에 뜬 글을 한번 넣어보았다.(글 잘 읽었습니다) 잘 들어가더라..!
3. DB에 저장했다 치고, 그걸 가져와서 어떻게 html로 랜더링 해 줄 것인가..!
요건 2번보다 더 찝찝하다.
DB로부터 받은 data(html태그가 붙은)를 그대로 랜더링 시키면 문제가 생긴다.
간단한 코드를 작성해서 테스트해보니
이렇게 태그가 모조리 텍스트로 잡혀서 나온다.
리액트에서는 위험성 때문에 html을 직접 주입하는 것은 무려 dangerouslySetInnerHTML을 사용해야 한다고 한다.
코드를 이렇게 수정해주었다.
태그에 따라 잘 랜더링 되는 걸 볼 수 있다.
조금 더 검색해본 결과 DOMpurify라는 라이브러를 통해 이 문제를 해결할 수 있다고 한다.
Dompurify의 sanitize기능을 활용한다면 이를 막아 줄 수 있다고 한다.
소독을 해줘야겠다.
일단 생각한대로 로직이 굴러가는 걸 확인했으니, 본격 작업이 들어갈때 디테일을 메꿔가면서 하면 될 것 같다.
그래도 생각한대로 가능해서 다행이다!
