Html-react-parser: index.mjs๊ฐ€ ๊ธฐ๋ณธ ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ ์—‰๋ง์œผ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2021๋…„ 04์›” 02์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: remarkablemark/html-react-parser

๊ธฐ๋ณธ ๋‚ด๋ณด๋‚ด๊ธฐ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋Š” index.mjs ์ด ์ถ”๊ฐ€๋œ ์ดํ›„์— ์กด์žฌํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ์„ค์น˜๋œ ํŒจํ‚ค์ง€์—์„œ ์ด ํŒŒ์ผ์„ ์‚ญ์ œํ•˜๊ฑฐ๋‚˜ ์ด๋ฆ„์„ ๋ฐ”๊พธ๋ฉด ์ œ๋Œ€๋กœ ๋นŒ๋“œ๋ฉ๋‹ˆ๋‹ค. ๋‹ค์‹œ ๋„ฃ์œผ๋ฉด ์ด๋Ÿฌํ•œ ๊ฒฝ๊ณ ๊ฐ€ ๋‹ค์‹œ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

์–ด์ฉŒ๋ฉด ์šฐ๋ฆฌ ์›นํŒฉ ์„ค์ •์€ ๋”ฐ๊ธฐ index.mjs ์ฐฌ์„ฑ index.js ํ•˜์ง€๋งŒ, ์•ˆ ๋‚ด๊ฐ€ ๋ช…์‹œ ์ ์œผ๋กœ ๋งŒ ์ฐพ์•„ ๊ทธ๊ฒƒ์„ ๋งํ•˜๊ณ  ์ดํ›„ .js ๋ฐ .jsx babel-loader ์„ค์ •์˜

๋งˆ์ง€๋ง‰์œผ๋กœ ์•Œ๋ ค์ง„ ์ž‘์—… ๋ฒ„์ „์€ 1.1.2์ž…๋‹ˆ๋‹ค. ๋‹ค์šด๊ทธ๋ ˆ์ด๋“œ๊ฐ€ ์ ์ ˆํ•œ ์ˆ˜์ • ์‚ฌํ•ญ์ด ์ œ๊ณต๋  ๋•Œ๊นŒ์ง€ ๊ฐ€์žฅ ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋Š” ์ž‘์—…์œผ๋กœ ๋Š๊ปด์ง€๊ธฐ ๋•Œ๋ฌธ์— ๋‹น๋ถ„๊ฐ„์€ ๋‹ค์šด๊ทธ๋ ˆ์ด๋“œํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘

๋นŒ๋“œ OK, ๊ฒฝ๊ณ  ์—†์Œ.

์‹ค์ œ ํ–‰๋™

์ด ํŒจํ‚ค์ง€๊ฐ€ ์‚ฌ์šฉ๋˜๋Š” ๋ชจ๋“  ๊ณณ์—์„œ ๊ฒฝ๊ณ :

export 'default' (imported as 'parse') was not found in 'html-react-parser'

๋ฒˆ์‹ ๋‹จ๊ณ„

๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฐ€์ ธ์˜ค๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

import parse from 'html-react-parser';

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

import * as parse from 'html-react-parser';

์ ˆ๋Œ€์ ์œผ๋กœ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด์ „ ํ‘œ๊ธฐ๋ฒ•์ด ๋ฌธ์„œ์— ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๊ฒƒ์ด ์˜๋„๋œ ๋ฐฉ์‹์ด๋ผ๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ›„์ž์˜ ํ˜•์‹์ด ํ•ด๊ฒฐ์ฑ…์ด ์•„๋‹ˆ๋ผ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ธ ์ด์œ ์ž…๋‹ˆ๋‹ค.

์žฌํ˜„ ๊ฐ€๋Šฅํ•œ ๋ฐ๋ชจ

์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ •๋ง ๋ณต์žกํ•œ ํ”„๋กœ์ ํŠธ์ž…๋‹ˆ๋‹ค. ์ œ๊ฐ€ ํ•  ์ˆ˜ ์žˆ์„์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ •๋ง์ •๋ง์ •๋ง์ •๋งํ•„์š” ํ•˜๋‹ค๋ฉด ํ•ด๋ณผ์ˆ˜์žˆ์ง€๋งŒ ์†”์งํžˆ์ด๋ฌธ์ œ๋Š”์ด๋ฏธ๋งŽ์€์‹œ๊ฐ„์„๋‚ญ๋น„ํ•˜๊ณ ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜ž

ํ™˜๊ฒฝ

  • ๋ฒ„์ „: 1.2.4
  • ํ”Œ๋žซํผ: ์œˆ๋„์šฐ 10
  • ๋ธŒ๋ผ์šฐ์ €: ํŒŒ์ด์–ดํญ์Šค 89

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

@thany ๋ฌธ์ œ๋กœ ์ธํ•ด ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ webpack ๊ตฌ์„ฑ ์„ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๋ถ€ํ™œ์ ˆ ์ดํ›„์— ํ•ด๋ด์•ผ๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ทธ ํŠธ๋ฆญ์„ ํ–ˆ๋‹ค! ๐Ÿ˜€

ํ–ฅํ›„ ์ฐธ์กฐ๋ฅผ ์œ„ํ•ด ๋‹ค์Œ์œผ๋กœ ์ด๋™ํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.

resolve: {
  // ...
  mainFields: ['main', 'module'],
}

์šฐ๋ฆฌ์˜ ๊ฒฝ์šฐ ๋ธŒ๋ผ์šฐ์ €๋กœ ์ด๋™ํ•˜๋Š” ์ผ๋ฐ˜ ๋ชจ๋“ˆ ๋Œ€์‹  SSR ๋ชฉ์ ์„ ์œ„ํ•œ ๋ชจ๋“ˆ๋กœ ๋นŒ๋“œ๋ฉ๋‹ˆ๋‹ค.

์ง€๊ธˆ๋„ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ํ•ด๊ฒฐ์ฑ…์ž…๋‹ˆ๊นŒ ์•„๋‹ˆ๋ฉด ๋‹จ์ˆœํžˆ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๊นŒ? ์ด๊ฒƒ์ด ์—ฌ์ „ํžˆ ์ ์ ˆํ•œ ์†”๋ฃจ์…˜์ด ํ•„์š”ํ•œ์ง€ ๋˜๋Š” ์œ„์˜ ๊ฒƒ์ด ์‹ค์ œ ์ ์ ˆํ•œ ์†”๋ฃจ์…˜์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ง€๊ธˆ๊นŒ์ง€ index.mjs ๋ณ€๊ฒฝ๊ณผ ๊ด€๋ จ๋œ ๋งŽ์€ ๋ฌธ์ œ๋ฅผ ๋ณด์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค(์‹ค์ œ๋กœ ๋ฌด์–ธ๊ฐ€๋ฅผ ๊นจ๋œจ๋ฆฐ ๊ฒฝ์šฐ ์ œ์™ธ). ๋‚˜๋Š” ์ด๊ฒƒ์ด ๋” ๋ณต์žกํ•œ ์›นํŒฉ ๊ตฌ์„ฑ์„ ๊ฐ€์ง„ ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ณตํ‰ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์ด๊ฒƒ์ด ์ ์ ˆํ•œ ํ•ด๊ฒฐ์ฑ…์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ์‹œ๋‹ค.

@thany README.md ์ด๊ฒƒ์„ ๋ฌธ์„œํ™”ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ์ด ๋ฌธ์ œ๋ฅผ ๋‹ซ์•„๋„ ๋ ๊นŒ์š”?

๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์Šต๋‹ˆ๋‹ค. ๋‹ซ๊ธฐ ์ข‹์•„์š” ๐Ÿ‘๐Ÿป

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