์๋ ํ์ธ์!
์ต๊ทผ ๊ฐ์ฅ ๊ธฐ์ด๋ผ๊ณ ๋ณผ ์ ์๋ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ํด ํ์ตํ๊ณ ์์๋๋ฐ์, ์ด๋์ ๋ DOM ์์๋ฅผ ๊ฐ์ง๊ณ ๋ ์ ์๊ฒ ๋๋ค๋ณด๋ ๊ฐ์ฒด์งํฅ์ ๋ํด์๋ ํฐ ๊ด์ฌ์ด ์๊ฒจ ํ์ ์คํฌ๋ฆฝํธ์ ๊ฐ์ฒด์งํฅ์ ๋ํ ๊ฐ์๋ฅผ ์๊ฐํ์ต๋๋ค. ๐ ์ฐ์ต์ฉ ํ๋ก์ ํธ๋ ํ๊ณ ๋๋ ์๊ฐ๋ณด๋ค ํฐ ์ฅ๋ฒฝ์ ์๋ค๋ ์๊ฐ์ด ๋ค์์ด์. ํญ์ ํ์ ์คํฌ๋ฆฝํธ๊ฐ ์ค์ํ๋ค, ํ๋ฒ ์ฐ๋ฉด ํค์ด๋์ค์ง ๋ชปํ๋ ๋งค๋ ฅ์ด ์๋ค๋ ๊ฒ์ ๋ง๋ก๋ง ๋ค์ด ์ฒด๊ฐ์ด ๋์ง ์์์ด์. ๊ทธ๋ฌ๋ ์ค์ ๋ก ์ฌ์ฉํด๋ณด๋ ํ์ ์์ ๋งค์ฐ ์ค์ํ ์คํฌ์ด ๋ ๊ฒ ๊ฐ๋ค๋ ๋๋์ด ๋ค์์ต๋๋ค. ๊ต์ฅํ ๋ง์ ํ์ ๊ณผ ๊ฐ์ฒด์งํฅ ๊ฐ๋ ์ ์ ์ฉํ๋๋ฐ ํธ๋ฆฌํ๊ณ , ๋ฌด์๋ณด๋ค ์ํ๋ ํ์ ์ ๋ง๋ค์ด ์ฌ์ฉํ ์ ์๋ค๋ ์ ์ด ๊ฐ์ฅ ๋ง์์ ๋ค์์ต๋๋ค. ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์๋ฅผ ํ์ด๋๋ ๋ฏํ ์๋ฐ์คํฌ๋ฆฝํธ๋ณด๋ค ๊ฐ๋ฐํ๋ ๋์ค ํจ์ฌ ๊ณ ๋ฏผํ๋ ๋น๋์๊ฐ ๋์ด๋ฌ์ด์! ์๋ก์ด ๋์ ์์ ๊ฐ์ฅ ๋จผ์ ๊นจ๋ซ๊ฒ ๋ ์ข์ ์ํฅ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. :)
Start!
๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ์์ํ๋ ค๋ฉด Node.js๊ฐ ํ์ํฉ๋๋ค.
https://nodejs.org/en/download/
์ ๋งํฌ๋ก ๋ค์ด๊ฐ ์ํ๋ ์ด์์ฒด์ ๋ก ์ค์นํด์ฃผ์ธ์.
Node.js๋ฅผ ์ค์นํ์ จ๋ค๋ฉด Node Package Manager์ธ npm์ ์ฌ์ฉํ ์ ์๊ฒ ๋ผ์!
์ค์น๊ฐ ์๋ฃ๋์ จ๋ค๋ฉด ํตํฉ ๊ฐ๋ฐ ํ๊ฒฝ์์ ํ๋ก์ ํธ๋ฅผ ์์ฑํ ์ฐจ๋ก์ธ๋ฐ์, ์ ๋ ํ์ฌ VS Code๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
์์ ํ ํด๋ ์์น๋ก ์ด๋ํ์ ๋ค, ์๋ ์ฝ๋๋ฅผ ์ ๋ ฅํด ํ๋ก์ ํธ๋ฅผ ์์ฑํด์ฃผ์ธ์.
npm install -g create-react-app
create-react-app ํ๋ก์ ํธ๋ช
์ฝ๊ฐ์ ์๊ฐ ์์ ํ, ์์ฑ์ด ์๋ฃ๋์๋ค๋ฉด ์๋์ ๊ฐ์ด cd ๋ช ๋ น์ด๋ฅผ ์ด์ฉํด [ํ๋ก์ ํธ๋ช ] ํด๋๋ก ์ด๋ํด์ฃผ์ธ์.
cd ํ๋ก์ ํธ๋ช
์์ฑ๋ ํ๋ก์ ํธ ํด๋์๋ ๋ค์ํ ํ์ผ๋ค์ด ์๊ฒจ๋ ๊ฒ์ ๋ณผ ์ ์๋๋ฐ์, ๊ทธ์ค์์ ๊ฐ์ฅ ๊น๊ฒ ๋ด์ผํ ๊ฒ์ ๋ฐ๋ก src ํด๋์ ๋๋ค.
์ด๊ณณ์์ ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ๋ผ์. :)
ํ์ฌ App.js ํ์ผ์ ๋ณด์๋ฉด ๋ฆฌ์กํธ์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์์ฑ๋ ์ฝ๋๊ฐ ์๋๋ฐ์, ์ด๋ฅผ ํ์ธํ๊ธฐ ์ํด์ npm start๋ฅผ ํตํด ์คํํ์๋ฉด ๋ฉ๋๋ค! ํฌํธ ๋ฒํธ๋ localhost:3000 ์ด์์.
npm start
localhost:3000์ผ๋ก ๊ฐ๋ฉด ์ฐ๋ฆฌ์ ํ๋ก์ ํธ๊ฐ ๋ฉ์ง๊ฒ ๋์ํ๋ ๊ฒ์ ๋ณผ ์ ์์ด์!