๊ณต์‚ผ
article thumbnail


๐Ÿ’ฌ ๋“ค์–ด๊ฐ€๋ฉฐ

 

VScode ๋‚ด์—์„œ NPM์„ ์ด์šฉํ•ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ์„ค์น˜ํ•˜๋ฉฐ ํ”„๋กœ์ ํŠธ ์ง„ํ–‰์ค‘, ์ž˜๋ชป ์„ค์น˜ํ•œ ๋น„์Šทํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ์ด์ œ ์ด์šฉํ•˜์ง€ ์•Š์•„ ์‚ญ์ œํ•ด์•ผํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ๊ณ ๋ฏผํ•˜๋‹ค๊ฐ€ ์ฐพ์•„๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค.

 

 

NPM(Node Package Manager)

ํ”„๋กœ์ ํŠธ๋“ค์„ ์ง„ํ–‰ํ•˜๋ฉฐ ๋Œ€๋ถ€๋ถ„ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋ฅผ ์ด์šฉํ•ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜๋ฅผ ํ•ด๋ณด์•˜์„ํ…๋ฐ ๋Œ€ํ‘œ์ ์œผ๋กœ NPM, yarn ๋“ฑ์ด ์žˆ๋‹ค. 

 

๋‚œ ์ง€๊ธˆ NPM์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— NPM์„ ๊ฐ„๋‹จํžˆ ์„ค๋ช…ํ•ด๋ณด์ž๋ฉด 

 

Node.js ํ™˜๊ฒฝ์—์„œ ํŒจํ‚ค์ง€๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ํˆด๋กœ Node.js๋Š” JavaScript๋ฅผ ์ด์šฉํ•˜์—ฌ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋Š” ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ์ด๋ฉฐ, npm์€ ์ด๋Ÿฌํ•œ Node.js ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ชจ๋“ˆ์„ ๊ด€๋ฆฌํ•˜๋Š” ๋„๊ตฌ์ด๋‹ค.

 

์‰ฝ๊ฒŒ ๋งํ•ด ๋ชจ๋“ˆ์„ ๊ฒ€์ƒ‰ํ•˜๊ณ  ์„ค์น˜ํ•œ๋‹ค, ๋˜ํ•œ ํŒจํ‚ค์ง€ ๋ฐฐํฌ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ด ๊ฐœ๋ฐœํ•œ ํŒจํ‚ค์ง€๋ฅผ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๊ณผ ๊ณต์œ  ํ•˜๋Š” ๊ธฐ๋Šฅ๋„ ์žˆ๋‹ค. 

 

 

NPX(Node Package Execute)

npx๋Š” npm ํŒจํ‚ค์ง€๋ฅผ ๊ฐ„ํŽธํ•˜๊ฒŒ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ๋„๊ตฌ๋กœ, ๋กœ์ปฌ์— ์„ค์น˜๋œ ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•˜๊ณ , ์‹คํ–‰์ด ๋๋‚˜๋ฉด ํ•ด๋‹นํŒจํ‚ค์ง€๋ฅผ ์ž๋™์œผ๋กœ ์‚ญ์ œํ•˜๋Š” ๋„๊ตฌ์ด๋‹ค. 

 

์ถ”ํ›„์— ์˜ฌ๋ฆด์ˆ˜๋„..? ์žˆ๋Š” CRA๋ฅผ ํ™œ์šฉํ•œ ๋ฆฌ์•กํŠธ ํ™˜๊ฒฝ์„ค์ •์—์„œ๋„ NPX๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ

npx create-react-app project-name

์‹์˜ ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

 

 

 

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ™•์ธํ•˜๊ธฐ

npm list

 

๊ฐ„๋‹จํ•˜๋‹ค. npm list๋ฅผ ์ด์šฉํ•˜๋ฉด ํ˜„์žฌ ๋””๋ ‰ํ† ๋ฆฌ์˜ package.json ํŒŒ์ผ์— ๋ช…์‹œ๋œ ๋ชจ๋“  ์ข…์†์„ฑ ๋ฐ ๋ฒ„์ „์„ ํ‘œ์‹œํ•œ๋‹ค. 

 

๋งŒ์•ฝ yarn์„ ์“ฐ๊ณ  ์žˆ๋‹ค๋ฉด, ๊ทธ๋Œ€๋กœ 

 

yarn list

๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค. 

 

 

์ „์—ญ์œผ๋กœ ์„ค์น˜ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ™•์ธ

npm list -g --depth=0

 

๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ช…๋ น์–ด๋ฅผ ์ด์šฉํ•˜๋ฉด ์ „์—ญ์œผ๋กœ ์„ค์น˜๋œ ๋ชจ๋“  ํŒจํ‚ค์ง€๋ฅผ ํ‘œ์‹œํ•œ๋‹ค. 0์€ ์ข…์†์„ฑ ์—†์ด ๋ฐ”๋กœ ์„ค์น˜๋œ ํŒจํ‚ค์ง€๋งŒ ํ‘œ์‹œํ•˜๋„๋ก ํ•˜๊ณ  depth=0 ํ”Œ๋ž˜๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ข…์†์„ฑ์„ ํ‘œ์‹œํ•˜์ง€ ์•Š๋Š”๋‹ค. 

 

yarn์„ ์“ด๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ด์šฉํ•˜๋ฉด ๋œ๋‹ค.

yarn global list

 

 

 

 

 

 

 

 

 

 

 

 

 

profile

๊ณต์‚ผ

@g_three

ํฌ์ŠคํŒ…์ด ์ข‹์•˜๋‹ค๋ฉด "์ข‹์•„์š”โค๏ธ" ๋˜๋Š” "๊ตฌ๋…๐Ÿ‘๐Ÿป" ํ•ด์ฃผ์„ธ์š”!