์ ์ ์ง๊ฐ! ์ต์ ๋ฆฌ์กํธ(React) ํ์ต,
๊ธฐ์ด๋ถํฐ ์ค์ ํ์ฉ๊น์ง ์์ฐจ๊ฒ ๋ฐฐ์๋ณด์ธ์.
[์ค์ ๋ฆฌ์กํธ ํ๋ก๊ทธ๋๋ฐ] ๊ฐ์ ํ์
๊ธฐ๋ฐ์ผ๋ก ๋ง๋ ๊ฐ์! ๐
2020๋
7์์ ์ถํ๋ ๋ฆฌ์กํธ ์ฑ
์ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ์๋ฅผ ์งํํฉ๋๋ค.
๋น ๋ฅด๊ฒ ๋ฐ์ ํ๋ ์น ๊ธฐ์ ์ ์ต์ ํธ๋ ๋๋ฅผ ์ตํ๋ ค๋ฉด ๊ฐ์ ์๋ฃ์ ์ต์ ํ๊ฐ ๊ฐ์ฅ ์ค์ํฉ๋๋ค.
๋ฆฌ์กํธ ํ
์ ์ค์ ์ ์ผ๋ก ๋ค๋ฃจ๋ [์ค์ ๋ฆฌ์กํธ ํ๋ก๊ทธ๋๋ฐ] ๊ฐ์ ํ์ผ๋ก ๋ฆฌ์กํธ๋ฅผ ๋ฐฐ์ฐ์ธ์!
โฒ <์ค์ ๋ฆฌ์กํธ ํ๋ก๊ทธ๋๋ฐ> ๊ฐ์ ํ์ด ๊ถ๊ธํ๋ค๋ฉด ์ฑ
์ด๋ฏธ์ง๋ฅผ ํด๋ฆญํด์ฃผ์ธ์.
์ด ๊ฐ์์์ ๋ฐฐ์ฐ๋ ๊ฒ๋ค โ๏ธ
์ด ๊ฐ์์์ ๋ค๋ฃจ๋ ์ฑ
์ ๋ด์ฉ์ ์๋์ ๊ฐ์ต๋๋ค.
- 1์ฅ: ๋ฆฌ์กํธ ํ๋ก์ ํธ ์์ํ๊ธฐ
- 3์ฅ: ์ค์ํ์ง๋ง ํท๊ฐ๋ฆฌ๋ ๋ฆฌ์กํธ ๊ฐ๋
์ดํดํ๊ธฐ
- 4์ฅ: ๋ฆฌ์กํธ ์ค์ ํ์ฉ๋ฒ
- 6์ฅ: ๋ฆฌ๋์ค๋ก ์ํ ๊ด๋ฆฌํ๊ธฐ
- ๊ทธ๋ฆฌ๊ณ ์ฑ
์๋ ์๋ 2๊ฐ์ ํ๋ก์ ํธ!
ํ๋ก์ ํธ1: 2048 ๊ฒ์ ๋ง๋ค๊ธฐ ๐น๏ธ
์์ํ๊ฒ ๋ฆฌ์กํธ๋ง ์ฌ์ฉํด์ 2048 ๊ฒ์์ ๋ง๋ค์ด ๋ด
๋๋ค.
๋ฆฌ์กํธ์ ํต์ฌ ๊ธฐ๋ฅ์ธ useState, useEffect์ ์ฌ์ฉ๋ฒ์ ์ตํ ์ ์์ต๋๋ค.
โฒ ์์ ๋ฆฌ์กํธ๋ก ์ ์ํ 2048 ๊ฒ์
ํ๋ก์ ํธ2: ๋ด๋น์ ์ฐพ๊ธฐ ์๋น์ค ๋ง๋ค๊ธฐ ๐
์ง๋จ์ง์ฑ์ ์ด์ฉํ ๋ด๋น์ ์ฐพ๊ธฐ ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ด
๋๋ค.
๋ชจ๋๊ฐ ์ฝ๊ฒ ์ ๋ณด๋ฅผ ์์ ํ ์ ์๋๋ก ํธ๋ฆฌํ ์์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
์ด ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ณด๋ฉด์ ํ๋ก ํธ์๋์์์ ์ธ์ฆ์ฒ๋ฆฌ ๋ฐฉ์๊ณผ,
redux, redux-saga๋ฅผ ์ด์ฉํ API ํต์ ์ฝ๋ ์์ฑ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.
โฒ ๋ด๋น์ ์ฐพ๊ธฐ ์๋น์ค
์จ๋ผ์ธ ์ค์ต ์ฝ๋ ์ ๊ณต โก
๊ฐ์์์ ์ฌ์ฉ๋ ๊ฑฐ์ ๋ชจ๋ ์ฝ๋๋ฅผ ์จ๋ผ์ธ IDE(CodeSandbox)์์ ํ์ธํ์ค ์ ์์ต๋๋ค!
๊ฐ ๊ฐ์ ํ๋ฉด์์ ํ๋จ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ์ธ์.
์จ๋ผ์ธ์์ ์ฝ๋๋ฅผ ์ง์ ์์ ํ๋ฉด์ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ ์ ์์ผ๋ฏ๋ก ํ์ต์ ํฐ ๋์์ด ๋ ๊ฒ์ผ๋ก ๊ธฐ๋ํ๊ณ ์์ต๋๋ค.
>> ์ํ ๋งํฌ <<

์์ ์ง๋ฌธ Q&A ๐๐ปโโ๏ธ
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋์?
A. ๋ง์ฝ ํ๋ก๊ทธ๋๋ฐ ๊ฒฝํ์ด ์๋ค๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋จผ์ ์ตํ๊ณ ๋ค์ผ์
์ผ ํฉ๋๋ค.
๊ผญ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์๋๋๋ผ๋ ํ๋ ์ด์์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ํ ์ดํด๊ฐ ์๋ค๋ฉด ์ด ๊ฐ์๋ฅผ ์ดํดํ ์ ์์ต๋๋ค.
Q. ์ด ๊ฐ์๋ง์ ํน๋ณํ ์ฅ์ ์ด ์์๊น์?
A. ์ฑ
์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ ๊ฐ์์ธ ๋งํผ ์ง์์ ์๋ ์ปค๋ฆฌํ๋ผ์ ์ ๊ณตํฉ๋๋ค.
๊ฒ๋ค๊ฐ ์ฑ
์๋ ์๋ ์ค์ต ํ๋ก์ ํธ 2๊ฐ๋ฅผ ํฌํจํฉ๋๋ค.
Q. ์ด ๊ฐ์์์๋ ์ด๋ค ํ๋ก๊ทธ๋จ์ ์ฌ์ฉํ๋์?
A. ์ด ๊ฐ์์์ ์ฌ์ฉํ๋ ์ฃผ์ ํจํค์ง๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
react, create-react-app, react-router-dom, redux, redux-saga, antd, axios
๊ทธ๋ฆฌ๊ณ IDE๋ vscode๋ฅผ ์ถ์ฒํฉ๋๋ค.
Q. ์ฑ
์์๋ ํ์
์คํฌ๋ฆฝํธ, Next.js๋ ๋ค๋ฃจ๋๋ฐ์?
A. ์ฑ
์ ์๋ ๋ด์ฉ์ ํ๋์ ๊ฐ์๋ก ๋ด๊ธฐ์๋ ๋ด์ฉ์ด ๋๋ฌด ๋ง์์ ๋๋ ์ ๊ฐ์๋ฅผ ์ ์ํ ์๊ฐ์
๋๋ค.
๊ทธ๋์ ํ์
์คํฌ๋ฆฝํธ, Next.js๋ฅผ ๊ฐ๊ฐ ๋ณ๋์ ๊ฐ์๋ก ์ ์ํด๋ณผ๊น ์๊ฐ ์ค์
๋๋ค.
Q. ์๋ง์ ์ง์ํ๋์?
A. ํ๋ก์ ํธ2๋ฅผ ์ ์ธํ ๋ชจ๋ ์์์์ ์๋ง์ ์ง์ํฉ๋๋ค.
Q. ์ฑ
์ ๊ตฌ๋งคํด์ผํ๋์?
A. ์๋์ ์ฑ
์ด ์์ด๋ ์ดํดํ์ค ์ ์๋๋ก ๊ตฌ์ฑํ์ต๋๋ค.
Typescript, Next.js, ์นํฉ/๋ฐ๋ฒจ ๋ฑ์ ์ถ๊ฐ๋ก ๊ณต๋ถํ์ค ๋ถ๋ค๋ง ๊ตฌ๋งคํ์๋ฉด ๋ฉ๋๋ค.
๋ค๋ฅธ ๊ฐ์ ๋ณด๊ธฐ ๐