์ƒ์„ธ ์ปจํ…์ธ 

๋ณธ๋ฌธ ์ œ๋ชฉ

Web-Editor

์นดํ…Œ๊ณ ๋ฆฌ ์—†์Œ

by KBstarโญ 2022. 4. 26. 19:56

๋ณธ๋ฌธ

๐Ÿ“„ 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์œผ๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๊ธฐ!