Create React App ์ด๋?
create-react-app ์ ํ์ด์ค๋ถ์์ ๋ง๋ react ์น ๊ฐ๋ฐ์ฉ boilerplate์ ๋๋ค. react๋ es6 ๋ฒ์ ์ javascript๋ก ์์ฑํ๋ ๊ฒ์ด ์ผ๋ฐํ๋์ด์๊ธฐ ๋๋ฌธ์ webpack์ด๋ผ๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ๋ก ์ปดํ์ผ ๋ฐ ๋น๋ ํ๋ ๊ฒ์ด ํ์๋ผ ์ด ํ๊ฒฝ์ ์ธํ ํด ์ค์ผ ํฉ๋๋ค. ์ง์ ๋ชจ๋ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ค์ ํ์ง ์์๋ ํ์ด์ค๋ถ์ด๋ผ๋ ๊ฑฐ๋ํ ๊ธฐ์ ์์ ์ง์์ ์ผ๋ก ์ ๋ฐ์ดํธ๋ฅผ ํด์ฃผ๊ณ ์๊ณ ์ฝ๊ฒ ํ๋ก์ ํธ ๊ธฐ๋ณธ ํ๊ฒฝ์ ๊ตฌ์ถํ ์ ์์ด์ ๋ง์ ์ฌ๋๋ค์ด ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
์ค์น
- js
yarn create react-app my-app
- typescript
yarn create react-app my-app --template typescript
Webpack ์ด๋?
์นํฉ(webpack) ์ ์น์์ ์ฌ์ฉ๋๋ ๋ชจ๋ ์์(assets) ์ ๋ฒ๋ค๋ง ํด์ฃผ๋ ๋๊ตฌ์ ๋๋ค. ๋ฒ๋ค๋ง์ ๊ฐ๋ ์ ์ฌ๋ฌ๊ฐ ์ ํ์ผ ์ค์ ์ข ์์ฑ์ด ์กด์ฌํ๋ ํ์ผ์ ํ๋์ ํ์ผ๋ก ๋ฌถ์ด ํจํค์ง์ ์ํค๋ ๊ณผ์ ์ ์๋ฏธํฉ๋๋ค. ์นํฉ์ ์ฌ์ฉํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ ์ข ์์ฑ ๋ฟ๋ง ์๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ๋ด์์ ํ์ํ css๋ img์ ๊ฐ์ ํ์ผ(.css, .jpg)๋ ๋ฒ๋ค๋ง ํด์ ํ๋์ ํ์ผ๋ก ํฉ์ณ์ค์ ๋คํธ์ํฌ ์์ฒญ์ ์ต์ํ์ํฌ ์ ์์ต๋๋ค.
์นํฉ์ ๋ ธ๋ ๋ชจ๋ ์ค์ ํ๋์ ๋๋ค. ์นํฉ์ ์ฌ์ฉํ๋ ค๋ฉด Node.js ๊ฐ ์ค์น๋์ด ์์ด์ผ ํฉ๋๋ค.
์ค์น
yarn add webpack
'๐ป ํ๋ก๊ทธ๋๋ฐ > ๐ React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
React Router ์์ Navigate ํจ์๋ฅผ ํ์ฅํ์ฌ ์ฌ์ฉํ๊ธฐ (0) | 2023.08.17 |
---|---|
๋ฆฌ์กํธ ์ฌ์ฉ์ ์ดํด (0) | 2022.11.18 |
React ํ๋ก์ ํธ์ sass ์ฐ๊ฒฐ์ Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0. ์๋ฌ ํด๊ฒฐ (0) | 2021.07.18 |
React Router, a ํ๊ทธ (0) | 2021.07.17 |
NPM vs Yarn (0) | 2021.07.15 |