๐ฐ๐ท 20230815 TIL
Next.js ๊ธฐ์ด ๊ฐ์๋ฅผ ๋ฃ๋ ์ค ํ๋ก์ ํธ create๋ฅผ npx๋ก ํ๊ธธ๋ npm๊ณผ ๋ญ๊ฐ ๋ค๋ฅด์ง? ๊ทธ๋ ๋ค๋ฉด yarn์ด๋์? ๊ถ๊ธํด์ ธ์ ๊ฐ๋จํ๊ฒ ์ฐพ์๋ณด๊ณ ์ ๋ฆฌํ์๋ค.
1. npm
์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์ ํ๊ฒฝ Node.js์ ๊ธฐ๋ณธ ํจํค์ง ๊ด๋ฆฌ์
- Node Package Manager๋ผ๋ ๋ง ๊ทธ๋๋ก ๋ ธ๋ ํ๊ฒฝ์์์ ํจํค์ง ๋งค๋์ ๋ฅผ ์๋ฏธํ๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ ํ๊ฒฝ์์ ํ๋ก์ ํธ๋ฅผ ์์ํ ๋ node์ ํจ๊ป ์ค์นํ๋ผ๊ณ ํ๋ Getting Started๊ฐ ๋ง๊ณ ์ฌ์ฉ ๋น๋๊ฐ ๋๋ค.
- `npm install ๋ชจ๋๋ช -g` : npm์ ํตํด -g ์ต์ ์ ์ฃผ๋ฉด ๋งค ํ๋ก์ ํธ๋ง๋ค ๋ชจ๋์ ์ค์นํด ์ค ํ์๊ฐ ์๊ณ ๋ด ์ปดํจํฐ ์์์ ๊ธ๋ก๋ฒํ๊ฒ ๋ชจ๋์ด ์ค์น๋์ด ํ๋ก์ ํธ๋ง๋ค ๊ฐ์ ๋ชจ๋์ ๊ณต์ ํด์ ์ฌ์ฉํ ์๋ ์๋ค.
- ๋จ์
- ๋ชจ๋์ด ์
๋ฐ์ดํธ ๋์๋์ง ์๋์๋์ง ํ์ธ์ด ๋ถ๊ฐ๋ฅํ๋ค.
- ๋ชจ๋ ํ๋ก์ ํธ๋ง๋ค ๋ชจ๋์ ์ฌ์ค์นํ๋ ๊ฒ์ด ์๋, ํ ๋ฒ ์ค์นํ ๋ชจ๋์ ๊ทธ๋๋ก ์ฌ์ฉํ๋ฏ๋ก ๊ฐ๋ฐ์๊ฐ ์์ํด์ ๊ธ๋ก๋ฒ ๋ชจ๋์ ์ต์ ๋ฒ์ ์ผ๋ก ์ฌ์ค์นํ์ง ์์ผ๋ฉด ํ์ธ ์์ฒด๊ฐ ๋ถ๊ฐ๋ฅํ๋ค.
- ์ ๋ฐ์ดํธ๋ฅผ ์งํํ์ ๋ ๋ณ๋์ฌํญ์ด ์๊ฒจ ๋ค๋ฅธ ํ๋ก์ ํธ์๋ ์ํฅ์ ๋ผ์น ์ ์๋ค.
- create-react-app ๊ฐ์ ๋ณด์ผ๋ฌํ๋ ์ดํธ์๋ ์น๋ช ์ ์ด๋ค.
- ๋ชจ๋์ด ์
๋ฐ์ดํธ ๋์๋์ง ์๋์๋์ง ํ์ธ์ด ๋ถ๊ฐ๋ฅํ๋ค.
2. npx
Execute Npm Package Binaries์ ์ค์๋ง๋ก, npm์ ์ํด ์๋ npm ํจํค์ง ์คํ ๋๊ตฌ์ด๋ค.
- npx๊ฐ ํจํค์ง '์คํ ๋๊ตฌ'๋ผ๋ ๊ฒ์ด npm๊ณผ์ ํฐ ์ฐจ์ด์ ์ด์ ์ฅ์ ์ด๋ค.
- ๋ชจ๋์ ๋ก์ปฌ์ ์ ์ฅํ์ง ์๊ณ , ๋งค๋ฒ ์ต์ ๋ฒ์ ์ ํ์ผ๋ง์ ์์๋ก ๋ถ๋ฌ์ ์คํ ์ํจ ํ์, ๋ค์ ๊ทธ ํ์ผ์ ์์ด์ง๋ ๋ฐฉ์์ผ๋ก ๋ชจ๋์ ์คํ์์ผ์ค๋ค.
- npx๋ ํด๋น ํจํค์ง๋ฅผ ์คํ๋ง ๋๊ฒ ํด์ฃผ๊ธฐ ๋๋ฌธ์ ๊ฐ๋ณ๊ฒ ์ฌ์ฉํ ์ ์๋ค.
- ๊ฐ๋ฐ์์ ์ ์ฅ์์๋ ํฐ ์ฐจ์ด๊ฐ ์์ง๋ง, ์คํํ๋ ์ฌ๋์ ์ ์ฅ์์๋ ํฐ ์ฐจ์ด์ ์ ๊ฐ๋๋ค.
- create-react-app๊ณผ ๊ฐ์ ๋ณด์ผ๋ฌํ๋ ์ดํธ ๋ชจ๋์ ํจ๊ณผ์ ์ด๋ค.
- ๋งค๋ฒ ์ต์ ๋ฒ์ ๋ง์ ๊ฐ์ ธ์์ ์ค์นํด์ฃผ๋ฏ๋ก ์ง๊ธ ์ด๋ค ๋ฒ์ ์ ์ฌ์ฉํ๊ณ ์๋์ง์ ์ฐ์ฐํ์ง ์์ ์ ์๋ค.
3. yarn
ํ์ด์ค๋ถ์์ ๋ง๋ ์๋ฐ์คํฌ๋ฆฝํธ ํจํค์ง ๋งค๋์ ๋ก, ๊ธฐ๋ณธ์ ์ผ๋ก๋ npm๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ์ํํ๋ค.
- npm์ ๋จ์ ์ ํฅ์์ํค๊ธฐ ์ํด ๋ง๋ค์ด์ง ๋งค๋์ ํด์ด๋ค.
- ์๋ : ๋ค์ด๋ฐ์ ํจํค์ง ๋ฐ์ดํฐ๋ฅผ ์บ์(cache)์ ์ ์ฅํ์ฌ, ์ค๋ณต๋ ๋ฐ์ดํฐ๋ ๋ค์ด๋ก๋ ํ์ง ์๊ณ ์บ์ ๋ฐ์ดํฐ๋ฅผ ํ์ฉํจ์ผ๋ก์จ ์ด๋ก ์ ์ผ๋ก npm์ ๋นํด ํจํค์ง ์ค์น ์๋๊ฐ ๋งค์ฐ ๋น ๋ฅด๋ค.
- ์์ ์ฑ, ๋ณด์์ฑ : yarn์ yarn.lock์ด๋ package.json์ผ๋ก๋ถํฐ ์ค์น๋ง ํ๊ณ , yarn.lock์ ๋ชจ๋ ๋๋ฐ์ด์ค์ ๊ฐ์ ํจํค์ง๋ฅผ ์ค์นํ๋ ๊ฒ์ ๋ณด์ฅํด์ฃผ๊ธฐ ๋๋ฌธ์ ๋ฒ์ ์ ์ฐจ์ด๋ก ์๊ธฐ๋ ๋ฒ๊ทธ๋ฅผ ๋ฐฉ์งํด์ค ์ ์๋ค.
์ฐธ๊ณ ์ฌ์ดํธ
npm๊ณผ npx์ ์ฐจ์ด์ ๋ํด์