NPM
๋ช ์ฌ ยท ํจํค์ง ๊ด๋ฆฌ์
Node.js์ ๊ณต์ ํจํค์ง ๊ด๋ฆฌ์์ด์ ์ธ๊ณ ์ต๋์ ์คํ์์ค ์ํํธ์จ์ด ๋ ์ง์คํธ๋ฆฌ โ 200๋ง ๊ฐ ์ด์์ JavaScript ํจํค์ง๋ฅผ ํธ์คํ ํ์ฌ ๊ฐ๋ฐ์๊ฐ ํ์คํ๋๊ณ ๋ฒ์ ๊ด๋ฆฌ๋ ๋ฐฉ์์ผ๋ก ์ฝ๋๋ฅผ ๊ณต์ , ์ฌ์ฌ์ฉ ๋ฐ ๋ฐฐํฌํ ์ ์๊ฒ ํฉ๋๋ค.
๋ชจ๋ Node.js ์ค์น์ ํฌํจ๋๋ ์ปค๋งจ๋ ๋ผ์ธ ๋๊ตฌ(CLI)๋ก, JavaScript ํ๋ก์ ํธ์ ์์กด์ฑ ์ค์น, ์ ๋ฐ์ดํธ ๋ฐ ๊ด๋ฆฌ๋ฅผ ์๋ํํฉ๋๋ค โ `package-lock.json` ํ์ผ๊ณผ ๊ฒฐ์ ์ ๋ฒ์ ํด์์ ํตํด ๋น๋์ ์ฌํ์ฑ์ ๋ณด์ฅํฉ๋๋ค.
๊ณต๊ฐ ๋ ์ง์คํธ๋ฆฌ(npmjs.com), CLI ํด๋ผ์ด์ธํธ ๋ฐ ์กฐ์ง ๊ด๋ฆฌ ๊ธฐ๋ฅ์ ํฌํจํ๋ ์์ ํ ์ํ๊ณ โ React, Next.js, Express.js ๋ฐ ๊ฑฐ์ ๋ชจ๋ ์ ๋ฌธ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฐฐํฌ ์ธํ๋ผ๋ฅผ ์ ๊ณตํ์ฌ ํ๋ ์น ๊ฐ๋ฐ์ ์ด์์ด ๋์์ต๋๋ค.
NPM(Node Package Manager)์ ์๋ํํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ค์น, ์ ๋ฐ์ดํธ ๋ฐ ์ญ์ ๋ฅผ ์๋ํํ์ฌ JavaScript ํ๋ก์ ํธ์ ์์กด์ฑ์ ๊ด๋ฆฌํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ๋ชจ๋ ๊ฒ์ ๋ค์ ์์ฑํ๋ ๋์ ๊ฒ์ฆ๋ ์คํ์์ค ์ฝ๋๋ฅผ ์ฌ์ฌ์ฉํ ์ ์์ด ๊ฐ๋ฐ ์ฃผ๊ธฐ๋ฅผ ํฌ๊ฒ ๊ฐ์ํํฉ๋๋ค. NPM์ ๋ํ `package.json` ํ์ผ์ ์ ์๋ ๋น๋, ํ ์คํธ ๋ฐ ๋ฐฐํฌ ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ๋ ๋ฐ๋ ์ฌ์ฉ๋ฉ๋๋ค. Async Code์์ ๋งค์ผ ์ฌ์ฉํ๋ ๋ชจ๋ ํ๋ ์น ํ๋ก์ ํธ์ ํ์ ๋๊ตฌ์ ๋๋ค.
NPM์ Node.js์ ๊ธฐ๋ณธ ํจํค์ง ๊ด๋ฆฌ์๋ก, 200๋ง ๊ฐ ์ด์์ ํจํค์ง๋ฅผ ํฌํจํ๋ ์จ๋ผ์ธ ๋ ์ง์คํธ๋ฆฌ(npmjs.com)์ ์ปค๋งจ๋ ๋ผ์ธ ๋๊ตฌ๋ก ๊ตฌ์ฑ๋ฉ๋๋ค. ์๋ ๋ฐฉ์์ ๊ฐ๋จํฉ๋๋ค: `npm install`์ ์คํํ๋ฉด CLI๊ฐ ํ๋ก์ ํธ์ `package.json` ํ์ผ์ ์ฝ๊ณ , ์์กด์ฑ ํธ๋ฆฌ๋ฅผ ํด๊ฒฐํ๊ณ , ๋ ์ง์คํธ๋ฆฌ์์ ํจํค์ง๋ฅผ ๋ค์ด๋ก๋ํ์ฌ `node_modules` ํด๋์ ์ค์นํฉ๋๋ค. `package-lock.json` ํ์ผ์ ๋ชจ๋ ํ์๊ณผ ๋ชจ๋ ํ๊ฒฝ์ด ์ ํํ ๋์ผํ ๋ฒ์ ์ ์ฌ์ฉํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
`npm install -g` ๋ช ๋ น์ ์์คํ ์ ํจํค์ง๋ฅผ ์ ์ญ์ผ๋ก ์ค์นํ์ฌ ์ปค๋งจ๋ ๋ผ์ธ์ ํตํด ์ด๋ค ๋๋ ํ ๋ฆฌ์์๋ ์ ๊ทผํ ์ ์๊ฒ ํฉ๋๋ค. ํ์ฌ ํ๋ก์ ํธ์ `node_modules` ํด๋์ ํจํค์ง๋ฅผ ๋ฐฐ์นํ๋ ๋ก์ปฌ ์ค์น(`-g` ํ๋๊ทธ ์์)์ ๋ฌ๋ฆฌ, ์ ์ญ ์ค์น๋ `typescript`, `nodemon`, `create-next-app`๊ณผ ๊ฐ์ CLI ๋๊ตฌ์ ํ์ ๋ฉ๋๋ค. ์ค๋ฌด์์๋ ์ ์ญ ์ค์น๋ฅผ ์ต์ํํ๊ณ ์์คํ ํ๊ฒฝ์ ์ค์ผ์ํค์ง ์๊ณ ๋๊ตฌ๋ฅผ ์ผํ์ฑ์ผ๋ก ์คํํ๊ธฐ ์ํด `npx`๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค.
Node.js๋ Chrome์ V8 ์์ง์ ๊ธฐ๋ฐ์ผ๋ก ๋ธ๋ผ์ฐ์ ์ธ๋ถ์์ JavaScript๋ฅผ ์คํํ ์ ์๊ฒ ํ๋ ์๋ฒ ์ฌ์ด๋ JavaScript ์คํ ํ๊ฒฝ์ ๋๋ค. NPM์ Node.js์ ํจ๊ป ์ ๊ณต๋๋ ํจํค์ง ๊ด๋ฆฌ์๋ก ํ๋ก์ ํธ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์กด์ฑ์ ๊ด๋ฆฌํฉ๋๋ค. ์์ฝํ๋ฉด: Node.js๋ ์ฝ๋๋ฅผ ์คํํ๊ณ , NPM์ ์ฝ๋ ๋ชจ๋์ ๊ด๋ฆฌํฉ๋๋ค. ๋ ๊ฐ์ง๋ ํ๋ ์น ๊ฐ๋ฐ์์ ์ํธ ๋ณด์์ ์ด๋ฉฐ ๋ถ๋ฆฌํ ์ ์์ต๋๋ค โ Node.js๋ฅผ ์ค์นํ๋ฉด NPM์ด ์๋์ผ๋ก ์ค์น๋ฉ๋๋ค.
NPM์ JavaScript ํ๋ก์ ํธ์ ๋ชจ๋ ์์กด์ฑ ๊ด๋ฆฌ๋ฅผ ์ค์ํํ๊ณ ์๋ํํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ๋จ์ผ ๋ช ๋ น์ผ๋ก React๋ Next.js์ ๊ฐ์ ํ๋ ์์ํฌ๋ฅผ ์ค์นํ๊ณ , ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฒ์ ๊ฐ ํธํ์ฑ์ ์ ์งํ๋ฉฐ, ์ปค๋ฎค๋ํฐ์ ์์ฒด ๋ชจ๋์ ๊ณต์ ํ ์ ์์ต๋๋ค. NPM์ ๋ํ `package.json`์ ์ ์๋ ๊ฐ๋ฐ ์คํฌ๋ฆฝํธ(๋น๋, ํ ์คํธ, ๋ฆฐํธ, ๋ฐฐํฌ)๋ฅผ ๊ด๋ฆฌํ์ฌ ๋ชจ๋ ์ ๋ฌธ ๊ฐ๋ฐ ์ํฌํ๋ก์ ์งํ์ ์ญํ ์ ํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์ฌํ ๊ฐ๋ฅํ ๋น๋์ ์์ ์ ์ธ ๋ฐฐํฌ๋ฅผ ๋ณด์ฅํ๊ธฐ ์ํด NPM์ ํ์ฉํฉ๋๋ค.
๋ค, `npm install`(๋๋ ๋จ์ถํค `npm i`) ๋ช ๋ น์ ํ๋ก์ ํธ์ `package.json` ํ์ผ์ ๋์ด๋ ๋ชจ๋ ์์กด์ฑ์ ๋ค์ด๋ก๋ ๋ฐ ์ค์น๋ฅผ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค. ํจํค์ง๋ฅผ ํฌํจํ๋ `node_modules` ํด๋๋ฅผ ์์ฑํ๊ณ ๋ฒ์ ์ ์ ๊ทธ๊ธฐ ์ํ `package-lock.json` ํ์ผ์ ์์ฑํฉ๋๋ค. `npm install ํจํค์ง๋ช `์ผ๋ก ํน์ ํจํค์ง๋ฅผ ์ค์นํ ์๋ ์์ต๋๋ค. ์ด๊ฒ์ ์ผ๋ฐ์ ์ผ๋ก ๊ฐ๋ฐ ํ๊ฒฝ์ ์ค๋นํ๊ธฐ ์ํด ํ๋ก์ ํธ ํด๋ก ํ ์คํํ๋ ์ฒซ ๋ฒ์งธ ๋ช ๋ น์ ๋๋ค.
Windows์์ NPM์ ์ค์นํ๋ ค๋ฉด ๊ณต์ ์ฌ์ดํธ nodejs.org์์ Node.js ์ค์น ํ๋ก๊ทธ๋จ์ ๋ค์ด๋ก๋ํ์ธ์ โ NPM์ ๋ชจ๋ Node.js ์ค์น์ ์๋์ผ๋ก ํฌํจ๋ฉ๋๋ค. `.msi` ์ค์น ํ๋ก๊ทธ๋จ์ ์คํํ๊ณ ๋ง๋ฒ์ฌ ๋จ๊ณ๋ฅผ ๋ฐ๋ฅด๋ฉฐ ์์คํ PATH์ ์ถ๊ฐํ๋ ์ต์ ์ ์ ํํฉ๋๋ค. ์ค์น ํ ํฐ๋ฏธ๋(PowerShell ๋๋ CMD)์ ์ด๊ณ `node -v`์ `npm -v`๋ก ํ์ธํฉ๋๋ค. ์ ๋ฌธ ๊ฐ๋ฐ์์ ๊ฒฝ์ฐ ํ๋ก์ ํธ์ ๋ฐ๋ผ ๋ค๋ฅธ Node.js ๋ฒ์ ๊ฐ ์ฝ๊ฒ ์ ํํ๊ธฐ ์ํด NVM for Windows(Node Version Manager)๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค.
์ปค๋งจ๋ ํ๋กฌํํธ(ํฐ๋ฏธ๋)์์ NPM์ NPM ๋ ์ง์คํธ๋ฆฌ์ ์ํธ์์ฉํ๊ณ ํ๋ก์ ํธ์ ์์กด์ฑ์ ๊ด๋ฆฌํ ์ ์๋ ์ปค๋งจ๋ ๋ผ์ธ ์ธํฐํ์ด์ค(CLI)์ ๋๋ค. ์ฃผ์ ๋ช ๋ น์: `npm init`(ํ๋ก์ ํธ ์์ฑ), `npm install`(์์กด์ฑ ์ค์น), `npm run`(์คํฌ๋ฆฝํธ ์คํ), `npm update`(ํจํค์ง ์ ๋ฐ์ดํธ), `npm publish`(ํจํค์ง ๊ฒ์)์ ๋๋ค. ๋ชจ๋ JavaScript ๊ฐ๋ฐ์๊ฐ ํ๋ก์ ํธ์ ์ ์ฒด ์๋ช ์ฃผ๊ธฐ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํด ๋งค์ผ ์ฌ์ฉํ๋ ๋๊ตฌ์ ๋๋ค.
์๋์, NPM๊ณผ Node.js๋ ๋ณ๊ฐ์ด์ง๋ง ์ํธ ๋ณด์์ ์ธ ๋ ๋๊ตฌ์ ๋๋ค. Node.js๋ ์๋ฒ๋ ๋ก์ปฌ ๋จธ์ ์์ JavaScript ์ฝ๋๋ฅผ ์คํํ ์ ์๊ฒ ํ๋ ์คํ ํ๊ฒฝ์ ๋๋ค. NPM์ ํ๋ก์ ํธ์ ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ชจ๋์ ๊ด๋ฆฌํ๋ ํจํค์ง ๊ด๋ฆฌ์์ ๋๋ค. NPM์ Node.js์ ํจ๊ป ๋ฐฐํฌ๋ฉ๋๋ค โ ํ๋๋ฅผ ์ค์นํ๋ฉด ์๋์ผ๋ก ๋ค๋ฅธ ํ๋๋ ์ค์น๋ฉ๋๋ค โ ํ์ง๋ง ์๋ก ๋ค๋ฅธ ๊ธฐ๋ฅ์ ์ํํฉ๋๋ค. ์์ง(Node.js)๊ณผ ๋ถํ ์ฐฝ๊ณ (NPM)์ ์ฐจ์ด์ ๊ฐ์ต๋๋ค.
NPM์ JavaScript ๊ฐ๋ฐ์์ ๋ค ๊ฐ์ง ํต์ฌ ๊ธฐ๋ฅ์ ์ํํฉ๋๋ค: ํ๋ก์ ํธ์ ์์กด์ฑ์ ์ค์นํ๊ณ ๊ด๋ฆฌํ๋ฉฐ, ์๋ํ๋ ์คํฌ๋ฆฝํธ(๋น๋, ํ ์คํธ, ๋ฐฐํฌ)๋ฅผ ์คํํ๊ณ , ํจํค์ง ๊ฐ ํธํ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํ ์๋งจํฑ ๋ฒ์ ๋์ ๊ด๋ฆฌํ๋ฉฐ, ์คํ์์ค ์ฝ๋๋ฅผ ๊ฒ์ํ๊ณ ๊ณต์ ํ๊ธฐ ์ํ ์ค์ ๋ ์ง์คํธ๋ฆฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. NPM์ด ์๋ค๋ฉด ๋ชจ๋ ๊ฐ๋ฐ์๊ฐ ๊ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์๋์ผ๋ก ๋ค์ด๋ก๋, ๊ตฌ์ฑ ๋ฐ ์ ๋ฐ์ดํธํด์ผ ํ ๊ฒ์ ๋๋ค. Async Code์์ NPM์ ๋ชจ๋ Next.js ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐ, CI/CD ๋ฐ ๋ฐฐํฌ ์ฒด์ธ์ ๊ธฐ๋ฐ์ ๋๋ค.