Html-react-parser: ํŒŒ์„œ์—์„œ ์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ ์‹คํ–‰

์— ๋งŒ๋“  2019๋…„ 03์›” 26์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: remarkablemark/html-react-parser

์•ˆ๋…•,
์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ๋ฅผ ๊ตฌ๋ฌธ ๋ถ„์„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์ œ ๊ฒฝ์šฐ์—๋Š” ์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ๊ฐ€ ์žˆ๋Š” html ์ฝ”๋“œ๋ฅผ ์ผ๋ถ€ ๋์ ์—์„œ ๋ฌธ์ž์—ด๋กœ ๊ฐ€์ ธ์™€์„œ ๋ฐ˜์‘ ๊ตฌ์„ฑ ์š”์†Œ์— ๋„ฃ๊ณ  ์ž‘๋™ํ•˜๊ฒŒ ๋งŒ๋“ค๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ๊ฒฐ๊ตญ ๋‹ค์Œ๊ณผ ๋น„์Šทํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
Parser('<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>')
๋ถˆํ–‰ํžˆ๋„ ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋กœ๋“œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ๋ญ ์ž˜๋ชป ํ–ˆ์–ด์š”?

question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

<script> ๋งˆํฌ์—…์€ html-react-parser ๋กœ ๊ตฌ๋ฌธ ๋ถ„์„๋˜์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” react-dom ๋ Œ๋”๋ง๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ตœ๊ทผ์— #94 ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋™์•ˆ ์ด๊ฒƒ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค.

์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋กœ๋“œํ•˜๋ ค๋ฉด replace ์‚ฌ์šฉํ•˜์—ฌ ์Šคํฌ๋ฆฝํŠธ ์š”์†Œ๋ฅผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ ๋งŒ๋“ค๊ณ  ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”์ด์˜ฌ๋ฆฐ์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

๋ชจ๋“  4 ๋Œ“๊ธ€

<script> ๋งˆํฌ์—…์€ html-react-parser ๋กœ ๊ตฌ๋ฌธ ๋ถ„์„๋˜์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” react-dom ๋ Œ๋”๋ง๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ตœ๊ทผ์— #94 ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋™์•ˆ ์ด๊ฒƒ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค.

์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋กœ๋“œํ•˜๋ ค๋ฉด replace ์‚ฌ์šฉํ•˜์—ฌ ์Šคํฌ๋ฆฝํŠธ ์š”์†Œ๋ฅผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ ๋งŒ๋“ค๊ณ  ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”์ด์˜ฌ๋ฆฐ์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

์งˆ๋ฌธ์— ๋Œ€ํ•œ ๋‹ต๋ณ€์ด @frontendpm์ด์—ˆ์Šต๋‹ˆ๊นŒ? ๋ฌธ์ œ๋ฅผ ์ข…๋ฃŒํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๊ธฐํƒ€ ์‚ฌํ•ญ์„ ์•Œ๋ ค์ฃผ์„ธ์š”.

์นœ๊ตฌ์—๊ฒŒ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์™„๋ฒฝํ•˜๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค!

NextJS์—์„œ ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋‚˜์š”?

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰