๐Ÿ—๏ธ์†Œํ”„ํŠธ์›จ์–ด/๐Ÿ†Vue

npx, npm์˜ ์ฐจ์ด์™€ vscode ์‹คํ–‰ ๋ฐฉ๋ฒ•

Dev.Op 2022. 12. 2. 08:38
๋ฐ˜์‘ํ˜•

1. npx ์™€ npm

 

npx๋กœ ํ”„๋กœ์ ํŠธ ๋‹ค์šด๋ฐ›๊ธฐ

 

๐Ÿ“Œ ๋ฒ„์ „ ๊ด€๋ฆฌ๊ฐ€ ์—†๋Š” ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ๋‹ค์šด๋กœ๋“œ ๋ฐ›๋Š” ๊ฒƒ๊ณผ ๊ฐ™์Œ

 

npx degit ๊ณ„์ •์ด๋ฆ„/์ €์žฅ์†Œ์ด๋ฆ„ ๋‹ค์šด๋ฐ›์„๊ฒฝ๋กœ

$ npx degit ParkYoungWoong/webpack-template-basic vue3-webpack-template

- npx : degit์„ ์„ค์น˜ํ•˜์ง€ ์•Š๊ณ ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” nodejs๋ช…๋ น์–ด npx

- degit : ์›๊ฒฉ์ €์žฅ์†Œ github์— ์žˆ๋Š” ํŠน์ • ์ €์žฅ์†Œ๋ฅผ ํ˜„์žฌ ๋กœ์ปฌ ๊ฒฝ๋กœ์— ๋‹ค์šด๋กœ๋“œ

 

์‹œ๊ฐ„์ด ๋œธ

 

์ฐธ๊ณ ๋กœ npx๋ž€

npx๋Š” ์ƒˆ๋กœ์šด ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ ๋ชจ๋“ˆ์ด ์•„๋‹˜!!

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ ๋ชจ๋“ˆ์ธ npm(Node Package Module)์˜ 5.2.0 ๋ฒ„์ „๋ถ€ํ„ฐ ์ƒˆ๋กœ ์ถ”๊ฐ€๋œ ๋„๊ตฌ

 

npm๊ณผ ๋น„๊ต๋Œ€์ƒ์ด ์•„๋‹Œ npm์„ ์ข€ ๋” ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ npm์—์„œ ์ œ๊ณตํ•ด์ฃผ๋Š” ํ•˜๋‚˜์˜ ๋„๊ตฌ

 

npm@5.2.0 ์ด์ƒ ๋ฒ„์ „๋งŒ ๊น”๋ ค ์žˆ๋‹ค๋ฉด, npx ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ

 

npx ๋Š” ํŒจํ‚ค์ง€๋ฅผ ์ž„์‹œ ์„ค์น˜ํ•ด์„œ "์‹คํ–‰"ํ•˜๋Š” ์šฉ๋„

react ์™€ ๊ฐ™์€ library ๋ฅผ ์„ค์น˜ํ•  ์ˆ˜๋Š” ์žˆ์ง€๋งŒ ์‹คํ–‰์ด ์•ˆ ๋˜๋ฏ€๋กœ npx๋กœ ์„ค์น˜๊ฐ€ ๋ถˆ๊ฐ€๋Šฅ

 

๋งŒ์•ฝ npx ๋กœ react๋ฅผ ์„ค์น˜ํ• ๊ฑฐ๋ผ๋ฉด create-react-app ๋ผ๋Š” ๋ช…๋ น์–ด๋กœ ์‚ฌ์šฉํ•ด,

CRA ๊ฐ€ ์•Œ์•„์„œ react ๋ฅผ ์„ค์น˜ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋ฉฐ, npx ์ž์ฒด๋กœ๋Š” ๋ถˆ๊ฐ€๋Šฅ

 

npx๋กœ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค
  • ํŒจํ‚ค์ง€ ์ž„์‹œ ์„ค์น˜ ๋ฐ ์‹คํ–‰
  • npm ์œผ๋กœ ์„ค์น˜ํ•  ๋ช…๋ น์–ด๋ฅผ ์ค„์—ฌ์คŒ
  • ๋‹ค๋ฅธ ๋ฒ„์ „์˜ ๋…ธ๋“œ ์‹คํ–‰ ๊ฐ€๋Šฅ
  • gist ์— ์Šคํฌ๋ฆฝํŠธ ๊ณต์œ  ๊ฐ€๋Šฅ

git clone์œผ๋กœ ํ”„๋กœ์ ํŠธ ๋ณต์ œํ•˜๊ธฐ

 

github ์ €์žฅ์†Œ์—์„œ ์ง์ ‘ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์„ ๊ฒฝ์šฐ์—๋Š” ๋ฒ„์ „๊นŒ์ง€ ํ•œ๊บผ๋ฒˆ์— ๋‹ค์šด๋˜์–ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ด์–ด์„œ ์ง„ํ–‰ํ•˜๊ฒŒ ๋จ

 

 

 

 

 

 

2. code . -r

ํ˜„์žฌ ์—ด๋ ค์ ธ ์žˆ๋Š” vscode ์ƒ์—์„œ์˜ ๋””๋ ‰ํ† ๋ฆฌ์— ๋Œ€ํ•ด์„œ, ์ƒˆ๋กœ์šด ์ฐฝ์— ๋„์šด๋‹ค.

 

 

 

 

 

3.npm err! code elifecycle 

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ, npm ์บ์‹œ์™€ node_modules, package-lock.json์„ ์ œ๊ฑฐํ•˜๊ณ  npm ์„ ๋‹ค์‹œ install ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

 

$ npm cache clean --force
$ rm -rf node_modules package-lock.json
$ npm install

rm ๋ช…๋ น์–ด๋Š” ๋””๋ ‰ํ† ๋ฆฌ ์‚ญ์ œ ๋ช…๋ น์–ด

 -rf ์˜ต์…˜์€ ํ•˜์œ„ ๋””๋ ‰ํ† ๋ฆฌ๊นŒ์ง€(r),

๊ฐ•์ œ๋กœ(f) ์‚ญ์ œํ•œ๋‹ค๋Š” ์˜ต์…˜

 

 

ํ•ด๊ฒฐ๋ฐฉ๋ฒ• ์ฐพ์•˜๋‹ค.

 

wsl์˜ ubuntu ํ™˜๊ฒฝ์—์„œ ์‹ค์‹œํ•ด์•ผ ํ•œ๋‹ค.

 

์—๋Ÿฌ์˜ ์›์ธ์€ ์œˆ๋„์šฐ ํ™˜๊ฒฝ์ด ์•„๋‹Œ, ์šฐ๋ถ„ํˆฌ ํ™˜๊ฒฝ์—์„œ ์„œ๋ฒ„์— ํ•„์š”ํ•œ ํŒจํ‚ค์ง€๋“ค์ด ์„ค์น˜๋˜์–ด์„œ ์ธ๊ฐ€? ์‹ถ๋‹ค.

์‚ฌ์‹ค ์ž˜ ๋ชจ๋ฅด๊ฒ ๋‹ค. ใ… ใ… 

๋ฐ˜์‘ํ˜•