๐ฌ ๋ค์ด๊ฐ๋ฉฐ
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
'Front-End' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ํ๋ ์์ํฌ] React, Vue, Angular ์ฐจ์ด์ (2) | 2024.01.23 |
---|---|
ํ๋ฆฌํฐ์ด, ESLint (0) | 2023.09.05 |
[ES5] ์๊ฒฉ๋ชจ๋๋? StrictMode? (0) | 2023.08.25 |
[FE] ๊ฐ๋ , ์ ์ฉํ ์ฌ์ดํธ ๋ชจ์ (1) | 2023.04.04 |
์น ํ์ค์ด๋? ์น ์ ๊ทผ์ฑ์ด๋? (0) | 2023.03.31 |