Front-End

npm & yarn & package.json

์™•๊ฐ€๐Ÿ‘ 2023. 6. 4. 18:32
728x90
๋ฐ˜์‘ํ˜•

JS๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ์ธ ๋…ธ๋“œ(Node.js)์˜ ํŒจํ‚ค์ง€(npm์— ์—…๋กœ๋“œ๋œ Node module) ๊ด€๋ฆฌ์ž์ž…๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ ์ค‘ ๋‹ค์–‘ํ•œ ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์šด๋กœ๋“œ, ์„ค์น˜ ์—…๋ฐ์ดํŠธ, ์˜์กด์„ฑ ๋“ฑ ๋ณต์žกํ•œ ์ƒํ™ฉ์ด ์ƒ๊ธฐ๊ธฐ ๋งˆ๋ จ์ธ๋ฐ,

์ž๋™ํ™”ํ•˜์—ฌ ํŽธ๋ฆฌํ•˜๊ณ  ์•ˆ์ „ํ•˜๊ฒŒ ๊ด€๋ฆฌํ•ด ์ฃผ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

 


 

 

npm

Node Package Manager๋กœ Node.js์˜ ๊ธฐ๋ณธ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž์ž…๋‹ˆ๋‹ค.

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

https://www.npmjs.com/

 

 


 

 

yarn

ํŽ˜์ด์Šค๋ถ์—์„œ ๊ฐœ๋ฐœํ•œ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž์ž…๋‹ˆ๋‹ค.

npm๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋‚˜ ์†๋„๋‚˜ ์•ˆ์ •์„ฑ ์ธก๋ฉด์—์„œ ํ–ฅ์ƒ๋˜์–ด npm์—์„œ ๋ณด์™„๋œ ํŒจํ‚ค์ง€๊ด€๋ฆฌ์ž๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

https://classic.yarnpkg.com/lang/en/

 

 


 

 

๋ช…๋ น์–ด

๋ช…๋ น์–ด npm yarn
์ดˆ๊ธฐํ™” npm init yarn init
package.json ํŒจํ‚ค์ง€ ์„ค์น˜ npm install yarn / yarn install
์˜์กด์„ฑ ์ถ”๊ฐ€ npm install --save [package name] yarn add [package name]
๊ฐœ๋ฐœ ์˜์กด์„ฑ์œผ๋กœ ์ถ”๊ฐ€ npm install --save-dev [package name] yarn add --dev [package name]
์ „์—ญ ์ˆ˜์ค€์œผ๋กœ ์ถ”๊ฐ€ npm install --global [package name] yarn global add [package name]
ํŒจํ‚ค์ง€ ์‚ญ์ œ npm uninstall --save [package name] yarn remove [package name]\
ํŒจํ‚ค์ง€ ์—…๋ฐ์ดํŠธ npm update [package name] yarn update [package name]
์ „์ฒด ์—…๋ฐ์ดํŠธ npm update yarn update

 

๋ช…๋ น์–ด ๋‹จ์ถ•

๋ช…๋ น์–ด ์›๋ž˜ ๋‹จ์ถ•
์ „์—ญ์„ค์น˜ global -g
์„ค์น˜ install i
์‚ญ์ œ uninstall uni
๊ฐœ๋ฐœ ์˜์กด์„ฑ --save-dev -D
์ •ํ™•ํ•œ ๋ฒ„์ „์œผ๋กœ ์„ค์นญ --save-exact -E
์„ ํƒ์„ฑ ์˜์กด์„ฑ --save-optional -O
ํŒจํ‚ค์ง€ ์‚ญ์ œํ•  ๋•Œ, uninstall ํ•˜๊ธฐ๋ณด๋‹ค๋Š” package.json ํŒŒ์ผ ์—ด์–ด์„œ ํ•ด๋‹น ํŒจํ‚ค์ง€ ์ง€์šฐ๊ณ  npm i๋ฅผ ์ฃผ๋กœ ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

 


 

 

package.json

๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฐฐํฌํ•œ ํŒจํ‚ค์ง€์— ๋Œ€ํ•ด ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ๊ด€๋ฆฌํ•˜๊ณ  ์„ค์น˜ํ•˜๊ธฐ ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•œ ํŒŒ์ผ์ž…๋‹ˆ๋‹ค.

npm์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ํ”„๋กœ์ ํŠธ์˜ ์˜์กด์„ฑ ๊ด€๋ฆฌ, ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ ๋ช…์„ธ๋ผ๊ณ  ๋ณด๋ฉด ๋ฉ๋‹ˆ๋‹ค.

  • ํ”„๋กœ์ ํŠธ๊ฐ€ ์˜์กดํ•˜๋Š” ํŒจํ‚ค์ง€ ๋ฆฌ์ŠคํŠธ
  • ํŒจํ‚ค์ง€ ๋ฒ„์ „ ๋ช…์‹œ
  • ๋‹ค๋ฅธ ํ™˜๊ฒฝ์—์„œ๋„ ๋นŒ๋“œ๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜์—ฌ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๊ฐ€ ์‰ฝ๊ฒŒ ์‚ฌ์šฉ

ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•˜๋ฉด node_modules ํด๋”์— ์ €์žฅ๋˜๋Š”๋ฐ,
์ด ํด๋”๋ฅผ ํ†ต์ฑ„๋กœ ๊ด€๋ฆฌํ•˜๊ธฐ์—๋Š” ๋ฌด๊ฒ๊ธฐ ๋•Œ๋ฌธ์— package.json ํŒŒ์ผ๋งŒ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

 

package.jsonํŒŒ์ผ ์„ธํŒ… ํ›„, npm i ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•˜๊ฒŒ ๋˜๋ฉด ํ•ด๋‹น ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํŒจํ‚ค์ง€๊ฐ€ ์ „๋ถ€ ์„ค์น˜๋ฉ๋‹ˆ๋‹ค.

package-lock.json์€ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์˜์กดํ•˜๊ณ  ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ •ํ™•ํ•œ ์ •๋ณด๋กœ ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

 


 

 

npm์„ ๊ฐœ์„ ํ•˜์—ฌ yarn์ด ๊ฐœ๋ฐœ๋์ง€๋งŒ, ํ˜„์žฌ๋Š” ์•ˆ์ •์„ฑ์ด๋‚˜ ์†๋„์ ์ธ ์ธก๋ฉด์—์„œ ํฐ ์ฐจ์ด ์—†๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
๊นŠ๊ฒŒ ์ฐพ์•„๋ณด๋ฉด ์ข€ ๋” ๋‹ค๋ฅด๊ฑฐ๋‚˜ ์šฐ์œ„๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์ด ์žˆ์„ ๊ฒƒ ๊ฐ™์ง€๋งŒ,
์ž‘์„ฑ์ž๊ฐ€ ๋Š๋ผ๊ธฐ์—๋Š” ํฐ ์ฐจ์ด๊ฐ€ ์—†์„ ๊ฒƒ์œผ๋กœ ๋ณด์ด๊ณ ,
ํฌ๊ฒŒ ์ฒด๊ฐ๋˜์ง€ ์•Š์„ ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค. (๋งน์‹ ํ•  ๊ฒƒ ์—†์ด ํ”„๋กœ์ ํŠธ ์ง„ํ–‰ํ•  ๋•Œ๋งˆ๋‹ค ๊ณจ๋ž์œผ๋ฉด ๋  ๋“ฏ)
728x90