Web-Editor

📄 Web-Editor

1. React-quill 써보기!

- React-quill에서 쓰이는 onChange: HTML의 onChange기능이 아니다. react-quill을 만들어 놓은 개발자들이 자체적으로 만들어 놓은 기능이라 event가 따로 필요 없다. 디렉트로 value를 넣어준다!!

- 하지만 react-quill을 그냥 쓰려고 하면 ❗Error: document is not defined❗라는 문구를 브라우저 창에서 보게 된다.

- FE서버에서는 브라우저의 요청을 받고 pre-rendering을 하고 브라우저에 되돌려주는데 이때 document가 없기 때문에 에러가 생기게 된다.

💥 그럼 해결은 어떻게❓

 

- process.browser일 때 렌더링해줘! 라는 코드를 작성해주면 되는데, 여기서 또 한 번 에러가 생긴다!! => import 자체가 안돼서 생기는 에러!! 즉, import를 직접 컨트롤해줘야 한다.(동적 import=dynamic import)

- 에러가 생기는 또 다른 이유: 해당 라이브러리를 useEffect에서 사용하거나 process.browser / typeof window 값이 undefined가 아닐 때 즉, 서버가 아닐 때 실행을 시켜주도록 조작을 해주는 건데 이때에도 react-quill이 import 자체가 안된다!!

- dynamic(동적) import를 이용해서 react-quill을 직접 import 해오고 ssr값을 false로 설정해준다.

 

2. react-hook-form 라이브러리를 이용해서 Web-Editor 써보기!

 

- react-quill의 onChange는 register 기능이 적용되지 않기 때문에 react-hook-form에서 따로 setValue를 불러와서 적용시켜줘야 한다.(강제로 값을 넣어준다!!)

- register를 했을 때 단지 state에 값만 넣어주는 것이 아니며 다른 기능들을 포함하고 있다.

- 위(☝) 코드대로 작성하면 문제점이 있는데, setValue에서 contents 부분의 빈 내용들도 내용이 있는 걸로 간주해서 BE로 요청을 보내게 된다.

- 또 다른 문제점은 setValue는 값만 가지고 변화되었을때만 인식이 되고 onChange 되었을 때를 인식하지 못한다.(ex: yup을 이용해서 검증을 하게 될 경우)

-그래서 change event가 되었을 경우를 알려주는 기능이 있는데 trigger를 통해서 해결이 가능하다!

 

💥해결❗

 

- <p><br></p> 이 부분은 브라우저 콘솔창을 통해 내용을 입력하고 입력 내용을 깨끗이 다 지워도 남는 부분인데, 이 부분도 내용이 있는 걸로 간주하기 때문에 삼항 연산자로 BE에 요청하는 걸 방지해줄 수 있다.

 

- setValue가 onChange 되었을때 인식하지 못하는걸 trigger("contents")로 해결해 줄 수 있다!!

 

3. Submit!

- graphQL에서 글 등록을 해줄 수 있는 mutation을 이용(☝)

- 등록된 글을 불러오는 query를 이용해서 페이지 이동까지 작성 후의 결과!(☝)

❗내용에서 태그부분까지 그대로 브라우저창에 보이게 되는 문제점이 있다❗

❗<strong></strong>, <u></u> 등 이런 것들은 문자열로 인식되었기 때문에 그대로 보이는 것❗

 

💥해결❗

- 태그 자체를 문자열로 바꿔주면 된다! dangerousSetInnerHTML을 이용해 (data?. fetchBoard.contents)를 String으로 변환해주기!