ํ๋ก ํธ ์ค๋ฌด ์ต๊ณ ์ธ๊ธฐ ๋ฆฌ์กํธ(React),
๊ฐ์ ํ๋๋ก ํ์คํ๊ฒ ์ก์๋ณด์ธ์! ๐ฉ
ํน์, ์ด๋ฐ ๊ณ ๋ฏผ ์ค์ด์๋ผ๋ฉด ์ฃผ๋ชฉ!๐ก
Case 1
๋ฆฌ์กํธ๊ฐ ๊ฐ์ฅ ์ธ๊ธฐ๋ผ๋๋ฐ, ์ด๋์๋ถํฐ ์์ํ ์ง ๋ชจ๋ฅด๊ฒ ์ด์!
"ํ๋ก ํธ์๋ ์ฑ์ฉ ์์ฅ์์ ๊ฐ์ฅ ์ธ๊ธฐ๊ฐ ๋ง์ ๋๊ตฌ์ธ ๋ฆฌ์กํธ,
ํ์ง๋ง ๋ง์ ์์ํ๋ ค๋ ์ด๋์๋ถํฐ ์ด๋ป๊ฒ ํด์ผ ํ ์ง ๊ฐ์ด ์ค์ง ์์ต๋๋ค."
Case 2
๋์ ๋ฆฌ์กํธ ๊ฐ๋ฐ ํ๋ก์ธ์ค์ ๋ํ ํ์ ์ด ์์ด์.
"๋ฆฌ์กํธ๋ฅผ ํ์ฉํด ์ด์ฐ์ ์ฐํ์ฌ ๊ฐ๋ฐ์ ํ์ง๋ง,
์ด ๋ฐฉ๋ฒ์ด ๊ณผ์ฐ ํจ์จ์ ์ธ์ง ๊ฐ์ด ์ค์ง ์์ต๋๋ค.
๋ฆฌ์กํธ ๊ธฐ์ด๋ถํฐ ์ค์ ๊น์ง, ํ์คํ ์๋ ค๋๋ ค์ ๐ฏ
์ด ์ ์ด์ผ๊ธฐ. ๋ด ์ด์ผ๊ธฐ ๊ฐ๋ค๊ตฌ์? ๊ทธ๋ฌ๋ฉด ์ด ๊ฐ์์ ํจ๊ป ํ์
์ผ๊ฒ ๋ค์!
์ด ๊ฐ์์ ๋ชฉํ๋ ๋ค์๊ณผ ๊ฐ์์.
- ๊ฒฐ๊ณผ๋ฌผ์ JS์ ๋ฆฌ์กํธ ๋ฒ์ ์ผ๋ก ๋ง๋ค๋ฉฐ ๋ฆฌ์กํธ์ ์ญํ ๊ณผ ์ฅ์ ์ ํ๋์ ๊นจ๋ฌ์ ์ ์์ด์.
- ์ค์ต ์ดํ๋ฆฌ์ผ์ด์
์ฝ๋ฉ๊ณผ 12๋ฒ์ ๊ณผ์ ๋ฅผ ํตํด ์ด๋ก ์ ๋ชธ๊ณผ ๋จธ๋ฆฌ๋ก ์ตํ ์ ์์ด์.
์ด๋ฐ ๋ถ๋ค์ด ๋ค์ผ๋ฉด ์ข์์! ๐งโ๐
- ๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์๋ฅผ ์ฝ์ด ๋ณด์์ง๋ฉด ์ฌ์ ํ ์ด๋์๋ถํฐ ์์ํด์ผํ ์ง ๋ง๋งํ ๋๊ฐ ์ ํ
- ์ด๋ก ๋ณด๋ค๋ ํฌ๋ก์๋๋ก ์์ํ๋ ๊ฒ์ ์ ํธํ๋ ์คํ๊ฐ ์ ํ
- ๋ฆฌ์กํธ๋ฅผ ์จ๋ณด๊ธด ํ๋๋ฐ ๋๋์ฒด ์ด๋ค ์ ์ด ์ข์์ง ๊ผญ ์ง์ด ์ค๋ช
ํ๊ธฐ ์ด๋ ค์ด ์์ญ๋ฌ์ญ ์ ํ
์ ๊ฐ์๋ง์ ํน์ง ๐
- React.js์ ํน์ง์ ๋ช
ํํ ์ดํดํ ์ ์์ด์!
- ์์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฆฌ์กํธ ๊ฐ๋ฐ์ ๋น๊ตํ๋ฉด์ ๋ฆฌ์กํธ์ ํน์ง์ ๋์ฑ ํ์คํ๊ฒ ์ดํดํด๋ณด์ธ์.
- ๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์๋ฅผ ๋ฐํ์ผ๋ก ํ ๋ฐ๋ ์๋ ์์
!
- ๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์๊ฐ ๋งํ๋ ์ฃผ์ ๊ฐ๋
์ ๋ฐํ์ผ๋ก ๊ตฌ์ฑ๋ "๋ฆฌ์กํธ ํต์ฌ ์์
"์ด์์.
- ์ฒ ์ ํ ์ค์ต ์์ฃผ์ ๊ฐ์์์!
- ์ผํ๋ชฐ ๊ฒ์ ํ๋ฉด์ ์ง์ ์ฝ๋ฉํ๋ฉด์ ๋ง๋ค๊ณ 12๊ฐ์ง ์ค์ต ๊ณผ์ ๋ฅผ ํ๋ฉด์ ๋ชธ์ผ๋ก ์ตํ ์ ์์ด์.
- ๊ฐ ์์๋ง๋ค Git Branch๋ฅผ ์ค๋นํ์ด์.
- ์ค์ต ์ค ๋ฐ๋ผ์ค๊ธฐ ์ด๋ ต๊ฑฐ๋ ์ค์ต ์์ด ์์
ํ์๋ ๋ถ๋ค์ ์ํด ์์๋ง๋ค ๊น ๋ธ๋์น๋ฅผ ์ค๋นํ์ด์.
- ๋งค ์์๋ง๋ค ์ฌ์ฉํ ์ฝ๋๋ฅผ ๋ธ๋์น ์ด๋์ผ๋ก ๊ฐํธํ๊ฒ ๋ณผ ์ ์์ด์.
- ๋ณต์ต ํ ๋ฐ๋ก ๋ณผ ์ ์๋ ๊ฐ์๋
ธํธ ์ ๊ณต!
- ์์
์์ ์ฌ์ฉํ ๊ฐ์ ๋
ธํธ๋ ์ ๋ถ ๋ธ๋ก๊ทธ์์ ์ป์ ์ ์์ด์. (๋งํฌ: ๐๊น์ ํ ๋ธ๋ก๊ทธ)
- ์์
์ ์ ์ ์ฒด ๊ธ์ ๊ฐ๋ณ๊ฒ ์ฝ๊ณ ์์ํ๋ฉด ์ข์์. ์์ต๐
- ์์
ํ์๋ ์ฝ์ผ๋ฉด ๋ ์ข์์. ๋ณต์ต๐๐
์ด๋ฐ ๋ด์ฉ์ ๋ฐฐ์์ ๐
- ์ค๋นํธ
- ๋์์ธ๊ณผ ์๊ตฌ์ฌํญ ๋ถ์ ๋ฌธ์๋ฅผ ๋ณด๋ฉด์ ์์
์์ ๋ง๋ค ๊ฒฐ๊ณผ๋ฌผ์ ๋ฏธ๋ฆฌ ์๊ฐํด์.
- ์์ ์๋ฐ์คํฌ๋ฆฝํธ์ MVC ๋์์ธ ํจํด์ผ๋ก ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค๋ฉฐ UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ์์ฑ์ ๊นจ๋ฌ์์.
- ์๊ฐํธ
- ๋ฆฌ์กํธ์ ๋ฆฌ์กํฐ๋ธ์ ๊ฐ์๋ ๊ฐ๋
์ ์๊ฐํ๊ณ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ ์ด์ ์ ๋ํด ์ ์ ์์ด์.
- ๋ฆฌ์กํธ ๊ฐ๋ฐ์ ์ฌ์ฉ๋๋ ๋ช ๊ฐ์ง ๋๊ตฌ์ ์ญํ ๊ณผ ์ฌ์ฉ๋ฒ์ ์ตํ๊ณ ์ค์ต์ ์ค๋นํด์.
- ์ฌ์ฉํธ 1
- ๋ฆฌ์กํธ๋ฅผ ์ด์ฉํด ๊ฒฐ๊ณผ๋ฌผ์ ๋ค์ ์ฒ์๋ถํฐ ๊ตฌํํ๋ฉด์ ๋ฆฌ์กํธ์ ๊ธฐ๋ณธ ๊ฐ๋
์ ์ตํ ์ ์์ด์.
- State, ์ด๋ฒคํธ ์ฒ๋ฆฌ, ์กฐ๊ฑด๋ถ ๋ ๋๋ง, ํผ, ๋ฆฌ์คํธ์ ํค ๋ฑ ๋ฆฌ์กํธ ํต์ฌ ์๋ฆฌ๋ฅผ ์ดํดํ ์ ์์ด์.
- ์ฌ์ฉํธ 2 (์ปดํฌ๋ํธ)
- ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ฅผ ์๊ฐํ๊ณ ์ด์ ํธ์์ ๋ง๋ ๊ฒฐ๊ณผ๋ฌผ์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ก ๊ฐ์ ํด์.
- ํด๋์ค/ํจ์ ์ปดํฌ๋ํธ, State ๋์ด ์ฌ๋ฆฌ๊ธฐ, ์์, ์กฐํฉ ๋ฑ ์ปดํฌ๋ํธ๋ฅผ ๋ค๋ฃจ๋ฉด์ ๋ง์ฃผ์น๋ ์ด์๋ฅผ ๋ฐฐ์ธ ์ ์์ด์.
๊ธฐ๋ณธํ๋ฉด
![](https://jeonghwan-kim.github.io/static/82416287067ed0963da15e7141a5e854/5a190/result-01.png)
๊ฒ์ ๊ฒฐ๊ณผ ํ๋ฉด
![](https://jeonghwan-kim.github.io/static/f58af30a97f094802bf6b8ec7bbd1543/5a190/result-02.png)
์ต๊ทผ ๊ฒ์์ด ํ๋ฉด
![](https://jeonghwan-kim.github.io/static/ebee02c01faee6b617ae4353275a8f16/5a190/result-03.png)
![](https://cdn.inflearn.com/public/files/courses/326905/0f55798a-d7ae-4938-b346-03631636b3ad/ezgif.com-gif-maker.gif)
๋ค์ ๊ฐ์
![332123-eng.png](https://cdn.inflearn.com/public/files/courses/326905/b0b9cd41-816d-486d-9364-56c5f3dcf577/332123-eng.png)
[๋ฆฌ์กํธ 2๋ถ] ๊ณ ๊ธ ์ฃผ์ ์ ํ
์ ๋ฅผ ์๊ฐํฉ๋๋ค ๐งโ๐ซ
๊น์ ํ
์น ๊ธฐ์ ์ ํ์ตํ๊ณ ์ ๋ฆฌํ๋ ๊ฑธ ์ข์ํ๋ ์ค๋ฌด ๊ฐ๋ฐ์
์น ๊ธฐ์ ๋ฐ ๊ฐ๋ฐ์๋ก์์ ์๊ฐ์ ๋ด์ ๊ธฐ์ ๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ๊ณ ์์ด์.
ํ์ตํ ๊ธฐ์ ๊ณผ ์ค๋ฌด์์ ๋ฐฐ์ด ๋
ธํ์ฐ๋ฅผ ๋ชจ์ ๋ฐํ๋ ๊ฐ์ ํ์์ผ๋ก ๊ณต์ ํ๋ ํ๋๋ ํ๊ณ ์์ด์.
์ฐ์ํํ์ ๋ค์์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ผํ๊ณ ์์ด์.
๋ฆฌ์กํธ ๊ธฐ์ ๊ณผ ๊ด๋ จ๋ ์ปจํ
์ธ ๋ ์์ฑํ์ด์.
์๊ฐ์ ๋ถ๋ค์ ์ํ Q&A ๐
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋ ๊ฐ์์ธ๊ฐ์?
์๋์. ์น๊ฐ๋ฐ์ ๋ํ ๊ฒฝํ์ด ์กฐ๊ธ์ ์์ด์ผ ์๊ฐํ ์ ์์ต๋๋ค.
Q. ์ ๋ฆฌ์กํธ๋ฅผ ๋ฐฐ์์ผ ํ๋์?
์ต๊ทผ ์ฑ์ฉ ์์ฅ์์๋ ๋ชจ๋ ์น ํ๋ ์์ํฌ ์ง์์ ๊ฐ์ง ๊ฐ๋ฐ์๋ฅผ ์ฐพ๊ณ ์์ต๋๋ค.
๊ฐ์ฅ ์ธ๊ธฐ์๋ ๋ฆฌ์กํธ ๊ธฐ์ ์ญ๋์ ๊ฐ์ถ๋ค๋ฉด ๋ง์ ํ์ฌ์์ ์ฐพ๋ ์ธ์ฌ๊ฐ ๋ ์ ์์ ๊ฑฐ์์.
Q. ๋ฆฌ์กํธ๋ฅผ ๋ฐฐ์ฐ๋ฉด ๋ญ๊ฐ ์ข์๊ฐ์?
์ ์ ์ธํฐํ์ด์ค ๊ฐ๋ฐ์ ๋ํ ๊ณตํต ๋ฌธ์ ๋ฅผ ๋ฆฌ์กํธ๊ฐ ์๋น ๋ถ๋ถ ํด๊ฒฐํด ์ฃผ๋๋ฐ์.
๊ฐ๋ฐ์๋ ์กฐ๊ธ ๋ ๋น์ฆ๋์ค ๋ก์ง ๊ฐ๋ฐ์ ์ง์คํ ์ ์๊ณ ๋น ๋ฅด๊ฒ ์ ํ์ ๋ง๋ค์ด ๋ผ ์ ์๋ ํ์ ์ป์ ์ ์์ด์.
Q. ๊ฐ์๋ฅผ ๋ฃ๊ธฐ ์ , ์ค๋นํด์ผ ํ ๊ฒ์ด ์๋์?
ํ ๋ฒ์ด๋ผ๋ ์น ๊ฐ๋ฐ์ ๋ํ ๊ฒฝํ์ด ์์ด์ผ ์์
์ ๋ฃ๋ ์๋ฏธ๊ฐ ์์ด์.
HTML, JavaScript ๋ฌธ๋ฒ์ ์์งํ๊ณ ์๋ค๋ ์ ์ ํ์ ์์
์ ์งํํ๊ธฐ ๋๋ฌธ์ด์ฃ .
์์ง ์น ๊ธฐ์ด๊ฐ ๋ถ์กฑํ์ ๋ถ๋ค์ ๋จผ์ ํ์ตํ์ ๋ค์์ ์๊ฐํด ์ฃผ์ค ๊ฒ์ ์ถ์ฒ๋๋ ค์.
Q. ์์
๋ด์ฉ์ ์ด๋ ์์ค๊น์ง ๋ค๋ฃจ๋์?
๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์์ ์ฃผ์ ๊ฐ๋
๊ณผ ๊ณ ๊ธ ์๋ด์ ์ผ๋ถ๋ฅผ ๋ฐํ์ผ๋ก ์ค๋นํ ๋ด์ฉ์ด์์.
๋ฆฌ์กํธ์์ ํต์ฌ์ด๋ผ๊ณ ํ ๋งํ ๋ถ๋ถ์ ๋ค๋ฃจ๊ณ ์์ต๋๋ค.
Q. ์๊ฐ ๊ด๋ จ ์ฐธ๊ณ ์ฌํญ์ด ์๋์?
์์
์์ ์ฌ์ฉํ ๋๊ตฌ๋ 4๊ฐ์ง์์: Node.js, ๊ฐ๋ฐ ์๋ํฐ, ์น ๋ธ๋ผ์ฐ์ , Git.
๋ฏธ๋ฆฌ๋ณด๊ธฐ ์์
์์๋ ํ์ธํ ์ ์์ด์. (๋งํฌ: ๐ฅ ์์
๋ฏธ๋ฆฌ๋ณด๊ธฐ)