Yarn vs npm

์ •ํ™•ํ•˜๊ฒŒ ์„ค๋ช…ํ•˜์ง€ ๋ชปํ•˜๋˜ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ด๋ด์š”! Reference: npm-vs-yarn-choosing-the-right-package-manager

Before getting started

  • npm๊ณผ Yarn์€ ๋ชจ๋‘ ํ›Œ๋ฅญํ•œ Node.js, JavaScript package manager๋‹ค

  • ๊ทธ๋ ‡๋‹ค๋ฉด npm์ด ์ด๋ฏธ ์žˆ๋Š”๋ฐ Yarn์ด ๊ฐœ๋ฐœ๋œ ์ด์œ ๋Š” ๋ฌด์—‡์ผ๊นŒ?

    • Yarn์€ npm์˜ ๋Š๋ฆฐ package ์„ค์น˜ ์†๋„์™€ ๋ณด์•ˆ ์ด์Šˆ๋“ค์„ ํ•ด๊ฒฐํ•˜๊ณ ์ž Facebook์— ์˜ํ•ด ๋งŒ๋“ค์–ด์กŒ๋‹ค

  • ์ด ๊ธ€์—์„œ๋Š” ์ด ๋‘ package maganger๋ฅผ ๋น„๊ตํ•ด์„œ ์–ด๋–ค ๊ฒƒ์„ ์‚ฌ์šฉํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ์„ ๋„์™€์ฃผ๋„๋ก ํ•˜๊ฒ ๋‹ค

1. Parallel installation of packages

  • ํ•˜๋‚˜์˜ package๊ฐ€ ์„ค์น˜๋  ๋•Œ, ์ผ๋ จ์˜ ๊ณผ์ •์ด ๋”ฐ๋ผ์„œ ์ˆ˜ํ–‰๋˜๊ฒŒ ๋œ๋‹ค

  • ์—ฌ๋Ÿฌ๊ฐœ์˜ package๋“ค์„ ๋™์‹œ์— ์„ค์น˜ํ•  ๋•Œ,

    • npm์€ ํ•˜๋‚˜์˜ package๊ฐ€ ์™„์ „ํžˆ ์„ค์น˜๋˜๊ณ  ๋‚˜์„œ ๊ทธ ๋‹ค์Œ package๋ฅผ ์„ค์น˜ํ•œ๋‹ค

      • ์ฆ‰, npm์€ ๊ฐ๊ฐ์˜ package๋“ค์„ ์ˆœ์„œ๋Œ€๋กœ ์„ค์น˜ํ•œ๋‹ค

    • ๋ฐ˜๋ฉด์— Yarn์€ ์ด๋Ÿฌํ•œ ๊ณผ์ •์„ ๋ณ‘๋ ฌ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํšจ์œจ์„ฑ๊ณผ ์†๋„๊ฐ€ ๋” ์ข‹๋‹ค

์˜ˆ์‹œ๋กœ react๋ฅผ ๊ฐ๊ฐ์˜ package๋ฅผ ์„ค์น˜ํ–ˆ์„ ๋•Œ, ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ด์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค

  • npm - 3.572์ดˆ ์†Œ์š”

  • Yarn - 1.44์ดˆ ์†Œ์š”

์ฐธ๊ณ :Yarn & npm benchmarks

2. Automatic Lock file generation

  • npm๊ณผ Yarn๋ชจ๋‘ package.json file์„ ํ†ตํ•ด ์˜์กด์„ฑ์„ ๊ด€๋ฆฌํ•œ๋‹ค

  • ์ƒˆ๋กœ์šด dependency๋ฅผ ์„ค์น˜ํ•  ๋•Œ๋งˆ๋‹ค ํ•ด๋‹น dependency์˜ version์ด caret (^) ๊ธฐํ˜ธ๋กœ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค

    • ์ด๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ package๋ฅผ Install ํ•  ๋•Œ๋งˆ๋‹ค package manager๋Š” ๋” ์ตœ์‹  version์„ ์ฐพ๋Š”๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค

      • ๋” ์ตœ์‹  ๋ฒ„์ „์ด ์žˆ์œผ๋ฉด, package.json file์— ๋ช…์‹œ๋œ version์ด ์•„๋‹Œ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์„ค์น˜ํ•œ๋‹ค

    • ๋งŒ์•ฝ ์œ„์˜ ๋™์ž‘์„ ์›ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด,

      1. lock file ์„ ์ƒ์„ฑํ•˜์—ฌ ํŠน์ • version์„ ์„ค์น˜ํ•˜๋„๋ก ํ•˜๊ฑฐ๋‚˜

      2. carret (^) ๊ธฐํ˜ธ๋ฅผ ์ง€์šฐ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค

  • Yarn์€ ์ƒˆ๋กœ์šด dependency๊ฐ€ ์ถ”๊ฐ€๋  ๋•Œ๋งˆ๋‹ค ์ž๋™์ ์œผ๋กœ yarn.lock file์„ ์ƒ์„ฑํ•œ๋‹ค

    • package ์„ค์น˜ ์‹œ์  ๋‹น์‹œ ๋™์ผํ•œ version ์ •๋ณด๋ฅผ yarn.lock file์— ์ €์žฅํ•ด๋‘ ์œผ๋กœ์จ ์ƒˆ๋กœ์šด ํ˜ผ๊ฒฝ์„ ๊ตฌ์ถ•ํ•  ๋•Œ๋„ ๋™์ผํ•œ verson ์ •๋ณด๋ฅผ ๊ฐ€์ง„ package๋กœ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค

  • npm๋„ npm shrinkwwrap ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์˜์กด์„ฑ ๋ฒ„์ „์„ ๊ณ ์ •์‹œํ‚ค๋Š” lock file์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค

    • ํ•˜์ง€๋งŒ, ์ด ๋‘˜์˜ ์ฐจ์ด์ ์€ Yarn์€ ์–ธ์ œ๋‚˜ yarn.lock file์„ ์ƒ์„ฑํ•˜๊ณ  update ํ•˜๋Š” ๊ฒƒ์— ๋ฐ˜ํ•ด npm์€ lock file์„ default๋กœ ์ƒ์„ฑํ•˜์ง€ ์•Š๊ณ , npm-shrinkwrap.json file์ด ์กด์žฌํ•  ๋•Œ๋งŒ ๋‚ด์šฉ์„ update ํ•œ๋‹ค

    • npm v5.0 ์ดํ›„๋กœ๋Š” ์˜์กด์„ฑ ํŠธ๋ฆฌ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” package-lock.json ์„ ๋„์ž…ํ•˜์—ฌ npm์„ ์‚ฌ์šฉํ•˜์—ฌ package.json file ๋˜๋Š” node_modules tree๋ฅผ ์ˆ˜์ •ํ•˜๋ฉด package-lock.json file ์— ๊ธฐ๋กํ•˜๋„๋ก ํ•˜์˜€๋‹ค

      • ์ด๊ฒƒ์œผ๋กœ npm์˜ package ์„ค์น˜ ๊ณผ์ •๊ณผ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ, ์—ฌ์ „ํžˆ yarn์˜ ์†๋„๋ฅผ ๋”ฐ๋ผ์žก์ง€๋Š” ๋ชปํ•˜๊ณ  ์žˆ๋‹ค

3. Security

  • npm์€ package๋“ค์„ ์„ค์น˜ํ•˜๋Š” ๋„์ค‘์— ์ฝ”๋“œ๋ฅผ ์ฆ‰๊ฐ ์‹คํ–‰์‹œํ‚ค๋Š” ๊ฒƒ์„ ํ—ˆ์šฉํ•˜๊ณ , ์ด๊ฒƒ์œผ๋กœ ์ธํ•ด ๋ณด์•ˆ์  ์ทจ์•ฝ์„ฑ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค

    • ๋ฐ˜๋ฉด์—, Yarn์€ yarn.lock ๋˜๋Š” package.json์— ๋ช…์‹œ๋˜์–ด ์žˆ๋Š” file๋“ค๋งŒ ์„ค์น˜ํ•˜๊ณ , yarn.lock์„ ํ†ตํ•ด ๊ณ ์ •๋œ ์˜์กด์„ฑ ๋ฒ„์ „์„ ์„ค์น˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“  device์— ๊ฐ™์€ package๋ฅผ ์„ค์น˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— npm๋ณด๋‹ค ์•ˆ์ „ํ•˜๋‹ค

  • Yarn์€ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์ „์— checksum์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ค์น˜๋œ package๋“ค์˜ ๋ฌด๊ฒฐ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค

Wrap-up

  • ๋น ๋ฅด๊ณ , ์•ˆ์ „์„ฑ, ์‹ ๋ขฐ์„ฑ์„ ๊ฐ–๊ณ ์žˆ๋Š” Yarn์„ ์“ฐ์ž

Last updated