ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ํ ์ ๋์์ฃผ๋ ํด ์ธ create react app ์ ์ด์ฉํ์ฌ ํฌ๋ ๋ฆฌ์คํธ๋ฅผ ์์ํ๋ ค๊ณ ํ๋ค
ํฐ๋ฏธ๋์
`npx create-react-app todo` ๋ฅผ ๋ฃ์๋๋ฐ ๋ญ๊ฐ ์๋ฌ๊ฐ๋ธ.
์ฝ์ด๋ณด๋ ๋ฒ์ ์ ๋ฌธ์ ์ธ๊ฒ๊ฐ๊ณ ํด๊ฒฐํ๊ธฐ ์ํ ๋ช ๋ น์ด์ ์ฐธ๊ณ ํ ์ฌ์ดํธ ์ฃผ์๋ฅผ ์๋ ค์ฃผ์ด์ ๊ฒ์ํด๋ด.
๋ฆฌ์กํธ ๊ณต์๋ฌธ์์ ๊ฐ๋ณด๋
์ด์ ์ create react app์ ์ ์ญ์ ์ผ๋ก ์ค์นํ์์ ๊ฒฝ์ฐ ์ญ์ ํ ์ฌ์ค์นํ์ฌ ํญ์ npx ์ต์ ๋ฒ์ ์ ์ฌ์ฉํ๋๊ฒ์ ๊ถ์ฅํจ.
๊ทธ๋์... ์์๋ช ๋ น์ด๋ก ์ญ์ ํด๋ณด๋ คํ๋๋ฐ ๋ญ๊ฐ...๋ฌด์์์ npm ๋ฒ์ ํ์ธํ ์ ๋ฐ์ดํธ ํ๋๋ฒ์ ๊ฒ์
ํด์ -g๋ฅผ ๋ฃ์ (-g๋ global๋ก ์ ์ญ ์ค์น?? ๋ฅผ๋งํ๋๊ฒ ๊ฐ๋ค npm ๋ช ๋ น์ด ์ธ๋ฏ) cra๋ฅผ ๋ค์ ์ค์น ํด๋ดค์ง๋ง
์ด๋ฒ์ ์ ์์ฐ์ด๋ ๋ฒ์ ์ธ๊ฒ๊ฐ๋ค. ์ผ๋ฅธ ์ ๋ฐ์ดํธ ํ๋ผ๊ณ ํด์ npm ์ ๋ฐ์ดํธ ์ฌ๊ฒ์.
๊ฒ์ํด๋ณด๋ ์์ npm์ ์ ์ญ์ ์ผ๋ก ์ค์นํ๋ ์ต์ ์ด ์๋๊ฑฐ๊ฐ์ ๋ค์ ์ค์นํ๊ณ ๋ฒ์ ํ์ธ ํด๋ณด๋
๋ฒ์ ์ด ์ ๊ทธ๋ ์ด๋ ๋์๋ค.
๊ทธ๋ผ ๊ตฌ๋ฒ์ ์ด ์๋์ํ์์ npm install์ ํ๋ฉด ๋ถํ์ํ๊ฒ ๋ ์ค์น๊ฐ ๋๊ฑธ๊น?์ถ์๋๋ฐ
์น์ ํ๊ฒ 9๊ฐ ์ง์ฐ๊ณ 48๊ฐ ๋ฐ๊พธ๊ณ ๋ฑ๋ฑ ๋ค์๋ ค์ค์ ์ข์๋ค.
๋ค์ ์ฐฝ์กฐ-๋ฆฌ์กํธ-์ฑ์ ํด๋ด.
์ค ๋ญ๊ฐ ์ฐฝ์กฐํด๋ ์ผ๋จ ์์ค์ ๋ญ๊ฐ ๋์๋ค๋ ์๊ทธ๋์ด ์์ผ๋ฉด ์์ฝ์ด๋ณด์ง์๋๋ฐ
๊ต์ฅํ ๋ง์ ํจํค์ง๊ฐ ์ค์น๋๊ฒ์ผ๋ก ๋ณด์
์ด๋๋ ์๋๋ฉด
npx create-react-app@latest ํ๋ก์ ํธํ์ผ๋ช
์น์ ํ๊ฒ ๋ช ๋ น์ด ๊น์ง ์๋ ค ์ฃผ๋ฉด์ todo๋ฆฌ์คํธ๋ฅผ ๋ง๋ค๊ธฐ์ํ ์ ํ ์ด ์๋ฃ๋์๋ค.
์ฌ๋ด์ผ๋ก npm start๋ฅผ ํ๋๋ฐ ์ฃผ์๋ ๋จ๊ณ ๋ธ๋ผ์ฐ์ ์คํ์ด ์๋์ด์
๋๋ญ๋ ํ๊ณ ๊ณต์๋ฌธ์ ์ฝ๋ค๊ฐ ์ ์ฐฝ์กฐ ๋ฆฌ์กํธ ํ์๋ cd๋ฅผ ํด์ค์ผํ๋๊ตฌ๋ ํ๊ณ ๋ค์ ํ์ผ ๋ค์ด๊ฐ์ ์๋ํ๋๋ ์ ์ด๋ ธ๋ค..
++ ์ค๋ ๋๋์ ์ฐฝ์กฐ ๋ฆฌ์กํธ ์ฐ๋๊น ํธํ๊ณ ์ข๊ธฐ๋ ํ๋ฐ ๊ฐ๋จํ ํฌ๋ ๋ฆฌ์คํธ ๋ง๋ค๋ฉด์ ๋๋ฌด ๋ง์ ํจํค์ง๋ฅผ ์ค์นํ๋๊ฒ๊ฐ์
1๋ฒ์ด๋ฉด ์๊ด์๊ฒ ์ง๋ง ์ง์์ ์ผ๋ก ์ฐ๊ธฐ์๋ ์ข์ง์์๊ฒ ๊ฐ๋ค. ๋ง๋ค๋ฉด์ ํ์ํ ํจํค์ง๋ฅผ ์๊ฒ ๋๋ฉด ๋ค์์ ํ์ํ ๊ฒ ์์ฃผ๋ก
์ ํ ์ ์ผ๋ก ์ค์น ํ๋๊ฒ์ด ์ข์๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ค์๋ค.
++ ๋ช ์ ์ด๋ผ ์ด๋จธ๋๋ค ์์๋๋ฐ ๋๋ฌด ์ข์ง๋ง ๊ณต๋ถ๋ ์์๋๋ค ๋ด์ผ ๋์๊ฐ์
์ฑ๋ง๋ค๊ธฐ์ ์๋ฃ๊ตฌ์กฐ, ์๊ณ ๋ฆฌ์ฆ, ๋น๋๊ธฐ ๊ณต๋ถ๋ฅผ ํด์ผ๊ฒ ๋ค.
'TIL -์ผ๊ฐํ์ต๊ธฐ๋ก > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Weather API & data component (0) | 2022.02.05 |
---|---|
[React ์์ต์] Tic Tac Toe.. (0) | 2022.02.03 |
๋ฆฌ์กํธ๋ก Todo list๋ฅผ ๋ง๋ค์ด๋ณด์ (0) | 2022.01.30 |
REACT - 21.12.26 - JSX, STATE, PROPS (0) | 2021.12.26 |
4W_JS_React Route (0) | 2021.12.03 |
๋๊ธ