2021-08

skawnkkยท2021๋…„ 8์›” 21์ผ
2

๊ธฐ์ˆ ์•„ํ‹ฐํด&์˜์ƒ

๋ชฉ๋ก ๋ณด๊ธฐ
5/5

0820

์˜์‹์˜ ํ๋ฆ„๋Œ€๋กœ ๊ธ€์„ ์ฝ์—ˆ์Œ ๐Ÿคช
React๋ฅผ ์™œ ์“ฐ๋Š”๊ฐ€์— ๋Œ€ํ•ด ๊ณ ๋ฏผ
=> SPA, MPA์˜ ์ฐจ์ด์ 
=> SPA ๋‹จ์ ์„ ํ•ด๊ฒฐํ•˜๋Š” ์ฝ”๋“œ์Šคํ”Œ๋ฆฌํŒ…
=> ๋ ˆ์ด์ง€ ๋กœ๋”ฉ
=> ๊ณ ์ฐจํ•จ์ˆ˜์— ๋Œ€ํ•˜์—ฌ...

๐Ÿ’šReact+Webpack์—์„œ Code Splitting ์ ์šฉ๊ธฐ

SPA์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋‹ค๊ฐ€ ๋‹จ์ ์œผ๋กœ ํ•˜๋‚˜์˜ ๋ฒˆ๋“คํŒŒ์ผ๋กœ ํ•ฉ์ณ์ง„ ๊ทœ๋ชจ๊ฐ€ ํฐ JSํŒŒ์ผ์„ ๋ฐ›์•„์•ผ ํ•ด์„œ ์ดˆ๊ธฐ ๊ตฌ๋™ ์†๋„๊ฐ€ ๋Š๋ฆฌ๋‹ค๋Š” ์ ์ด ์žˆ์—ˆ๋‹ค. ์ด ๋‹จ์ ์„ ์›นํŒฉ ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…์œผ๋กœ ํ•ด๊ฒฐ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ์—์„œ ์•Œ์•„๋ณด๋‹ค๊ฐ€ ์ด ๊ธ€์„ ์ฝ๊ฒŒ ๋˜์—ˆ๋‹ค.

์ด ๊ธ€์„ ์ฝ๊ณ  ์›นํŒฉ์— ๋Œ€ํ•œ ์ดํ•ด๋„๊ฐ€ ์‚ด์ง ์˜ฌ๋ผ๊ฐ.
์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…์„ React.lazy๋กœ ์‚ฌ์šฉํ•ด๋ณด๊ธด ํ–ˆ๋Š”๋ฐ, ์—ฌ๊ธฐ์„  ์ด LazyLoading์„ ์ง์ ‘ ๊ตฌํ˜„ํ•˜์—ฌ ์‚ฌ์šฉํ–ˆ๋‹ค. HOC๋กœ ํ‘œํ˜„๋œ ๊ฒƒ์ด ์ธ์ƒ์ (Component๋ฅผ ์ธ์ž๋กœ ๋ฐ›์•„ ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜)

  • loadableComponents์— ์‚ฌ์šฉ๋œ HOC ์ฐธ๊ณ 
    : ์ปดํฌ๋„ŒํŠธ JSํŒŒ์ผ๋งŒ ๋ ˆ์ด์ง€ ๋กœ๋”ฉ์ด ๋˜๋Š”์ค„ ์•Œ์•˜๋Š”๋ฐ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋„ ํ•„์š”ํ•œ ์‹œ์ ์— ๋กœ๋”ฉํ•˜๋Š”๊ฒŒ ๊ฐ€๋Šฅํ•œ์ง€๋Š” ์ง€๊ธˆ ์•Œ์•˜์Œ ๐Ÿ˜ฎ
profile
Dev FE ๊ธฐ๋ก, ํ–‰๋™, ํšŒ๊ณ  ์œ ํ›„~ ๐Ÿ’œ

0๊ฐœ์˜ ๋Œ“๊ธ€