ํ”„๋ก ํŠธ์—”๋“œ ๋นŒ๋“œ ์‹œ์Šคํ…œ ์™„๋ฒฝ ๊ฐ€์ด๋“œ - Part.1: ๋ชจ๋“ˆ ์‹œ์Šคํ…œ

"JS ๋นŒ๋“œ ์‹œ์Šคํ…œ, ์•„์ง๋„ ํ—ท๊ฐˆ๋ฆฌ์„ธ์š”?" ๋“ค์–ด๋„ ์™€๋‹ฟ์ง€ ์•Š์•˜๋˜ JS ๋นŒ๋“œ ์‹œ์Šคํ…œ์˜ ๊ฐœ๋…๊ณผ ์‹ค์Šต์„ ํ•˜๋‚˜๋กœ!

(5.0) ์ˆ˜๊ฐ•ํ‰ 23๊ฐœ

์ˆ˜๊ฐ•์ƒ 216๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
ํ•ต์‹ฌ์›๋ฆฌ
ํ•ต์‹ฌ์›๋ฆฌ
์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
ํ•ต์‹ฌ์›๋ฆฌ
ํ•ต์‹ฌ์›๋ฆฌ

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

5.0

5.0

์„œ์ •์šฐ

98% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

๋ฒˆ๋“ค๋Ÿฌ๋Š” webpack, vite ์ •๋„์˜ ์–•์€ ๊นŠ์ด๋กœ๋งŒ ์•Œ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ๊ฐ•์˜ ๋“ฃ๊ณ  ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

5.0

Seo Tr

91% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์—์„œ ๋†“์น˜๊ธฐ ์‰ฌ์šด ๋ถ€๋ถ„๋“ค์„ ๋ช…ํ™•ํ•˜๊ณ  ์‰ฝ๊ฒŒ ์„ค๋ช…์„ ํ•ด์ฃผ์‹œ๋„ค์š”. ๋ชจ๋“ˆ์‹œ์Šคํ…œ์„ ๋Œ€์ถฉ๋Œ€์ถฉ ์•Œ๊ณ  ๋„˜์–ด๊ฐ€๊ธฐ ์‰ฌ์šด๋ฐ ๊ฐœ๋…๋ถ€ํ„ฐ ์ž์„ธํžˆ ๋‚˜์™€์žˆ์–ด์„œ ํ•ด๋‹น๋ถ€๋ถ„์—์„œ ์• ๋งคํ•˜๊ฒŒ ์•Œ๊ณ ์žˆ๋‹ค๋ฉด ๊ฐ•์ถ”์ž…๋‹ˆ๋‹ค. ์•„๋Š”๊ฒƒ๊ณผ ๋ชจ๋ฅด๋Š”๊ฒƒ์€ ํฐ ์ฐจ์ด๊ฐ€ ์žˆ๋Š”๋ฐ ์‹œ๊ฐ„๋‚ด์„œ ๋ฏธ๋ฆฌ ๊ณต๋ถ€ํ• ๊ฑธ ์‹ถ์—ˆ๋„ค์š”

5.0

chaeyeon

35% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๋Š˜ ํ—ท๊ฐˆ๋ ธ๋˜ JS ๋ชจ๋“ˆ ์‹œ์Šคํ…œโ€ฆ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ์ •๋ฆฌ๋˜๊ณ  ์žˆ๋Š” ๊ฑฐ ๊ฐ™์•„์š”. CommonJS, AMD, ESM, UMD ๊ฐœ๋…์€ ๋ฌผ๋ก , ์™œ ๊ทธ๋Ÿฐ ๊ตฌ์กฐ๊ฐ€ ์ƒ๊ฒจ๋‚ฌ๋Š”์ง€ ์—ญ์‚ฌ์ ์ธ ๋งฅ๋ฝ๊นŒ์ง€ ์„ค๋ช…ํ•ด์ฃผ์…”์„œ ๋จธ๋ฆฌ์— ์ฒด๊ณ„๊ฐ€ ์žกํ˜€๊ฐ€๊ณ  ์žˆ๋Š” ์ค‘์ž…๋‹ˆ๋‹ค. ํŠนํžˆ Webpack, Vite ๊ฐ™์€ ์ตœ์‹  ๋„๊ตฌ์—์„œ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์ด ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€๋„ ์‹ค์ œ ์„ค์ • ํŒŒ์ผ์„ ๋œฏ์–ด๋ณด๋ฉฐ ์•Œ๋ ค์ค˜์„œ, ๋„๊ตฌ์— ๋Œ๋ ค ๋‹ค๋‹ˆ๋˜ ์ œ ์ž์‹ ์„ ์„ฑ์ฐฐํ•˜๊ณ  ๊ฐ‘๋‹ˆ๋‹ค ใ…Žใ…Ž ๋‚จ์€ ๊ฐ•์˜๋„ ์—ด์‹ฌํžˆ ๋“ค์œผ๋ฉด์„œ ๋ฌด๋Ÿญ๋ฌด๋Ÿญ ์„ฑ์žฅํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ฐ•์˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค :)

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • JS ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์˜ ๋ฐœ์ „ ๊ณผ์ •๊ณผ CJS, AMD, ESM, UMD ๊นŠ์ด ์žˆ๋Š” ๋™์ž‘ ์›๋ฆฌ

  • require, import, define ํ—ท๊ฐˆ๋ ธ๋˜ ๋ชจ๋“  ๋ฌธ๋ฒ•์„ ์‹œ๋‚˜๋ฆฌ์˜ค ๋ณ„ ์‹ค์Šต์œผ๋กœ ์ •๋ฆฌ

  • Vite, SWC, TypeScript, Webpack ๋“ฑ ์ตœ์‹  ๋„๊ตฌ์—์„œ์˜ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ ์™„์ „ ๋ถ„์„

  • ์ˆœํ™˜์ฐธ์กฐ, ์กฐ๊ฑด๋ถ€ ๋กœ๋”ฉ, ๋น„๋™๊ธฐ ๋ชจ๋“ˆ๊นŒ์ง€, ์‹ค์ œ๋กœ ๋ถ€๋”ชํžˆ๋Š” ๋ฌธ์ œ ํ•ด๊ฒฐ ๋…ธํ•˜์šฐ

๐Ÿ›  ํˆด์— ํœ˜๋‘˜๋ฆฌ์ง€ ์•Š๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ!

JS ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์„ ์ดํ•ดํ•˜๊ณ ๋‚˜๋ฉด, Webpack, Vite ๋Š” ๋” ์ด์ƒ ๋‘๋ ค์›€์˜ ๋Œ€์ƒ์ด ์•„๋‹™๋‹ˆ๋‹ค!

  • ์‹ค๋ฌด์—์„œ ๋ฒˆ๋“ค๋Ÿฌ, ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €, ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ๋ฅผ 100% ํ™œ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„  ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์˜ ์›๋ฆฌ๋ฅผ ์ •ํ™•ํžˆ ์ดํ•ดํ•˜๊ณ  ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.


  • ์–ด๋–ค ์ƒˆ๋กœ์šด ํˆด์ด ๋‚˜์™€๋„ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ ๊ฐœ๋…์ด ํ™•์‹คํ•˜๋‹ค๋ฉด ๋ˆ„๊ตฌ๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ๋„๊ตฌ๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


  • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ง์ ‘ ๋งŒ๋“ค๊ฑฐ๋‚˜ ๋ฐฐํฌํ•˜๋Š” ๊ฒฝ์šฐ์—๋„, CJS, ESM, UMD ๋นŒ๋“œ ์ „๋žต์„ ์•Œ์•„์•ผ ์˜ค๋ฅ˜ ์—†๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ™‹โ€โ™€ ์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š”!

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ธฐ์ดˆ ๋ถ€ํ„ฐ ์‹ค์ „๊นŒ์ง€ ์™„๋ฒฝํžˆ ์ดํ•ดํ•˜๊ณ , ์ž์‹ ์ด ์›ํ•˜๋Š”๋Œ€๋กœ ํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

CJS, ESM, AMD, UMD ๊ฐ€ ๋ญ”์ง€ ์•„์ง๋„ ์ดํ•ด ๋ชปํ•˜๋Š” ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž

Webpack, Vite, Rollup, Babel ๋“ฑ ๋นŒ๋“œ ๋„๊ตฌ์˜ ํ•ต์‹ฌ ๊ฐœ๋…์„ ์ดํ•ดํ•˜๊ณ  ์‹ค๋ฌด์—์„œ 100% ํ™œ์šฉํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž


๐Ÿš€ ์ˆ˜๊ฐ• ํ›„์—๋Š”

  • ES Module, CommonJS, AMD ๋“ฑ ๊ฐ ๋ฐฉ์‹์˜ ์ฐจ์ด๋ฅผ ํ™•์‹คํžˆ ์ดํ•ดํ•˜๊ณ , ์–ธ์ œ ์–ด๋””์„œ๋“  ์ ์ ˆํžˆ ์„ ํƒยท์‘์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

  • Vite, Rollup, Webpack, Babel ๋“ฑ ์ฃผ์š” ํˆด์˜ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ ์—ฐ๋™ ์›๋ฆฌ๋ฅผ ๊ฟฐ๋šซ์–ด ๋ณด๊ณ , ๋ณต์žกํ•œ ์„ค์ •๋„ ๋‘๋ ค์›€ ์—†์ด ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • JS ๋นŒ๋“œ ์‹œ์Šคํ…œ์„ ์ดํ•ดํ•˜๊ณ  ๋ฐฐํฌ ํŒŒ์ดํ”„๋ผ์ธ์—์„œ ๋ฐœ์ƒํ•˜๋Š” ๋ชจ๋“ˆ ์˜ค๋ฅ˜๋ฅผ ์‹ ์†ํžˆ ์ง„๋‹จยทํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


  • ๋ชจ๋“ˆ ์‹œ์Šคํ…œ๊ณผ ํˆด ์ฒด์ธ์˜ ์ข…ํ•ฉ์  ์ดํ•ด๋กœ, ํŒ€์˜ ์•„ํ‚คํ…์ฒ˜ ๊ฒฐ์ •์— ์ฃผ๋„์ ์œผ๋กœ ์ฐธ์—ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๐Ÿ‘จโ€๐Ÿซ ์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

1. JS ๋ชจ๋“ˆ์‹œ์Šคํ…œ์˜ ๋ฐœ์ „์„ ํ•œ ๊ฐ•์˜๋กœ

CJS๋ถ€ํ„ฐ ESM๊นŒ์ง€, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์˜ ๋ฐœ์ „๊ณผ์ •์„ ์‹œ๊ฐ„ ์ˆœ์œผ๋กœ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

  • AMD๋Š” ์™œ CJS์™€ ๋ถ„๋ฆฌ๋์„๊นŒ?

  • Node.js๊ฐ€ CommonJS๋ฅผ ์ฑ„ํƒํ•œ ์ด์œ 

  • UMD๊ฐ€ ํ•ด๊ฒฐํ•˜๋ ค๊ณ  ํ–ˆ๋˜ ๋ฌธ์ œ

  • Webpack, Babel ์˜ ๋“ฑ์žฅ ์ด์œ 



2. ๊ฐ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์˜ ๋™์ž‘ ์›๋ฆฌ์™€ ์‹ค์Šต

require, define, import ๊ฐ€ ์‹ค์ œ๋กœ ์–ด๋–ค ๊ตฌ์กฐ๋กœ ๋™์ž‘ํ•˜๋Š”์ง€ ์ง์ ‘ ๋ˆˆ์œผ๋กœ ํ™•์ธํ•˜๊ณ  ์‹ค์Šตํ•ด๋ด…๋‹ˆ๋‹ค.

  • CommonJS
    โ†’ ๋ชจ๋“ˆ ์ŠคํŽ™, ํŒจํ‚ค์ง€ ์ŠคํŽ™ ์†Œ๊ฐœ


    โ†’ CJS ๋™์ž‘ ์›๋ฆฌ Deep Dive
    โ†’ Resolution~Caching ์ „ ๊ณผ์ • ์„ค๋ช…
    โ†’ ๋™์ž‘์›๋ฆฌ ๊ธฐ๋ฐ˜ CJS ์‹ค์Šต (์ˆœํ™˜์ฐธ์กฐ ๋“ฑ)
    โ†’ CJS๋กœ ๋งŒ๋“ค์–ด์ง„ ํŒจํ‚ค์ง€ ๋ถ„์„

  • AMD


    โ†’ define ํ•จ์ˆ˜, ๋น„๋™๊ธฐ ๋ชจ๋“ˆ ๋กœ๋”ฉ ํ๋ฆ„
    โ†’ RequireJS๋ฅผ ํ™œ์šฉํ•œ AMD ์‹ค์Šต

  • ES Module


    โ†’ .mjs, export ์ข…๋ฅ˜, ๋™์  import ๋“ฑ ์†Œ๊ฐœ


    โ†’ Parsing~Evaluation ํ๋ฆ„ Deep Dive
    โ†’ ๋™์ž‘์›๋ฆฌ ๊ธฐ๋ฐ˜ ESM ์‹ค์Šต
    โ†’ ๋ชจ๋“ˆ ๊ทธ๋ž˜ํ”„ ์‹œ๊ฐํ™”
    โ†’ ์ˆœํ™˜์ฐธ์กฐ ์„ค๋ช… ๋ฐ CJS์™€ ๋น„๊ต

  • UMD
    โ†’ UMD ์†Œ๊ฐœ
    โ†’

    ๋ธŒ๋ผ์šฐ์ € & Node.js ์–‘์ชฝ ํ˜ธํ™˜
    โ†’ ๋ฒ”์šฉ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‹ค์Šต



๐Ÿงช ๊ฐ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์˜ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ๊ณ๋“ค์ด๋ฉฐ ์ง์ ‘ ์‹ค์Šตํ•˜๋ฉด์„œ, ์ถ”์ƒ์ ์ธ ๊ฐœ๋…์ด ์•„๋‹Œ ์‹ค์ „ ์ง€์‹์„ ์Šต๋“ํ•ฉ๋‹ˆ๋‹ค.


3. ๊ฐœ๋ฐœ ๋„๊ตฌ ๋ณ„ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ ์‹ค์ „ ์‹ค์Šต

Webpack, Vite, Babel ๋“ฑ์˜ ํ™˜๊ฒฝ์—์„œ ์–ด๋–ค ์›๋ฆฌ์™€ ๊ณผ์ •์œผ๋กœ ๋ชจ๋“ˆ์„ ๋นŒ๋“œํ•˜๋Š”์ง€ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค.

  • Package.json

  • Typescript (tsc)

  • Babel


  • Webpack

  • Rollup

  • Vite

  • ESLint

๐Ÿ”ง ํˆด ์„ค์ •์„ โ€œ์™ธ์šฐ๋Š”โ€ ๊ฒƒ์ด ์•„๋‹Œ, ๋‚ด๋ถ€ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ โ€œ์„ค๊ณ„โ€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜๋ฅผ ๋งŒ๋“  ์‚ฌ๋žŒ


์œ ๋™๊ท 

  • (์ „) ๋ผ์ธ ํŒŒ์ด๋‚ธ์…œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

  • ์‚ผ์„ฑ SSAFY, ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋“ฑ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๊ฐ•์˜

  • ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™” ๊ฐ•์˜ ์ œ์ž‘ ๋ฐ ์ฑ… ์ถœํŒ

  • ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์›จ์–ด 393ํ˜ธ(JS ์ฃผ์ œ), 392ํ˜ธ(๋ธ”๋ก์ฒด์ธ ์ฃผ์ œ) ๊ธฐ๊ณ 

Rafael

  • (ํ˜„) ์นด์นด์˜คOO ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž


๐Ÿคทโ€โ™€ "๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด ๋ฐฐํฌํ•˜๋ ค ํ–ˆ๋Š”๋ฐ, ๋ˆ„๊ตฐ๊ฐ€๋Š” ๋˜๊ณ  ๋ˆ„๊ตฐ๊ฐ€๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค."
๐Ÿคทโ€โ™‚ "Webpack, Vite ์„ค์ •์„ ์ธํ„ฐ๋„ท ๋ณด๊ณ  ํ•˜๊ธด ํ–ˆ๋Š”๋ฐ, ์‚ฌ์‹ค ๋ฌด์Šจ ์˜๋ฏธ์ธ์ง€ ๋ชจ๋ฅด๊ฒ ์–ด์š”."
๐Ÿคท "import/export, require/module.exports๊ฐ€ ๋’ค์—‰์ผœ ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์–ด๋–ป๊ฒŒ ์ •๋ฆฌํ•˜์ฃ ?"

9๋…„ ๋„˜๊ฒŒ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ๊ณผ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค๊ณ„, ๋ฒˆ๋“ค๋Ÿฌ ์ตœ์ ํ™”๋ฅผ ํ•ด์˜ค๋ฉด์„œ,
์ด๋Ÿฐ ์งˆ๋ฌธ์„ ํŒ€์—์„œ ์ˆ˜๋„ ์—†์ด ๋ฐ›์•„์™”์Šต๋‹ˆ๋‹ค.

๋Œ€๋ถ€๋ถ„์˜ ๊ฐœ๋ฐœ์ž๋“ค์€ ํˆด ์‚ฌ์šฉ๋ฒ•์€ ์•Œ์ง€๋งŒ, ์™œ ๊ทธ๋ ‡๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€๋Š” ๊นŠ๊ฒŒ ์ดํ•ดํ•˜์ง€ ์•Š๊ณ  ๋„˜์–ด๊ฐ€๊ธฐ ๊ธ‰๊ธ‰ํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‹ค ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๊ฑฐ๋‚˜ ์ปค์Šคํ…€์ด ํ•„์š”ํ•œ ์ˆœ๊ฐ„ ๋ฌด๋„ˆ์ง€๊ฒŒ ๋˜์ฃ .

์ €ํฌ๋Š” ์ด๋Ÿฐ ๋‹ต๋‹ตํ•จ์„ ํ•ด๊ฒฐํ•ด๋ณด๊ณ ์ž ์ด ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜๋Š” ๋‹จ์ˆœํžˆ ๋ชจ๋“ˆ์„ ์„ค๋ช…ํ•˜๋Š” ๊ฐ•์˜๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.
์‹ค์ œ๋กœ ์‹ค๋ฌด์—์„œ "์™œ ์ด ์„ค์ •์„ ํ•ด์•ผ ํ•˜๊ณ ", "์™œ ์ด๋Ÿฐ ์ถฉ๋Œ์ด ์ผ์–ด๋‚˜๋Š”๊ฐ€"์— ๋Œ€ํ•œ
์ง„์งœ ์ด์œ ์™€ ํ•ด๊ฒฐ๋ฒ•์„ ์•Œ๋ ค์ฃผ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

ํˆด์„ ์ž์œ ๋กญ๊ฒŒ ์“ฐ๊ณ  ์‹ถ์€ ์‹ค๋ฌด ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ด๋ณด๋‹ค ๋” ํ•„์š”ํ•œ ๊ฐ•์˜๋Š” ์—†์„ ๊ฒ๋‹ˆ๋‹ค.

๊ถ๊ธˆํ•œ ์ ์ด ์žˆ๋‚˜์š”?

Q. ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์„ ์™œ ๋ฐฐ์›Œ์•ผ ํ•˜๋‚˜์š”?

์‹ค๋ฌด์—์„œ require์™€ import๋ฅผ ํ˜ผ์šฉํ•˜๋ฉด ๋ฐ˜๋“œ์‹œ ์ถฉ๋Œ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์˜ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•ด์•ผ ์—๋Ÿฌ ์—†์ด ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ์ดˆ๋ณด์ž๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋‚˜์š”?

๋„ค, ์ถฉ๋ถ„ํžˆ ๋“ค์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜๋Š” โ€œ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์ด๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ์ƒ์†Œํ•œ ๋ถ„โ€๋„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“ˆ์˜ ๊ฐœ๋… ์ž์ฒด๋ถ€ํ„ฐ ์ฐจ๊ทผํžˆ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

import, export, require ๊ฐ™์€ ๋ฌธ๋ฒ•์„ ํ•œ ๋ฒˆ์ด๋ผ๋„ ์จ๋ณด์‹  ๋ถ„์ด๋ผ๋ฉด OK
๋ฒˆ๋“ค๋Ÿฌ(Webpack, Vite)๋ฅผ ์จ๋ดค์ง€๋งŒ ์™œ ๊ทธ๋ ‡๊ฒŒ ์„ค์ •ํ•˜๋Š”์ง€๋Š” ๋ชจ๋ฅด๊ฒ ๋Š” ๋ถ„์ด๋ผ๋ฉด ๋” ์ข‹์Šต๋‹ˆ๋‹ค

์˜คํžˆ๋ ค ๋ชจ๋“ˆ ์‹œ์Šคํ…œ ๊ฐœ๋…์„ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ๋ถ„์ผ์ˆ˜๋ก โ€œ์™œ ์ด๊ฑธ ์จ์•ผ ํ•˜๋Š”์ง€โ€ ๋ช…ํ™•ํ•˜๊ฒŒ ์ดํ•ดํ•˜์‹ค ์ˆ˜
์žˆ์Šต๋‹ˆ๋‹ค

๊ฐ•์˜ ์ค‘ ๊ฐœ๋…์ด ๋‚˜์˜ฌ ๋•Œ๋งˆ๋‹ค ์‹œ๊ฐํ™”๋œ ํ๋ฆ„๋„, ์˜ˆ์ œ ์ฝ”๋“œ, ์‹ค์Šต์œผ๋กœ ๋ฐ˜๋ณต ์„ค๋ช…ํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Q. ์–ด๋–ค ์‹ค์Šต์„ ํ•˜๋‚˜์š”?

2์žฅ์—์„  ๊ฐ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์„ ๋ฐฐ์šธ ๋• ์ง์ ‘ ๋ชจ๋“ˆ์„ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ค๋ฌด์™€ ๋น„์Šทํ•œ ํ™˜๊ฒฝ์—์„œ์˜ ์‹ค์Šต์„ ํ†ตํ•ด ์˜ค๋ฅ˜๋ฅผ ๊ฐ™์ด ํ•ด๊ฒฐํ•ด ๋‚˜๊ฐ‘๋‹ˆ๋‹ค.

3์žฅ์—์„  ์—ฌ๋Ÿฌ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœํ™˜๊ฒฝ ๋„๊ตฌ ํˆด๋“ค์—์„œ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์„ ์ง์ ‘ ๊ตฌํ˜„ํ•ด๊ฐ€๋ฉฐ ๋งˆ์ฃผํ•  ์ˆ˜ ์žˆ๋Š” ์ด์Šˆ๋ฅผ ํ•ด๊ฒฐํ•ด๋‚˜๊ฐ‘๋‹ˆ๋‹ค.

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ๊ฐ€๋Šฅ ํ™˜๊ฒฝ

  • ์šด์˜ ์ฒด์ œ ๋ฐ ๋ฒ„์ „(OS): Windows, macOS

  • ์‚ฌ์šฉ ๋„๊ตฌ: ์ฝ”๋“œ ์—๋””ํ„ฐ (VS Code, cursor, Webstorm ๋“ฑ ๋ฌด๊ด€)

    • ๊ฐ•์˜์—์„  VS Code๋กœ ์„ค๋ช…

ํ•™์Šต ์ž๋ฃŒ

  • ๊ฐ•์˜ ์‹œ PPT๋กœ ์ง„ํ–‰๋˜๋Š” ๋ถ€๋ถ„์€ PDF๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

  • ์‹ค์Šต ์˜ˆ์ œ๋Š” github ์œผ๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜๋Š” ์‹œ๋ฆฌ์ฆˆ ๊ฐ•์˜์˜ ์ฒซ ๋ฒˆ์งธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

  • ์‹œ๋ฆฌ์ฆˆ ๊ฐ•์˜๋กœ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €, ๋ฒˆ๋“ค๋Ÿฌ, ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ ๊ฐ•์˜๊ฐ€ ์ด์–ด์„œ ์ถœ์‹œ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค!


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์ดํ•ดํ•˜๊ณ  ๊ณ ์ˆ˜๊ฐ€ ๋˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • CJS, AMD, UMD, ESM ๋ง๋กœ๋งŒ ๋“ค์—ˆ์ง€, ์ œ๋Œ€๋กœ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๋Š” ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž

  • ๋นŒ๋“œ ๋„๊ตฌ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ์›๋ฆฌ๋ถ€ํ„ฐ ์‹ค์ „๊นŒ์ง€ ์ดํ•ดํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • Webpack๊ณผ Babel ๋“ฑ ๋นŒ๋“œ ํˆด๊ณผ ์”จ๋ฆ„ํ•˜๋А๋ผ ์‹œ๊ฐ„์„ ๋งŽ์ด ๋‚ญ๋น„ํ•˜์‹  ๋ถ„

  • module not found, circular dependency ์—๋Ÿฌ์— ์‹œ๋‹ฌ๋ ค๋ณธ ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • JavaScript

์•ˆ๋…•ํ•˜์„ธ์š”
Rafael์ž…๋‹ˆ๋‹ค.

216

๋ช…

์ˆ˜๊ฐ•์ƒ

23

๊ฐœ

์ˆ˜๊ฐ•ํ‰

1

๊ฐœ

๋‹ต๋ณ€

5.0

์ 

๊ฐ•์˜ ํ‰์ 

1

๊ฐœ

๊ฐ•์˜

(ํ˜„) ์นด์นด์˜ค๋ชจ๋นŒ๋ฆฌํ‹ฐ

(์ „) ๋ฒ„์ฆˆ๋‹ˆ

(์ „) ๋กฏ๋ฐ์‡ผํ•‘ e์ปค๋จธ์Šค์‚ฌ์—…๋ณธ๋ถ€

 

๋”๋ณด๊ธฐ

๊ณต๋™ ์ง€์‹๊ณต์œ ์ž

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

43๊ฐœ โˆ™ (5์‹œ๊ฐ„ 12๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

23๊ฐœ

5.0

23๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • chaeyeon๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    chaeyeon

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    35% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๋Š˜ ํ—ท๊ฐˆ๋ ธ๋˜ JS ๋ชจ๋“ˆ ์‹œ์Šคํ…œโ€ฆ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ์ •๋ฆฌ๋˜๊ณ  ์žˆ๋Š” ๊ฑฐ ๊ฐ™์•„์š”. CommonJS, AMD, ESM, UMD ๊ฐœ๋…์€ ๋ฌผ๋ก , ์™œ ๊ทธ๋Ÿฐ ๊ตฌ์กฐ๊ฐ€ ์ƒ๊ฒจ๋‚ฌ๋Š”์ง€ ์—ญ์‚ฌ์ ์ธ ๋งฅ๋ฝ๊นŒ์ง€ ์„ค๋ช…ํ•ด์ฃผ์…”์„œ ๋จธ๋ฆฌ์— ์ฒด๊ณ„๊ฐ€ ์žกํ˜€๊ฐ€๊ณ  ์žˆ๋Š” ์ค‘์ž…๋‹ˆ๋‹ค. ํŠนํžˆ Webpack, Vite ๊ฐ™์€ ์ตœ์‹  ๋„๊ตฌ์—์„œ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ์ด ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€๋„ ์‹ค์ œ ์„ค์ • ํŒŒ์ผ์„ ๋œฏ์–ด๋ณด๋ฉฐ ์•Œ๋ ค์ค˜์„œ, ๋„๊ตฌ์— ๋Œ๋ ค ๋‹ค๋‹ˆ๋˜ ์ œ ์ž์‹ ์„ ์„ฑ์ฐฐํ•˜๊ณ  ๊ฐ‘๋‹ˆ๋‹ค ใ…Žใ…Ž ๋‚จ์€ ๊ฐ•์˜๋„ ์—ด์‹ฌํžˆ ๋“ค์œผ๋ฉด์„œ ๋ฌด๋Ÿญ๋ฌด๋Ÿญ ์„ฑ์žฅํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ฐ•์˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค :)

    • ์„œ์ •์šฐ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      ์„œ์ •์šฐ

      ์ˆ˜๊ฐ•ํ‰ 5

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      98% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ๋ฒˆ๋“ค๋Ÿฌ๋Š” webpack, vite ์ •๋„์˜ ์–•์€ ๊นŠ์ด๋กœ๋งŒ ์•Œ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ๊ฐ•์˜ ๋“ฃ๊ณ  ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

      • Seo Tr๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        Seo Tr

        ์ˆ˜๊ฐ•ํ‰ 1

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        ์ˆ˜์ •๋จ

        5

        91% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์—์„œ ๋†“์น˜๊ธฐ ์‰ฌ์šด ๋ถ€๋ถ„๋“ค์„ ๋ช…ํ™•ํ•˜๊ณ  ์‰ฝ๊ฒŒ ์„ค๋ช…์„ ํ•ด์ฃผ์‹œ๋„ค์š”. ๋ชจ๋“ˆ์‹œ์Šคํ…œ์„ ๋Œ€์ถฉ๋Œ€์ถฉ ์•Œ๊ณ  ๋„˜์–ด๊ฐ€๊ธฐ ์‰ฌ์šด๋ฐ ๊ฐœ๋…๋ถ€ํ„ฐ ์ž์„ธํžˆ ๋‚˜์™€์žˆ์–ด์„œ ํ•ด๋‹น๋ถ€๋ถ„์—์„œ ์• ๋งคํ•˜๊ฒŒ ์•Œ๊ณ ์žˆ๋‹ค๋ฉด ๊ฐ•์ถ”์ž…๋‹ˆ๋‹ค. ์•„๋Š”๊ฒƒ๊ณผ ๋ชจ๋ฅด๋Š”๊ฒƒ์€ ํฐ ์ฐจ์ด๊ฐ€ ์žˆ๋Š”๋ฐ ์‹œ๊ฐ„๋‚ด์„œ ๋ฏธ๋ฆฌ ๊ณต๋ถ€ํ• ๊ฑธ ์‹ถ์—ˆ๋„ค์š”

        • ์œ ๋™๊ท ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          ์œ ๋™๊ท 

          ์ˆ˜๊ฐ•ํ‰ 1

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          17% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          • Rafael๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
            Rafael

            ์ˆ˜๊ฐ•ํ‰ 1

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

            12% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

            ๋น„์Šทํ•œ ๊ฐ•์˜

            ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            โ‚ฉ58,300