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์ผ๋ก ๋ณํํด์ฃผ๊ธฐ!