๊ด€๋ฆฌ ๋ฉ”๋‰ด

Bin's Blog

npm vs yarn ๋ณธ๋ฌธ

JavaScript

npm vs yarn

hotIce 2023. 8. 5. 11:41
728x90

๐Ÿ“š npm๊ณผ yarn

๐Ÿ‘‰ npm๊ณผ yarn์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ์ธ ๋…ธ๋“œ(Node.js)์˜ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž๋‹ค. 

๐Ÿ‘‰ ์ „ ์„ธ๊ณ„์˜ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋งŒ๋“  ๋‹ค์–‘ํ•œ ํŒจํ‚ค์ง€๋ฅผ npm ์˜จ๋ผ์ธ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์˜ฌ๋ฆฌ๋ฉด npm, yarn๊ณผ ๊ฐ™์€ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž๋ฅผ ํ†ตํ•ด ์„ค์น˜ ๋ฐ ์‚ญ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค. 

๐Ÿ‘‰ ๊ทธ๋ฆฌ๊ณ  ๋ช…๋ น ์ค„ ์ธํ„ฐํŽ˜์ด์Šค(command-line interface, CLI)๋ฅผ ํ†ตํ•ด ํŒจํ‚ค์ง€ ์„ค์น˜ ๋ฐ ์‚ญ์ œ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํŒจํ‚ค์ง€ ๋ฒ„์ „ ๊ด€๋ฆฌ, ์˜์กด์„ฑ ๊ด€๋ฆฌ๋„ ํŽธ๋ฆฌํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

1๏ธโƒฃ npm

๐Ÿ‘‰ npm์€ ๋…ธ๋“œ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €(Node Package Manager)์˜ ์ค„์ž„๋ง๋กœ ๋…ธ๋“œ๋ฅผ ์„ค์น˜ํ•  ๋•Œ ์ž๋™์œผ๋กœ ์„ค์น˜๋˜๋Š” ๊ธฐ๋ณธ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž์ด๋‹ค. ํฌ๊ฒŒ ๋‘ ๊ฐ€์ง€ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.

 

1. ์ฒซ ๋ฒˆ์งธ ์—ญํ• ์€ ์˜จ๋ผ์ธ ํ”Œ๋žซํผ์ด๋‹ค. ์‚ฌ๋žŒ๋“ค์ด ๋…ธ๋“œ ํŒจํ‚ค์ง€๋ฅผ ๋งŒ๋“ค๊ณ , ์—…๋กœ๋“œํ•˜๊ณ , ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต์•ˆ์œผ๋กœ ๋ˆ„๊ตฌ๋‚˜ ์˜จ๋ผ์ธ ํ”Œ๋žซํผ(npm ๋ ˆ์ง€์ŠคํŠธ๋ฆฌ)์— ๊ฒŒ์‹œ๋œ ํŒจํ‚ค์ง€๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. 

2. ๋‘ ๋ฒˆ์งธ ์—ญํ• ์€ ๋ช…๋ น ์ค„ ์ธํ„ฐํŽ˜์ด์Šค์ด๋‹ค. ์˜จ๋ผ์ธ ํ”Œ๋žซํผ๊ณผ ์ƒํ˜ธ ์ž‘์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋ช…๋ น ์ค„ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ํŒจํ‚ค์ง€ ์„ค์น˜ ๋ฐ ์ œ๊ฑฐ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.

 

๐Ÿ”ง ์„ค์น˜

 

๐Ÿ‘‰ ๋…ธ๋“œ๋ฅผ ๋‹ค์šด๋กœ๋“œํ•˜๋ฉด npm์ด ์‹œ์Šคํ…œ์— ์ž๋™์œผ๋กœ ์„ค์น˜๋œ๋‹ค. ๋…ธ๋“œ ์„ค์น˜ ํ›„ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ช…๋ น์„ ํ†ตํ•ด npm์ด ์„ค์น˜๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜๊ณ  ๋ฒ„์ „์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

node -v
npm -v

 

2๏ธโƒฃ yarn

๐Ÿ‘‰ yarn์€ 2016๋…„ ํŽ˜์ด์Šค๋ถ์—์„œ ๊ฐœ๋ฐœํ•œ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž์ด๋‹ค. React์™€ ๊ฐ™์€ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ๊ฒช์—ˆ๋˜ ์–ด๋ ค์›€์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ๋˜์—ˆ๊ณ , npm registry(๋ชจ๋“ˆ ๋ณด๊ด€์†Œ)์™€ ํ˜ธํ™˜ํ•˜๋ฉด์„œ ์†๋„๋‚˜ ์•ˆ์ •์„ฑ ์ธก๋ฉด์—์„œ npm๋ณด๋‹ค ํ–ฅ์ƒ๋˜์—ˆ๋‹ค. (ํŽ˜์ด์Šค๋ถ์ด ๊ณต๊ฐœํ•œ article ์ฐธ๊ณ )

 

๐Ÿ”ง ์„ค์น˜

 

๐Ÿ‘‰ yarn์€ npm ํ†ตํ•ด ์„ค์น˜ํ•œ๋‹ค.

npm install yarn --global

๐Ÿ‘‰ ๋งฅ ์‚ฌ์šฉ์ž๋ผ๋ฉด brew๋ฅผ ํ†ตํ•ด ์„ค์น˜ํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

brew update
brew install yarn

 

๐Ÿ“– npm๊ณผ yarn์˜ ์ฐจ์ด์ 

1๏ธโƒฃ ์†๋„

๐Ÿ‘‰ npm๊ณผ yarn์˜ ์ฃผ์š” ์ฐจ์ด์  ์ค‘ ํ•˜๋‚˜๋Š” ํŒจํ‚ค์ง€ ์„ค์น˜ ํ”„๋กœ์„ธ์Šค๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. npm์€ ํŒจํ‚ค์ง€๋ฅผ ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์”ฉ ์ˆœ์ฐจ์ ์œผ๋กœ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ์— ๋น„ํ•ด yarn์€ ์—ฌ๋Ÿฌ ํŒจํ‚ค์ง€๋ฅผ ๋™์‹œ์— ๊ฐ€์ ธ์˜ค๊ณ  ์„ค์น˜ํ•˜๋„๋ก ์ตœ์ ํ™”๋˜์–ด ์žˆ์–ด ์†๋„ ์ธก๋ฉด์—์„œ yarn์ด npm๋ณด๋‹ค ๋น ๋ฅด๋‹ค.

 

2๏ธโƒฃ ๋ณด์•ˆ

๐Ÿ‘‰ yarn์€ ๋ณด์•ˆ ์ธก๋ฉด์—์„œ npm๋ณด๋‹ค ๋” ์•ˆ์ „ํ•œ ๊ฒƒ์œผ๋กœ ์•Œ๋ ค์ ธ ์žˆ๋‹ค. npm์€ ์ž๋™์œผ๋กœ ํŒจํ‚ค์ง€์— ํฌํ•จ๋œ ๋‹ค๋ฅธ ํŒจํ‚ค์ง€ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค. ์ด๋กœ ์ธํ•ด ๋ณด์•ˆ ์‹œ์Šคํ…œ์— ๋ช‡ ๊ฐ€์ง€ ์ทจ์•ฝ์„ฑ์ด ๋ฐœ์ƒํ•˜๋ฉฐ ๋‚˜์ค‘์— ์‹ฌ๊ฐํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฐ˜๋ฉด yarn์€ yarn.lock ๋˜๋Š” package.json ํŒŒ์ผ์— ์žˆ๋Š” ํŒŒ์ผ๋งŒ ์„ค์น˜ํ•œ๋‹ค. ๋ณด์•ˆ์€ yarn์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์ด์ง€๋งŒ ์ตœ๊ทผ npm์˜ ์—…๋ฐ์ดํŠธ์—์„œ npm์˜ ๋ณด์•ˆ ์—…๋ฐ์ดํŠธ๋„ ํฌ๊ฒŒ ํ–ฅ์ƒ๋˜์—ˆ๋‹ค.

 

3๏ธโƒฃ ๋ช…๋ น์–ด

๋ช…๋ น์–ด npm yarn
dependencies ์„ค์น˜ npm install yarn
ํŒจํ‚ค์ง€ ์„ค์น˜ npm install [ํŒจํ‚ค์ง€๋ช…] yarn add [ํŒจํ‚ค์ง€๋ช…]
dev ํŒจํ‚ค์ง€ ์„ค์น˜ npm install --save-dev [ํŒจํ‚ค์ง€๋ช…] yarn add --dev [ํŒจํ‚ค์ง€๋ช…]
๊ธ€๋กœ๋ฒŒ ํŒจํ‚ค์ง€ ์„ค์น˜ npm install --global[ํŒจํ‚ค์ง€๋ช…] yarn global add [ํŒจํ‚ค์ง€๋ช…]
ํŒจํ‚ค์ง€ ์ œ๊ฑฐ npm uninstall [ํŒจํ‚ค์ง€๋ช…] yarn remove [ํŒจํ‚ค์ง€๋ช…]
dev ํŒจํ‚ค์ง€ ์ œ๊ฑฐ npm uninstall --save-dev [ํŒจํ‚ค์ง€๋ช…] yarn remove [ํŒจํ‚ค์ง€๋ช…]
์—…๋ฐ์ดํŠธ npm update yarn upgrade
ํŒจํ‚ค์ง€ ์—…๋ฐ์ดํŠธ npm update [ํŒจํ‚ค์ง€๋ช…] yarn upgrade[ํŒจํ‚ค์ง€๋ช…]

 

4๏ธโƒฃ ๊ฒฐ๋ก 

๐Ÿ‘‰ npm๊ณผ yarn ๋ชจ๋‘ ์ข…์†์„ฑ์„ ๊ด€๋ฆฌํ•˜๊ณ  ํŒจํ‚ค์ง€๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์ข‹์€ ํˆด์ด๋‹ค. ๋‘˜ ๋‹ค ์ง€์†์ ์œผ๋กœ ๊ด€๋ฆฌ๋˜๊ณ  ์žˆ์œผ๋ฉฐ ํญ๋„“์€ ์‚ฌ์šฉ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ , ์—…๋ฐ์ดํŠธ๋ฅผ ํ†ตํ•ด ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ ๋•๋ถ„์— ๊ฑฐ์˜ ์ฐจ์ด๊ฐ€ ๋‚˜์ง€ ์•Š๋Š”๋‹ค. ๊ฒฐ๋ก ์ ์œผ๋กœ ๋‘˜ ์ค‘์— ๋ฌด์—‡์„ ์„ ํƒํ•ด์•ผ ํ• ์ง€๋Š” ๊ฐœ์ธ ์„ ํ˜ธ, ์„ฑ๋Šฅ(ํŒจํ‚ค์ง€ ์„ค์น˜ ์†๋„), ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๋‹ค. 

728x90

'JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

this Keyword  (0) 2023.08.30
๋ฒˆ๋“ค๋ง์ด๋ž€?  (0) 2023.08.26
XML  (0) 2023.07.31
ํ”„๋กœํ† ํƒ€์ž…  (0) 2023.07.15
์ฝœ๋ฐฑ ์ง€์˜ฅ(๊ธฐ๋ช… ํ•จ์ˆ˜)  (0) 2023.06.27