20240117 TIL react-quill에 html넣기/ html 파싱하기/컴포넌트 분리하기

목표

• react-quill에 html넣기
• 글작성, 수정 페이지  컴포넌트 재활용

새로 알게 된것/ 오늘의 코드

게시물 수정을 구현 하던 중 quill에 value로 content를 넣어주고 initialstate를 게시물의 content로 했는데 

구조가 망가지는 오류가 생겼다. 

개발자 도구에서 요소를 확인 해보니 

<p></p>
<p><img/></p>
<p></p>
<p></p>
<p></p>

p태그안에 이미지 태그가 들어가는 식으로 오게 되는데 이게 

<p>글글글<img/>글글글<p/>

이런식으로 나와서

이렇게 넣은 것이

 

이렇게 한줄로 나오게 된다. 

<p>태그는 원래 안에 태그를 넣는 애들이 아니라서 그런지 오류가 나는 것 같았다.

그래서 p태그들을 div로 바꿔줘야했는데 여러방법을 생각했지만 하루를 종일 고민한 끝에 문자열이니 정규식으로 변환해버리자는 생각이 들었다. 

content.replace(/<p>(.*?)<\/p>/g, ' <div>$1</div>')

해당 정규식은 p태그는 div로 바꾸는 것이다. 

 

그런 뒤에 넣으면 문제 없이 뜨는 것을 확인 할 수 있다.

 

근데 퀼은 자잘한 오류가 많은 편인 것같다 .특히 렌더링에  취약한 것 같다. 근데 이상한게.. 입력할 때마다 렌더링되면서.. 왜..? 자잘한 버그로는 렌더링이 극도로 많아지면 글자가 깨지게된다.

지금은 입력한다고 치면 ㅈㅈㅈ지지짖ㅈ그그ㅡ그금 이런식으로 나오기도 했다. 그때는 props 렌더링을 따로 처리하지 않아서 일어난 일이었다. 

 

그리고 방금 발견한 오류인데 글을 작성하다가 이미지 태그가 팅긴다.. 

 지나가다가 언제 그런 글을 본 적이 있었는데..! 긴글에 취약하다는...! 근데 긴글도 아니었는데...

그럴때마다 컨트롤z를 해서 되돌리면 그대로 들어가지만... 버그잖아요~!~!~!

퀼은 정말 버그뒤에 버그 인듯 한다.. ! 아무래도 기본 quill보다 react-quill이 성능이 떨어져서 생기는 일이지 않을까 싶었다..

 

 

목표 달성여부

• react-quill에 html넣기
• 글작성, 수정 페이지  컴포넌트 재활용

내일 목표

• 버그 수정
• 댓글