[npm deep dive] Arborist์™€ Pacote๋กœ ๋ณธ npm install์˜ ๋น„๋ฐ€
ยท
๐Ÿ“šbook/npm Deep Dive
npm install์€ node.js ํ”„๋กœ์ ํŠธ์˜ ์˜์กด์„ฑ์„ ๊ด€๋ฆฌํ•˜๋Š” ํ•ต์‹ฌ ๋ช…๋ น์–ด๋‹ค. ์ด ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•˜๋ฉด package.json์— ๋ช…์‹œ๋œ ํŒจ์บ์ง€๋“ค์ดnode_modules ๋””๋ ‰ํ† ๋ฆฌ์— ์„ค์น˜๋œ๋‹ค. ๊ฐ„๋‹จํ•œ ๋ช…๋ น์–ด์ง€๋งŒ, ์ด ๊ณผ์ •์˜ ์ด๋ฉด์—๋Š” ๋ณต์žกํ•œ ์˜์กด์„ฑ ๊ด€๊ณ„๋ฅผ ํ•ด์„ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ์ •๊ตํ•œ ๋ฉ”์ปค๋‹ˆ์ฆ˜์ด ์กด์žฌํ•œ๋‹ค. ๊ทธ๋ƒฅ ์ž๋™์ธ์ค„ ์•Œ์•˜๋˜ npm install์ด์—ˆ์ง€๋งŒ...(์‚ฌ์‹ค ์ง„์งœ ์žํŒ๊ธฐ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ๋‹ค๋“ค ๋ชจ๋ฅด์ž–์•„ why ์ฑ…์—์„œ ๋ณธ ๊ฒƒ ๊ฐ™๊ธดํ•ด ๊ทผ๋ฐ) ์˜ค๋Š˜ ํ•™์Šต์„ ํ†ตํ•ด @npmcli/arborist, pacote์„ ์ค‘์‹ฌ์œผ๋กœ, npm์ด ์–ด๋–ป๊ฒŒ ์˜์กด์„ฑ ํŠธ๋ฆฌ๋ฅผ ํ•ด์„ํ•˜๊ณ , ๊ตฌ์ถ•ํ•˜๋ฉฐ, ์‹ค์ œ ํŒŒ์ผ ์‹œ์Šคํ…œ์— ๋ฐ˜์˜ํ•˜๋Š”์ง€ ์•Œ์•„๋ณด์•˜๋‹ค.๐ŸŒณ@npmcli/arboristnode_modules ๋””๋ ‰ํ† ๋ฆฌ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ชจ๋“  ๋กœ์ง์„ ์บก์Аํ™”ํ•˜๋Š” ..
[npm Deep Dive] dependencies, devDependencies, peerDependencies
ยท
๐Ÿ“šbook/npm Deep Dive
package.json์—์„œ ๊ฐ€์žฅ ํ•ต์‹ฌ์ ์ธ ํ•„๋“œ ์ค‘ ํ•˜๋‚˜ dependencies. dependencies๋Š” ์˜์กด์„ฑ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐ ๋งŽ์ด ์‚ฌ์šฉํ•ด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ์—„์ฒญ ์ต์ˆ™ํ•œ ํ•„๋“œ์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ package.json์„ ๋ณด๋ฉด dependencies๊ฐ€ ์žˆ๊ณ , devDependencies๋„ ์žˆ๋‹ค. ์ผ๋‹จ ๋‚˜๋ˆ ์ ธ ์žˆ์œผ๋‹ˆ ๋‚˜๋ˆ  ์“ฐ๊ธด ํ–ˆ๊ณ , ๋Œ€์ถฉ ๋‚˜๋ˆ ์ ธ ์žˆ๋Š” ๊ฑธ ๋ณด๋ฉด ๊ฐœ๋ฐœํ™˜๊ฒฝ์—์„œ๋งŒ ์“ฐ๋Š” ๊ฒƒ, ๋ธŒ๋ผ์šฐ์ €๋‚˜ ์‹คํ–‰ ํ™˜๊ฒฝ์—์„œ ํ•„์š”ํ•œ ๊ฒƒ์œผ๋กœ ๋‚˜๋ˆ„๋Š”๊ฑด๊ฐ€? ์‹ถ๊ธด ํ–ˆ์ง€๋งŒ, ์ •ํ™•ํžˆ ์–ด๋–ค ๊ธฐ์ค€์œผ๋กœ ๋‚˜๋ˆ„๋Š”์ง€ ํ™•์‹คํ•˜๊ฒŒ ์•Œ์ง€๋Š” ๋ชปํ–ˆ๋‹ค. ์ด๋ฒˆ์—๋Š” dependencies์™€ devDependencies, ๊ทธ๋ฆฌ๊ณ  peerDependencies๊นŒ์ง€ dependencies์˜ ๋ชจ๋“  ์ข…๋ฅ˜๋ฅผ ํŒŒํ—ค์ณ๋ณด์•˜๋‹ค.โžฐ๋ฒ„์ „ ํŠน์ˆ˜ ๊ธฐํ˜ธ์•„๋ž˜๋Š” package.json dep..
[npm Deep Dive] Package.json ์™„์ „ ํŒŒํ—ค์น˜๊ธฐ(ft. ์ฒซ ์˜คํ”ˆ์†Œ์Šค ํŽ€๋”ฉโค๏ธ)
ยท
๐Ÿ“šbook/npm Deep Dive
package.json์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ๋•Œ ๋น ์ง€์ง€ ์•Š๋Š” ์ค‘์š”ํ•œ ํŒŒ์ผ์ด๋‹ค. ์ด ํŒŒ์ผ์„ ํ™œ์šฉํ•˜๋ฉด ์˜์กด์„ฑ ๊ด€๋ฆฌ๋ฅผ ํŽธํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๊ณ , ๋‹ค์–‘ํ•œ CLI ๋ช…๋ น์–ด๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๋” ์ˆ˜์›”ํ•˜๊ฒŒ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋‹ค. ์ •๋ง ์ต์ˆ™ํ•˜๊ณ , ํ”„๋กœ์ ํŠธ์˜ ๊ทผ๊ฐ„์ด ๋˜๋Š” ํŒŒ์ผ์ด์ง€๋งŒ...์‚ฌ์‹ค ๊ทธ๋ฆฌ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ•˜์ง€๋Š” ์•Š์•˜๋˜ ๊ฒƒ ๊ฐ™๋‹ค. CRA๋‚˜ Vite๋กœ ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“œ๋Š”๊ฒŒ ์ต์ˆ™ํ•œ ๋‚˜๋กœ์„œ๋Š” ๊ทธ๋ƒฅ npx create-react-app, npm create vite@latest ๋ช…๋ น์–ด๋งŒ ์น˜๋ฉด ์ž๋™์œผ๋กœ ์ƒ๊ธฐ๋Š” ํŒŒ์ผ์ด๋ผ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๊นŠ๊ฒŒ ์‹ ๊ฒฝ์“ฐ์ง€ ์•Š์•˜๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ์˜์กด์„ฑ์„ ์ถ”๊ฐ€ํ•  ๋•Œ๋„ package.json์— ๋ญ˜ ์ง์ ‘ ์“ฐ๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ npm install๋งŒ ํ•ด๋„ ์•Œ์•„์„œ ๊ฐฑ์‹ ๋˜๋‹ค ๋ณด๋‹ˆ, ํŠน๋ณ„ํžˆ ๋ช…๋ น์–ด๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์•„๋‹ˆ๋ฉด ์† ๋Œˆ..
[npm Deep Dive] ์‹ค์ œ ์‚ฌ๊ณ  ์‚ฌ๋ก€๋กœ ์•Œ์•„๋ณด๋Š” ์œ ์˜์  ๋ฒ„์ „ ๊ด€๋ฆฌ์˜ ์ค‘์š”์„ฑ
ยท
๐Ÿ“šbook/npm Deep Dive
์œ„ํ‚ค๋ถ์Šค์˜ npm Deep Dive ์™„๋… ์ฑŒ๋ฆฐ์ง€ 1์ผ์ฐจ! ์ถœํŒ ์†Œ์‹ ๋ณด์ž๋งˆ์ž ๋„ˆ๋ฌด ๊ฐ–๊ณ  ์‹ถ์—ˆ๋˜ ์ฑ…์ธ๋ฐ, ๋น„์‹ธ๊ณ  ์ € ๋‘๊บผ์šด๊ฑธ ์–ธ์ œ ๋‹ค๋ณด๋‚˜ ํ•ด์„œ ๋ง์„ค์ด๋˜ ์ฐจ์— ์ฑŒ๋ฆฐ์ง€์— ์ฐธ์—ฌํ•˜๋ฉด ์™„๋…ํ•  ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ ์‹ถ์–ด์„œ ์‹ ์ฒญํ–ˆ๋‹ค. ์˜ค๋Š˜์˜ Mission- 1.1 npm์˜ ์ •์˜์™€ ์—ญ์‚ฌ (~p.20)- 1.2 ์œ ์˜์  ๋ฒ„์ „์ด๋ž€? (~p.52)๐Ÿ‘‰๋‚˜์—๊ฒŒ npm์ด๋ž€๋จผ์ € ์ฑ…์„ ์ฝ๊ธฐ์ „์— ๋‚˜์—๊ฒŒ npm์€ ์–ด๋–ค ์กด์žฌ์ผ๊นŒ ์ƒ๊ฐํ•ด๋ณด์•˜๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•œ์ง€ 2๋…„ ์ •๋„๊ฐ€ ๋˜์—ˆ๊ณ , ์ง€๊ธˆ๊นŒ์ง€ ๋ฌด์ˆ˜ํ•˜๊ฒŒ ๋งŽ์€ npm install, npm start, npm run dev๋ฅผ ์ณ์™”์ง€๋งŒ ๊ทธ๋ƒฅ ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ๊ฒƒ, ๊ทธ์ •๋„๋กœ๋งŒ ์ธ์‹ํ•˜๊ณ  ์žˆ์—ˆ๋‹ค. npm์ด๋“  pnpm์ด๋“  yarn์ด๋“  ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค๋ฉด ๋‹น์—ฐํžˆ ์“ฐ๋Š” ๊ฒƒ. ๋„ˆ๋ฌด ..