[์ค์ ๋ฆฌ์กํธ ํ๋ก๊ทธ๋๋ฐ] ์ฑ ์ ์ ์ ์ง๊ฐ! ๋ฆฌ์กํธ์ ๊ธฐ์ด๋ถํฐ ์ค์ ํ์ฉ๋ฒ๊น์ง ์ตํ ์ ์์ต๋๋ค.
๋ฆฌ์กํธ ๊ธฐ๋ณธ ์๋ฆฌ ๋ฐ ์ฌ์ฉ๋ฒ
์ค์ ์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฆฌ์กํธ ํ์ฉ๋ฒ
๋ฆฌ๋์ค ๊ธฐ์ด ๋ฐ ๊ณ ๊ธ ํ์ฉ๋ฒ
์ ์ ์ง๊ฐ! ์ต์ ๋ฆฌ์กํธ(React) ํ์ต,
๊ธฐ์ด๋ถํฐ ์ค์ ํ์ฉ๊น์ง ์์ฐจ๊ฒ ๋ฐฐ์๋ณด์ธ์.
2020๋
7์์ ์ถํ๋ ๋ฆฌ์กํธ ์ฑ
์ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ์๋ฅผ ์งํํฉ๋๋ค.
๋น ๋ฅด๊ฒ ๋ฐ์ ํ๋ ์น ๊ธฐ์ ์ ์ต์ ํธ๋ ๋๋ฅผ ์ตํ๋ ค๋ฉด ๊ฐ์ ์๋ฃ์ ์ต์ ํ๊ฐ ๊ฐ์ฅ ์ค์ํฉ๋๋ค.
๋ฆฌ์กํธ ํ
์ ์ค์ ์ ์ผ๋ก ๋ค๋ฃจ๋ [์ค์ ๋ฆฌ์กํธ ํ๋ก๊ทธ๋๋ฐ] ๊ฐ์ ํ์ผ๋ก ๋ฆฌ์กํธ๋ฅผ ๋ฐฐ์ฐ์ธ์!
โฒ <์ค์ ๋ฆฌ์กํธ ํ๋ก๊ทธ๋๋ฐ> ๊ฐ์ ํ์ด ๊ถ๊ธํ๋ค๋ฉด ์ฑ ์ด๋ฏธ์ง๋ฅผ ํด๋ฆญํด์ฃผ์ธ์.
์ด ๊ฐ์์์ ๋ค๋ฃจ๋ ์ฑ ์ ๋ด์ฉ์ ์๋์ ๊ฐ์ต๋๋ค.
์์ํ๊ฒ ๋ฆฌ์กํธ๋ง ์ฌ์ฉํด์ 2048 ๊ฒ์์ ๋ง๋ค์ด ๋ด
๋๋ค.
๋ฆฌ์กํธ์ ํต์ฌ ๊ธฐ๋ฅ์ธ useState, useEffect์ ์ฌ์ฉ๋ฒ์ ์ตํ ์ ์์ต๋๋ค.
โฒ ์์ ๋ฆฌ์กํธ๋ก ์ ์ํ 2048 ๊ฒ์
์ง๋จ์ง์ฑ์ ์ด์ฉํ ๋ด๋น์ ์ฐพ๊ธฐ ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ด
๋๋ค.
๋ชจ๋๊ฐ ์ฝ๊ฒ ์ ๋ณด๋ฅผ ์์ ํ ์ ์๋๋ก ํธ๋ฆฌํ ์์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
์ด ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ณด๋ฉด์ ํ๋ก ํธ์๋์์์ ์ธ์ฆ์ฒ๋ฆฌ ๋ฐฉ์๊ณผ,
redux, redux-saga๋ฅผ ์ด์ฉํ API ํต์ ์ฝ๋ ์์ฑ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.
โฒ ๋ด๋น์ ์ฐพ๊ธฐ ์๋น์ค
๊ฐ์์์ ์ฌ์ฉ๋ ๊ฑฐ์ ๋ชจ๋ ์ฝ๋๋ฅผ ์จ๋ผ์ธ IDE(CodeSandbox)์์ ํ์ธํ์ค ์ ์์ต๋๋ค!
๊ฐ ๊ฐ์ ํ๋ฉด์์ ํ๋จ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ์ธ์.
์จ๋ผ์ธ์์ ์ฝ๋๋ฅผ ์ง์ ์์ ํ๋ฉด์ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ ์ ์์ผ๋ฏ๋ก ํ์ต์ ํฐ ๋์์ด ๋ ๊ฒ์ผ๋ก ๊ธฐ๋ํ๊ณ ์์ต๋๋ค.
>> ์ํ ๋งํฌ <<
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, ์นํฉ/๋ฐ๋ฒจ ๋ฑ์ ์ถ๊ฐ๋ก ๊ณต๋ถํ์ค ๋ถ๋ค๋ง ๊ตฌ๋งคํ์๋ฉด ๋ฉ๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
๋ฆฌ์กํธ๋ฅผ ๋ฐฐ์ฐ๊ณ ์ถ์ ํ์ ๊ฐ๋ฐ์
๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํด๋ดค์ง๋ง ์์ง ํท๊ฐ๋ฆฌ๋ ๋ถ๋ค
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML
CSS
JAVASCRIPT
1,983
๋ช
์๊ฐ์
146
๊ฐ
์๊ฐํ
307
๊ฐ
๋ต๋ณ
4.7
์
๊ฐ์ ํ์
2
๊ฐ
๊ฐ์
- [์ค์ ๋ฆฌ์กํธ ํ๋ก๊ทธ๋๋ฐ] ์ ์
- react contributor (PR ๋งํฌ)
- if kakao 2019 ์ปจํผ๋ฐ์ค์์ [๋ฆฌ์กํธ: ๊ทธ๊ฒ๋ง์ ๊ฒฐ์ ํด์ฃผ๋ง] ๋ฐํ
- ์นด์นด์คํ์ด์ง ๊ธ๋ก๋ฒ์น ๊ฐ๋ฐ ์ค
์ ์ฒด
53๊ฐ โ (9์๊ฐ 56๋ถ)
์ ์ฒด
98๊ฐ
4.4
98๊ฐ์ ์๊ฐํ
๊ณต๊ฐํ์ง ์๋ ๊ฐ์๋ก ์๊ฐ์ด ์ ํ๋ฉ๋๋ค.