โœ๏ธ What I Learned/TIL

[TIL] npm vs npx vs yarn

Jiwon() 2023. 8. 15. 18:31

๐Ÿ‡ฐ๐Ÿ‡ท 20230815 TIL

Next.js ๊ธฐ์ดˆ ๊ฐ•์˜๋ฅผ ๋“ฃ๋˜ ์ค‘ ํ”„๋กœ์ ํŠธ create๋ฅผ npx๋กœ ํ•˜๊ธธ๋ž˜ npm๊ณผ ๋ญ๊ฐ€ ๋‹ค๋ฅด์ง€? ๊ทธ๋ ‡๋‹ค๋ฉด yarn์ด๋ž‘์€? ๊ถ๊ธˆํ•ด์ ธ์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ฐพ์•„๋ณด๊ณ  ์ •๋ฆฌํ•˜์˜€๋‹ค.


1. npm

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ Node.js์˜ ๊ธฐ๋ณธ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž

  • Node Package Manager๋ผ๋Š” ๋ง ๊ทธ๋Œ€๋กœ ๋…ธ๋“œ ํ™˜๊ฒฝ์—์„œ์˜ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ ์˜๋ฏธํ•œ๋‹ค.
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ™˜๊ฒฝ์—์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•  ๋•Œ node์™€ ํ•จ๊ป˜ ์„ค์น˜ํ•˜๋ผ๊ณ  ํ•˜๋Š” Getting Started๊ฐ€ ๋งŽ๊ณ  ์‚ฌ์šฉ ๋นˆ๋„๊ฐ€ ๋†’๋‹ค.
  • `npm install ๋ชจ๋“ˆ๋ช… -g` : npm์„ ํ†ตํ•ด -g ์˜ต์…˜์„ ์ฃผ๋ฉด ๋งค ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ๋ชจ๋“ˆ์„ ์„ค์น˜ํ•ด ์ค„ ํ•„์š”๊ฐ€ ์—†๊ณ  ๋‚ด ์ปดํ“จํ„ฐ ์•ˆ์—์„œ ๊ธ€๋กœ๋ฒŒํ•˜๊ฒŒ ๋ชจ๋“ˆ์ด ์„ค์น˜๋˜์–ด ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ๊ฐ™์€ ๋ชจ๋“ˆ์„ ๊ณต์œ ํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
  • ๋‹จ์ 
    1. ๋ชจ๋“ˆ์ด ์—…๋ฐ์ดํŠธ ๋˜์—ˆ๋Š”์ง€ ์•ˆ๋˜์—ˆ๋Š”์ง€ ํ™•์ธ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.
      • ๋ชจ๋“  ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ๋ชจ๋“ˆ์„ ์žฌ์„ค์น˜ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ, ํ•œ ๋ฒˆ ์„ค์น˜ํ•œ ๋ชจ๋“ˆ์„ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜์‹ํ•ด์„œ ๊ธ€๋กœ๋ฒŒ ๋ชจ๋“ˆ์„ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์žฌ์„ค์น˜ํ•˜์ง€ ์•Š์œผ๋ฉด ํ™•์ธ ์ž์ฒด๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.
    2. ์—…๋ฐ์ดํŠธ๋ฅผ ์ง„ํ–‰ํ–ˆ์„ ๋•Œ ๋ณ€๋™์‚ฌํ•ญ์ด ์ƒ๊ฒจ ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ์—๋„ ์˜ํ–ฅ์„ ๋ผ์น  ์ˆ˜ ์žˆ๋‹ค.
    3. create-react-app ๊ฐ™์€ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ์—๋Š” ์น˜๋ช…์ ์ด๋‹ค.

 

 


2. npx

Execute Npm Package Binaries์˜ ์ค„์ž„๋ง๋กœ, npm์— ์†ํ•ด ์žˆ๋Š” npm ํŒจํ‚ค์ง€ ์‹คํ–‰ ๋„๊ตฌ์ด๋‹ค.

  • npx๊ฐ€ ํŒจํ‚ค์ง€ '์‹คํ–‰ ๋„๊ตฌ'๋ผ๋Š” ๊ฒƒ์ด npm๊ณผ์˜ ํฐ ์ฐจ์ด์ ์ด์ž ์žฅ์ ์ด๋‹ค.
    • ๋ชจ๋“ˆ์„ ๋กœ์ปฌ์— ์ €์žฅํ•˜์ง€ ์•Š๊ณ , ๋งค๋ฒˆ ์ตœ์‹  ๋ฒ„์ „์˜ ํŒŒ์ผ๋งŒ์„ ์ž„์‹œ๋กœ ๋ถˆ๋Ÿฌ์™€ ์‹คํ–‰ ์‹œํ‚จ ํ›„์—, ๋‹ค์‹œ ๊ทธ ํŒŒ์ผ์€ ์—†์–ด์ง€๋Š” ๋ฐฉ์‹์œผ๋กœ ๋ชจ๋“ˆ์„ ์‹คํ–‰์‹œ์ผœ์ค€๋‹ค.
    • npx๋Š” ํ•ด๋‹น ํŒจํ‚ค์ง€๋ฅผ ์‹คํ–‰๋งŒ ๋˜๊ฒŒ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋ณ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๊ฐœ๋ฐœ์ž์˜ ์ž…์žฅ์—์„œ๋Š” ํฐ ์ฐจ์ด๊ฐ€ ์—†์ง€๋งŒ, ์‹คํ–‰ํ•˜๋Š” ์‚ฌ๋žŒ์˜ ์ž…์žฅ์—์„œ๋Š” ํฐ ์ฐจ์ด์ ์„ ๊ฐ–๋Š”๋‹ค.
  • create-react-app๊ณผ ๊ฐ™์€ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ๋ชจ๋“ˆ์— ํšจ๊ณผ์ ์ด๋‹ค.
    • ๋งค๋ฒˆ ์ตœ์‹  ๋ฒ„์ „๋งŒ์„ ๊ฐ€์ ธ์™€์„œ ์„ค์น˜ํ•ด์ฃผ๋ฏ€๋กœ ์ง€๊ธˆ ์–ด๋–ค ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š”์ง€์— ์—ฐ์—ฐํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค.

 

 


3. yarn

ํŽ˜์ด์Šค๋ถ์—์„œ ๋งŒ๋“  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋กœ, ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” npm๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.

  • npm์˜ ๋‹จ์ ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ๋งค๋‹ˆ์ € ํˆด์ด๋‹ค.
    • ์†๋„ : ๋‹ค์šด๋ฐ›์€ ํŒจํ‚ค์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹œ(cache)์— ์ €์žฅํ•˜์—ฌ, ์ค‘๋ณต๋œ ๋ฐ์ดํ„ฐ๋Š” ๋‹ค์šด๋กœ๋“œ ํ•˜์ง€ ์•Š๊ณ  ์บ์‹œ ๋ฐ์ดํ„ฐ๋ฅผ ํ™œ์šฉํ•จ์œผ๋กœ์จ ์ด๋ก ์ ์œผ๋กœ npm์— ๋น„ํ•ด ํŒจํ‚ค์ง€ ์„ค์น˜ ์†๋„๊ฐ€ ๋งค์šฐ ๋น ๋ฅด๋‹ค.
    • ์•ˆ์ •์„ฑ, ๋ณด์•ˆ์„ฑ : yarn์€ yarn.lock์ด๋‚˜ package.json์œผ๋กœ๋ถ€ํ„ฐ ์„ค์น˜๋งŒ ํ•˜๊ณ , yarn.lock์€ ๋ชจ๋“  ๋””๋ฐ”์ด์Šค์— ๊ฐ™์€ ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•˜๋Š” ๊ฒƒ์„ ๋ณด์žฅํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ๋ฒ„์ „์˜ ์ฐจ์ด๋กœ ์ƒ๊ธฐ๋Š” ๋ฒ„๊ทธ๋ฅผ ๋ฐฉ์ง€ํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.

 

 


์ฐธ๊ณ  ์‚ฌ์ดํŠธ

[Node] npm vs npx vs yarn

npm๊ณผ npx์˜ ์ฐจ์ด์— ๋Œ€ํ•ด์„œ

[๊ฐœ๋ฐœ์ƒ์‹] npm๊ณผ yarn