Programming/JavaScript

[Node.js] npm ๊ณผ npx ์˜ ์ฐจ์ด์ 

yuri lee 2023. 5. 3. 20:06
๋ฐ˜์‘ํ˜•

Intro

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

npx create-next-app@latest --typescript

 

NPM, NPX

npm๊ณผ npx๋Š” ๋ชจ๋‘ Node.js ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ € (NPM)์—์„œ ์ œ๊ณตํ•˜๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. 

 

NPM

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

 

NPX(execute npm package binaries)

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

 

+) ๊ธ€๋กœ๋ฒŒํ•˜๊ฒŒ ์„ค์น˜ํ•˜๋ฉด ์šฉ๋Ÿ‰์„ ์ฐจ์ง€ํ•˜๊ณ , ๋‚˜์ค‘์— ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ• ๋•Œ ์ด๋ฏธ ์˜ฌ๋“œ๋ฒ„์ „์ผ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์„ ๋•Œ๊ฐ€ ๋งŽ์€๋ฐ์š”, ์ด๋Ÿด ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์“ฐ์ด๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. 

 

Difference

npm์€ ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๊ณ , npx๋Š” ํŒจํ‚ค์ง€๋ฅผ ์‹คํ–‰ํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. 

๋ฐ˜์‘ํ˜•