๐ก ์ฌ๋ฌ ์น์ฌ์ดํธ๋ค์ ๋ณด๋ฉด ๊ตต๊ธฐ, ๋ฐ์ค, ๊ธฐ์ธ์ ๋ฑ์ ์ ์ฉํ๋ ๊ธ์ฐ๊ธฐ(์น ์๋ํฐ) ๊ฒฝํ์ ํ ์ ์๋ค!!!
- ์น์๋ํฐ(๋ผ์ด๋ธ๋ฌ๋ฆฌ)๋ฅผ ์ ์ฉํด๋ณด์!
- ํ์ด๋๋ ์ด์ ์์ ๋ฐ์ํ๋ ์๋ฌ๋ ์ ์๊ธฐ๊ณ ์ด๋ป๊ฒ ํธ๋ค๋งํด์ผ ํ๋์ง
wysiwyg(what you see is what you get, ๋ณด๋ ๋๋ก ์ป๋๋ค)
1๏ธโฃ react-draft-wysiwyg
2๏ธโฃ React-Quill (์ฌ์ฉํ ์๋ํฐ)
3๏ธโฃ Toast-ui-editor (NHN์์ ๋ง๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ)
๊ทธ๋ฐ๋ฐ ReactQuill์ importํด์ค๋ฉด ์ด๋ฐ์์ผ๋ก error๊ฐ ๋ธ
// document๋ ๋ธ๋ผ์ฐ์ ์ ์๋๊ฒ, localStorage๋ ๋ธ๋ผ์ฐ์ ์ ์๋๊ฒ.
// ์ ์ํ์๋ ์ ์์ด ์๋ ์ด์ ๊ฐ
๋ธ๋ผ์ฐ์ ์์ ํ๋ก ํธ์๋๋ก ์ ์ํด์ html, css ๋ฐ์์ค๊ธฐ ์ ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ ๊ทผํด์ document is not defined๋ผ๊ณ ๋จ๋ ํ์
ํด๊ฒฐ๋ฐฉ๋ฒ....?
๐ก dynamic-import!!!
1๏ธโฃ์๋ฒ์์ ๋ ๋๋ง(quill ์์ด), 2๏ธโฃ๋ธ๋ผ์ฐ์ ์์ ๋ ๋๋ง(quill ๊ฐ์ด ๋ ๋๋ง) ๋๊ฐ๋ฅผ ๋๋ ์ค์ผํจ
=>์๋ฒ์์ ๋ ๋๋งํ ๋๋ react quill import ํ๋ฉด ์๋๊ณ ๋ธ๋ผ์ฐ์ ์์ ๋ ๋๋ง ํ ๋๋ react quill import ํ๊ธฐ
- dynamic importํ๊ธฐ
๋ฑ๋กํ๊ธฐ ๋ฒํผ ํด๋ฆญํ๋ฉด ํต์งธ๋ก db์ ๋ค์ด๊ฐ๊ณ , query ์์ฒญ ๋ณด๋ผ๋๋ ํต์งธ๋ก ์์ฒญํด์ ๊ฐ์ ธ์ค๊ธฐ
๐ก ์ฝ๋ ์คํ๋ฆฌํ ('์ชผ๊ฐ๋ค')
- ๋ฒํผ์ ํด๋ฆญํ๋ฉด ํจ์๊ฐ ์คํ๋์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์คํ๋๋ค๊ณ ๊ฐ์
- ๋ถํ์ํ ๊ฒ๋ค์ ๋ฏธ๋ฆฌ importํ์ง ์๊ณ ํด๋ฆญํด์ ํ์ํ ๋ importํด์ค๊ธฐ ์ํด dynamic import๋ฅผ ์ฌ์ฉํ๋๊ฒ์
- ๊ทธ๋์! ๋ฏธ๋ฆฌ ๋ชจ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ importํด์ค์ง ์๊ณ ์ฐ๋ฆฌ๊ฐ ํ์ํ ๋ dynamic import ๊ธฐ๋ฅ์ ์ฌ์ฉํด์ ์ ์์ importํด์ค๋ฉด ์ฑ๋ฅ๋ ๋์ฑ ํฅ์๋๋ค!
import AAA from 'aaa' const onClickQQQ = () => { const AAA = dynamic(()=>import('aaa') }
dynamic import๋ฅผ react-hook-form๊ณผ ๊ฐ์ด ์ฌ์ฉํ๊ธฐ
ReactQuill์๋ {...register("contents")}์ ๊ฐ์ด ์คํ๋ ๋ํด์ react-hook-form ๊ธฐ๋ฅ์ ๋ฐ๋ก ์ ์ฉํ ์ ์์. ์ค๋ฅ๋จ!
๊ทธ๋์! react-hook-form์ register์ value๋ฅผ ๋ฃ๋ ๋ฐฉ๋ฒ์ด ์์๊น?
๊ฐ์ ๋ก setValueํด์ contents๋ผ๋ state์ value๋ฅผ ๋ฃ์ด์ค
๐ก ๋์ ๋ณด์ด์ง๋ ์์ง๋ง ์ฝ์์ ๋ณด๋ฉด ๊ฐ์ด ์ ๋ ฅ๋์ด ์๊ธฐ ๋๋ฌธ์ yup์ ์ด์ฉํด์ ์๋ฌ๋ฉ์ธ์ง๋ฅผ ๋์ธ ์ ๊ฐ ์๊ฒ๋จ.
- ๊ทธ๋์ value๊ฐ ์ ๋ฐ์์ผ๋ก ๋ค์ด์์๋ ๋น์ด์๋ค๊ณ ์๋ ค์ค์ผํจ
๐ก ๋ฉด์ ๋ ์ข ์ข ์ถ์ ๋๋ ์ฃผ์ ๋ค
๐ก SQL-Injection
๐ก Hydration Issue
- ํ๋ฆฌ๋ ๋๋งํ ๋ html ํ๊ทธ๋ฅผ ์์ฃผ๋ก ๊ทธ๋ฆฐ๋ค. (๋ชจ๋ ๊ฑธ ๋ค ๊ทธ๋ฆฌ๋๊ฒ ์๋๋ผ ํ๊ทธ์ ์์น๋ค ์์ฃผ๋ก)
- ํ๋ก ํธ์๋์์๋ ๋๋ต์ ์ธ html ํ๊ทธ๋ง ๊ทธ๋ ค์ก๋ค๋ฉด,๋ธ๋ผ์ฐ์ ์์๋ ํ๊ทธ์ ๋ด์ฉ๋ค์ด ๊ทธ๋ ค์ง๋ค.
๐ก Hydration Issue ํด๊ฒฐ๋ฐฉ๋ฒ
- ๋ธ๋ก ๊ฐ์(ํ๊ทธ ๊ฐ์)๋ฅผ ๋ง์ถฐ์ค์ผํจ
- front-end์๋ฒ์์ ๋ ๋๋ง ํ์ง ์์ ๊ฒ์ด์ง๋ง ์ ์ด๋ div์ ๊ฐ์๋ ๋ง์ถฐ์ค์ผ Hydration issue ๋ฐฉ์ง ๊ฐ๋ฅํจ!! (๊ฐ์ง div ๋ผ๋ ๋ง๋ค์ด์ ๊ฐฏ์๋ฅผ ๋ง์ถฐ์ค์ผํจ)