Contents

Package Manager

ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €

ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ•œ๋‹ค.

  • ์˜์กด์„ฑ ์„ค์น˜ / ์‚ญ์ œ / ์—…๋ฐ์ดํŠธ
  • ์˜์กด์„ฑ ๊ด€๋ฆฌ
  • ํŒจํ‚ค์ง€ ๋ฐฐํฌ
  • ์บ์‹ฑ
  • ๋ณด์™„

๋Œ€๋ถ€๋ถ„์˜ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๊ฐ€ ๊ธฐ๋Šฅ์ ์œผ๋กœ ๋น„์Šทํ•˜๊ฒŒ ๋ณด์ผ ์ˆ˜ ์žˆ์œผ๋‚˜, ๋‚ด๋ถ€์ ์œผ๋กœ๋Š” ๋งค์šฐ ๋‹ค๋ฅด๋‹ค. npm/ yarn classic์˜ ๊ฒฝ์šฐ node_modules๋ผ๋Š” ํด๋”์•ˆ์— flatํ•˜๊ฒŒ ์ €์žฅ๋˜๋Š” ๊ตฌ์กฐ๋กœ dependency๋ฅผ ์„ค์น˜ํ–ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฐฉ์‹์€ ๋น„ํšจ์œจ์ ์ด๊ณ  ๊นจ์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธธ ์ˆ˜๊ฐ€ ์žˆ๋‹ค.

pnpm, yarn berry๋Š” ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ๊ณ , ๋งŽ์€ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋“ค ์†์—์„œ ์šฐ๋ฆฌ์˜ ์›Œํฌํ”Œ๋กœ์šฐ์— ์•Œ๋งž๊ฒŒ ์„ ํƒํ•ด์•ผ ํ•  ์ˆœ๊ฐ„์ด ์™”๋‹ค.

NPM

npm์˜ ๋น„ํšจ์œจ์ ์ธ ์˜์กด์„ฑ ๊ฒ€์ƒ‰

npm ์€ ํŒŒ์ผ ์‹œ์Šคํ…œ์„ ์ด์šฉํ•ด์„œ ์˜์กด์„ฑ์„ ๊ด€๋ฆฌํ•œ๋‹ค. node_modules๋ผ๋Š” ํด๋” ๋‚ด์— ๋ชจ๋“  ์˜์กด์„ฑ์„ flatํ•˜๊ฒŒ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒŒ ํŠน์ง•์ธ๋ฐ ์ด๋Š” ๋น„ํšจ์œจ์ ์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด require('react') ๋ผ๋Š” ํŒจํ‚ค์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ณผ์ •์—์„œ, npm์€ ํ•ด๋‹น ํŒจํ‚ค์ง€๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด ๊ณ„์† ์ƒ์œ„ ๋””๋ ‰ํ† ๋ฆฌ์˜ node_modulesํด๋”๋ฅผ ํƒ์ƒ‰ํ•œ๋‹ค. ํŒจํ‚ค์ง€๋ฅผ ๋ฐ”๋กœ ์ฐพ์ง€ ๋ชปํ• ์ˆ˜๋„ ์žˆ๊ณ  ์ค‘๊ฐ„์— ์‹คํŒจํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

๋น„ํšจ์œจ์ ์ธ ์„ค์น˜

npm์—์„œ node_modules๋Š” ๋งค์šฐ ํฐ ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•œ๋‹ค. ์ถ”๊ฐ€๋กœ, ๋งค์šฐ ํฐ ๋””๋ ‰ํ„ฐ๋ฆฌ์ด๊ธฐ ๋•Œ๋ฌธ์— ์„ค์น˜๊ฐ€ ์œ ํšจํ•œ ์ง€ ๊ฒ€์ฆํ•˜๊ธฐ๊ฐ€ ์–ด๋ ต๋‹ค.

์œ ๋ น ์˜์กด์„ฑ

npm๊ณผ yarn 1.x์€ ์ค‘๋ณต๋˜์–ด ์„ค์น˜๋˜๋Š” ํŒจํ‚ค์ง€๋ฅผ ๋ง‰๊ธฐ ์œ„ํ•ด Hoisting ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•œ๋‹ค.

์œ„ ๊ทธ๋ฆผ์—์„œ ๋ณด๋ฉด A(1.0) / B(1.0)์€ ๋‘๋ฒˆ์”ฉ ์„ค์น˜๋˜๋ฏ€๋กœ ๊ณต๊ฐ„์„ ๋‚ญ๋น„ํ•˜๋ฏ€๋กœ ์˜ค๋ฅธ์ชฝ ๊ทธ๋ฆผ์ฒ˜๋Ÿผ flatํ•˜๊ฒŒ ํ•œ๋ฒˆ๋งŒ ์„ค์น˜ํ•˜๊ฒŒ ๋œ๋‹ค. ๊ทผ๋ฐ ์ด๋ ‡๊ฒŒ ๋˜๋ฉด ์ง์ ‘ ์„ค์น˜ํ•˜์ง€ ์•Š์€ ํŒจํ‚ค์ง€๋ฅผ requireํ•  ์ˆ˜ ์žˆ๊ณ  ์ด๋ฅผ Phantom Dependency๋ผ๊ณ  ํ•œ๋‹ค. B๋ผ๋Š” ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•˜์ง€ ์•Š์•˜์ง€๋งŒ, ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋‹ค๊ฐ€, A๋ผ๋Š” ํŒจํ‚ค์ง€๊ฐ€ ํ•„์š”์—†์–ด์ ธ ์‚ญ์ œํ•˜๊ฒŒ ๋  ๊ฒฝ์šฐ, B๋ผ๋Š” ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

Yarn 1.x

yarn์€ npm์˜ ๋น„ํšจ์œจ์ ์ธ ์„ค์น˜๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ–ˆ๋‹ค. yarn์€ npm ๊ธฐ๋ฐ˜์œผ๋กœ ์„ค๊ณ„ํ–ˆ์ง€๋งŒ, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜์˜€๋‹ค.

  • native monorepo ์ง€์› (npm7.x ์ดํ›„ ๋ฒ„์ „์—์„œ๋„ ์ง€์›ํ•œ๋‹ค.)
  • cache-aware ์„ค์น˜
  • ์˜คํ”„๋ผ์ธ ์บ์‹ฑ
  • lock files

Yarn Berry

Pnpm