์๋
,
์คํฌ๋ฆฝํธ ํ๊ทธ๋ฅผ ๊ตฌ๋ฌธ ๋ถ์ํ ์ ์์ต๋๊น? ์ ๊ฒฝ์ฐ์๋ ์คํฌ๋ฆฝํธ ํ๊ทธ๊ฐ ์๋ html ์ฝ๋๋ฅผ ์ผ๋ถ ๋์ ์์ ๋ฌธ์์ด๋ก ๊ฐ์ ธ์์ ๋ฐ์ ๊ตฌ์ฑ ์์์ ๋ฃ๊ณ ์๋ํ๊ฒ ๋ง๋ค๊ณ ์ถ์ต๋๋ค.
์๋ฅผ ๋ค์ด ๊ฒฐ๊ตญ ๋ค์๊ณผ ๋น์ทํ ์์
์ ์ํํ๋ ค๊ณ ํฉ๋๋ค.
Parser('<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>')
๋ถํํ๋ ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ธ๋ผ์ฐ์ ์ ๋ก๋๋์ง ์์ต๋๋ค. ๋ด๊ฐ ๋ญ ์๋ชป ํ์ด์?
<script>
๋งํฌ์
์ html-react-parser
๋ก ๊ตฌ๋ฌธ ๋ถ์๋์ง๋ง ์ค์ ๋ก๋ react-dom
๋ ๋๋ง๋์ง ์์ต๋๋ค.
์ต๊ทผ์ #94 ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋์ ์ด๊ฒ์ ๋ฐ๊ฒฌํ์ต๋๋ค.
์คํฌ๋ฆฝํธ๋ฅผ ๋ก๋ํ๋ ค๋ฉด replace
์ฌ์ฉํ์ฌ ์คํฌ๋ฆฝํธ ์์๋ฅผ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ๋ง๋ค๊ณ ์ถ๊ฐํด์ผ ํฉ๋๋ค. ๋ฐ์ด์ฌ๋ฆฐ์ ์ฐธ์กฐํ์ญ์์ค.
์ง๋ฌธ์ ๋ํ ๋ต๋ณ์ด @frontendpm์ด์์ต๋๊น? ๋ฌธ์ ๋ฅผ ์ข ๋ฃํ๋ ๋ฐ ํ์ํ ๊ธฐํ ์ฌํญ์ ์๋ ค์ฃผ์ธ์.
์น๊ตฌ์๊ฒ ๊ฐ์ฌํฉ๋๋ค. ์๋ฒฝํ๊ฒ ์๋ํฉ๋๋ค!
NextJS์์ ์ด๋ป๊ฒ ํด์ผ ํ๋์?
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
<script>
๋งํฌ์ ์html-react-parser
๋ก ๊ตฌ๋ฌธ ๋ถ์๋์ง๋ง ์ค์ ๋ก๋react-dom
๋ ๋๋ง๋์ง ์์ต๋๋ค.์ต๊ทผ์ #94 ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋์ ์ด๊ฒ์ ๋ฐ๊ฒฌํ์ต๋๋ค.
์คํฌ๋ฆฝํธ๋ฅผ ๋ก๋ํ๋ ค๋ฉด
replace
์ฌ์ฉํ์ฌ ์คํฌ๋ฆฝํธ ์์๋ฅผ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ๋ง๋ค๊ณ ์ถ๊ฐํด์ผ ํฉ๋๋ค. ๋ฐ์ด์ฌ๋ฆฐ์ ์ฐธ์กฐํ์ญ์์ค.