์ด๋ฏธ์ง๋ฅผ ํด๋ฆญํ๋ฉด ๋ก๋๋งต์ผ๋ก ์ด๋ํ์ค ์ ์์ต๋๋ค.
> ๋ก๋๋งต ๋งํฌ : https://link.onebitefe.com/r/3wokpi
์๋ฆฌ์ฆ ๊ฐ์ ๋งํฌ
> ํ ์
ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ ๋ฆฌ์กํธ :https://inf.run/v3XAj
> ํ ์
ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ ํ์
์คํฌ๋ฆฝํธ : https://inf.run/FpLm4
> ํ ์
ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ ๋ฅ์คํธ : https://inf.run/v3XAj
AI ์๋์๋ ๊ฒฐ๊ตญ ๋ฆฌ์กํธ, ํ ๊ฐ์๋ก ๋์ฅ๋ผ ์ ์์ด์.
ํ ์
ํฌ๊ธฐ๋ก ์๋ผ๋จน์ ์ ์๋๋ก ๋์๋๋ฆด๊ฒ์. ๐ฅ
๋ง์ ์๊ฐ์ ์ฌ๋ฌ๋ถ์ด ์ฌ๋ํด ์ฃผ์ ๋๋ถ์ ์ธ์ฌ์ดํธ ์ถํ์ฌ์ ํจ๊ป ๊ฐ์๋ฅผ ๋์๋ก ํด๋ผ ์ ์์์ต๋๋ค.
๋ค์ ํ๋ฒ ๋ชจ๋ ์๊ฐ์ ์ฌ๋ฌ๋ถ, ๊ด์ฌ ๊ฐ์ ธ์ฃผ์ ์ฌ๋ฌ๋ถ๋ค๊ป ์ง์ฌ์ผ๋ก ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
๋ฆฌ๋ด์ผ ๋ฒ์
ํ ์
ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ ๋ฆฌ์กํธ
์ธ์์์ ๊ฐ์ฅ ์น์ ํ๊ณ , ์ธ์์์ ๊ฐ์ฅ ์ฌ์ด ๋ฆฌ์กํธ ๊ฐ์๋ฅผ ํฅํด
AI ์๋์๋ ํตํ๋ ์ง์ง ์ค๋ ฅ,
JavaScript ๊ธฐ์ด๋ถํฐ React.js ์ค์ ํ๋ก์ ํธ๊น์ง
React.js๋ Node.js ํ๊ฒฝ์์ ๊ตฌ๋๋๋ JavaScript์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์
๋๋ค.
๊ทธ๋ฌ๋ฏ๋ก React.js๋ ๊ฒฐ๊ตญ JavaScript๋ฅผ ๋ ์ ํ์ฉํ ์ ์๋๋ก ๋์์ฃผ๋ ๋๊ตฌ์ ๋ถ๊ณผํฉ๋๋ค.
AI๊ฐ ์ฝ๋๋ฅผ ๋์ ์จ์ฃผ๋ ์๋์๋ ์ด๊ฑด ๋ณํ์ง ์์ต๋๋ค.
JavaScript์ Node.js๋ฅผ ์ ๋๋ก ์ดํดํ์ง ๋ชปํ๋ฉด React.js๋ฅผ ์ ๋๋ก ํ์ฉํ ์ ์์ด์.
์ด ๊ฐ์๋ JavaScript ๊ธฐ์ด๋ถํฐ Node.js๋ฅผ ๊ฑฐ์ณ React.js๋ฅผ ๋ฐฐ์๋๋ค.
๊ทธ๋ฐ๋ฐ ๊ทธ๋ฅ ๋ฐฐ์ฐ๋ฉด ๋ ์ฌ๋ฏธ์์ฃ ! ์ด 3๋ฒ์ ํ๋ก์ ํธ๋ฅผ ํตํด React.js๋ฅผ ๋ฐฐ์๋๋ค.
์ด๋ฐ ๊ณผ์ ์์์ ์ฌ๋ฌ๋ถ์ AI๊ฐ ๋ง๋ ์ฝ๋๋ ๊ฑฐ์นจ์์ด ์ฝ๊ณ ๊ณ ์น ์ ์๋,
๊ธฐ๋ณธ๊ธฐ ํํํ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ๊ฑฐ๋ญ๋์๊ฒ ๋ ๊ฒ๋๋ค.
18์๊ฐ์ ๋ถ๋
์ด 3๋ฒ์ React.js ํ๋ก์ ํธ
์ด ๊ฐ์๋ AI๊ฐ ์๋ ค์ฃผ๋ ์์ค์ ๋จ์ ์ฌ์ฉ๋ฒ์ ๊ทธ์น์ง ์์ต๋๋ค.
React.js๋ฅผ ๋๋ฌ์ผ ๋ค์ํ CS ์ง์๋ ํจ๊ป ๋ค๋ฃจ๋ฉฐ ์ด 3๋ฒ์ ํ๋ก์ ํธ
์นด์ดํฐ์ฑ, ํฌ๋๋ฆฌ์คํธ, ๊ฐ์ ์ผ๊ธฐ์ฅ์ ๋ง๋ค์ด๋ณด๋ฉฐ ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ๋ ํจ๊ป ๊ธฐ๋ฅผ ์ ์์ต๋๋ค.
๊ฐ์ ๊ตฌ์ฑ
๐ ์น์
1~2. ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด ๋ฐ ์ฌํ
React.js๋ฅผ ๋ฐฐ์ฐ๊ธฐ ์์ JavaScript์ ๊ธฐ์ด ๋ฐ ์ฌํ ๊ฐ๋
์ ์ดํด๋ด
๋๋ค.
์๋ฃํ ๋ฐ ์ฐ์ฐ์๊ฐ์ ๊ธฐ๋ณธ์ ์ธ ๊ฐ๋
๋ถํฐ,
๋ฐฐ์ด๋ฉ์๋๋ ๋น๋๊ธฐ ์์
๊ฐ์ ์ฌํ์ ์ธ ๋ด์ฉ๋ ํจ๊ป ์ดํด๋ด
๋๋ค.
๋ง์ฝ JavaScript๋ฅผ ์ด๋ฏธ ์๊ณ ์๋ค ํ๋๋ผ๋ ๋ณต์ต ์ฐจ์์์ ๋ค์๋๋ฌ๋ณด๊ธฐ ์ข์ต๋๋ค.
๐ ์น์
3. Node.js
React.js๋ Node.js๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋์ํ๋ ๊ธฐ์ ์
๋๋ค. ๋ฐ๋ผ์ Node.js๋ฅผ ๋ชจ๋ฅด๋๋ฐ React.js๋ฅผ ์ ์๋ ์์ฃ
3์น์
์์๋ Node.js๋ ๋ฌด์์ด๊ณ , ์ ํ์ํ๊ฒ ๋์๊ณ , ์ด๋ค ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์๋์ง ์ค์ต๊ณผ ํจ๊ป ์ดํด๋ด
๋๋ค.
๐ ์น์
4. React.js ๊ฐ๋ก
React.js๋ ๋ฌด์์ด๊ณ ํ ๊ธฐ์ ๊ณผ ๋น๊ตํด ์ด๋ค ์ฐจ๋ณ์ ์ ๊ฐ๊ณ ์๋์ง ์์๋ณด๊ณ , ๊ธฐ์กด์ ๊ธฐ์ ๋ค์ด ๊ฐ๋ ํ๊ณ์ ์ ์ด๋ป๊ฒ ํด๊ฒฐํ๋์ง ์์ธํ ์ดํด๋ด
๋๋ค. ์ด ๊ณผ์ ์์ ์ฐ๋ฆฌ๋ React.js์ ๋ํด ๋ ๊น์ด ์ดํดํ๊ฒ ๋ ๊ฒ ์
๋๋ค.
๐ ์น์
5. React.js ์
๋ฌธ
์๋ก์ด React App์ ์์ฑํ๊ณ React์ Component, State, Props ๋ฑ์ ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋ฅ์ ๋ํด ์ดํด๋ด
๋๋ค.
์ค์ต๊ณผ ํจ๊ป ๋ชจ๋ ๊ธฐ๋ณธ ๊ธฐ๋ฅ์ ์ฌ์ฉํด ๋ณด๊ณ ๊ทธ๋ฆผ์๋ฃ์ ํจ๊ป ์๊ฐ์ ์ผ๋ก ์๋ฒฝํ ์ดํดํฉ๋๋ค.
โณ๏ธ ์น์
6. React.js ํ๋ก์ ํธ 1. ์นด์ดํฐ ์ฑ
์ฒซ๋ฒ์งธ ๋ฆฌ์กํธ ํ๋ก์ ํธ "์นด์ดํฐ ์ฑ"์ ์ง์ ๋ง๋ค์ด๋ด
๋๋ค.
๊ฐ๋จํ์ง๋ง React.js์ ๋์ ์๋ฆฌ์ ์ค๊ณ ์ฒ ํ์ ์ฟ๋ณผ ์ ์๋ ์ข์ ํ๋ก์ ํธ์
๋๋ค.

๐ ์น์
7. ๋ผ์ดํ์ฌ์ดํด
๋ชจ๋ ์ธ๊ฐ์ด ํ์ด๋ ์ ์๊ธฐ, ์ฒญ์๋
๊ธฐ, ์ฒญ๋
๊ธฐ, ๋
ธ๋
๊ธฐ๋ฅผ ๊ฑฐ์ณ ํฉํผ์ ๋๋ฌํ๋ ๊ฒ ์ฒ๋ผ ๋ชจ๋ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ ํ์ด๋, ๋ณํ๋๊ณ , ์ฌ๋ผ์ง๋๋ค. ์ด๋ฐ ์ปดํฌ๋ํธ์ ์์ ์ฃผ๊ธฐ๋ฅผ ๋ผ์ดํ์ฌ์ดํด ์ด๋ผ๊ณ ํํํฉ๋๋ค.
์ปดํฌ๋ํธ์ ๋ผ์ดํ์ฌ์ดํด์ ์ดํดํ๊ณ ์ ์ดํ ์ ์๊ฒ ๋๋ฉด ์ํ๋ ํ์ด๋ฐ์ ์ํ๋ ๋์์ ์ํ์ํฌ ์ ์๊ฒ ๋ฉ๋๋ค. ๋ฐ๋ผ์ 7์น์
์์๋ ๋ผ์ดํ์ฌ์ดํด์ ๋ํด ์ดํด๋ณด๊ณ ์ค์ต๊ณผ ํจ๊ป ์ด๋ฅผ ์ ์ดํ๋ ๋ฐฉ๋ฒ์ ์ดํด๋ด
๋๋ค.
โณ๏ธ ์น์
8. React.js ํ๋ก์ ํธ 2. ํฌ๋๋ฆฌ์คํธ
๋๋ฒ์งธ ๋ฆฌ์กํธ ํ๋ก์ ํธ "ํฌ๋๋ฆฌ์คํธ ์ฑ"์ ์ง์ ๋ง๋ค์ด๋ด
๋๋ค.
์ด ํ๋ก์ ํธ๋ฅผ ๊ตฌํํ๋ฉด์ ๋ฐ์ดํฐ CRUD(์ถ๊ฐ, ์กฐํ, ์์ , ์ญ์ ) ๋ฐ ๊ฒ์ ๊ธฐ๋ฅ ๋ฑ์
React์์ ๋ฐฐ์ด ํํ์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๋ ์ฌ๋ฌ๊ฐ์ง ๋ฐฉ๋ฒ์ ์ดํด๋ด
๋๋ค.

๐ ์น์
9. useReducer - ์ํ๊ด๋ฆฌ ๋ก์ง ๋ถ๋ฆฌํ๊ธฐ
์ญํ ์ ๋ฐ๋ฅธ ์ฝ๋์ ๋ถ๋ฆฌ๋ ์ธ์ ๋ ์ํํธ์จ์ด ๊ฐ๋ฐ์ ๋ฏธ๋์
๋๋ค.
๋ณต์กํ ์ํ ๊ด๋ฆฌ ์ฝ๋๋ฅผ ๋ถ๋ฆฌํ ์ ์๋๋ก ๋์์ฃผ๋ useReducer์ ๋ํด ์ดํด๋ณด๊ณ
ํฌ๋๋ฆฌ์คํธ ํ๋ก์ ํธ์ ์ง์ ์ ์ฉํด ๋ณด๋ฉฐ ์ค์ตํฉ๋๋ค
๐ ์น์
10. ์ต์ ํ
์ฐ๋ฆฌ ํ๋ก์ ํธ์ ๋ถํ์ํ ์ฐ์ฐ์ด ์กด์ฌํ๋ค๋ฉด? ๊ณผ๊ฐํ ์ ๊ฑฐํด์ผ ๊ฒ ์ฃ !
๋ญ๋น๋๋ ์ฐ์ฐ์ ์ ๊ฑฐํ๋ React App์ ์ฌ๋ฌ๊ฐ์ง ์ต์ ํ ๊ธฐ๋ฒ์ ์ดํด๋ณด๊ณ
ํฌ๋๋ฆฌ์คํธ ํ๋ก์ ํธ์ ์ง์ ์ ์ฉํด ๋ณด๋ฉฐ ์ค์ตํฉ๋๋ค
๐ ์น์
11. Context
๋ ๊ฐ๊ฒฐํ๊ณ ๋ ๊น๋ํ๊ฒ ๋ค์ํ ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ๋ฅผ ๊ณต๊ธํ๋ Context์ ๋ํด ์ดํด๋ณด๊ณ
ํฌ๋๋ฆฌ์คํธ ํ๋ก์ ํธ์ ์ง์ ์ ์ฉํด ๋ณด๋ฉฐ ์ค์ตํฉ๋๋ค
โณ๏ธ ์น์
12. React.js ํ๋ก์ ํธ 3. ๊ฐ์ ์ผ๊ธฐ์ฅ
์ง๊ธ๊น์ง ๋ฐฐ์ด ๊ฐ๋
์ ์ด ๋์ ํด์ต์ข
ํ๋ก์ ํธ ๊ฐ์ ์ผ๊ธฐ์ฅ์ ์ง์ ๋ง๋ค์ด๋ด
๋๋ค.
์ถ๊ฐ๋ก ๋ธ๋ผ์ฐ์ ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ฌ์ฉํ๊ณ , ํ๋ก์ ํธ๋ฅผ ๋ฐฐํฌํด ์ฌ์ฉ์๋ค์ด ์ ์ํ ์ ์๋๋ก ๋ง๋ญ๋๋ค.
๋ฐ๋ชจ ๋งํฌ :https://emotion-diary.winterlood.com/

๐ ์น์
13. ๋ง์น๋ฉด์
๊ฐ์๋ ๋๋์ง๋ง ์ฐ๋ฆฌ์ ํ์ต์ ๋๋์ง ์์ต๋๋ค.
์์ผ๋ก ์ด๋ค ๋ฐฉํฅ์ฑ์ ๊ฐ์ง๊ณ ๋์๊ฐ์ผ ํ ์ง ์ด์ผ๊ธฐ ํด ๋ด
๋๋ค.
์ธ์์์ ๊ฐ์ฅ ์น์ ํ
๋ฆฌ์กํธ ๊ฐ์๋ฅผ ์ํ 4๊ฐ์ง ์์น
๐ฃ ์์น 1. ๋ฐ๋์ ์ฝ๊ณ ์น์ ํ๊ฒ, ์๊ฐ์ ์ผ๋ก ์ค๋ช
ํ ๊ฒ
์๋ฌด๋ฆฌ ๋ณต์กํ๊ณ ์ด๋ ค์ด ๋ด์ฉ์ด๋๋ผ๋!
์๊ฐ์๋ฃ์ ํจ๊ป ์น์ ํ๊ณ ์ฝ๊ฒ ์ค๋ช
ํ๊ธฐ ์ํด ๋ถ๋จํ ๋
ธ๋ ฅํ์ต๋๋ค.
๋ชจ๋ ์ง์ ๋ง๋ ์ด๋ฏธ์ง๋ค์ด๋ผ ์บก์ฒํด์ ํ์ต ๋ธ๋ก๊ทธ ํฌ์คํ
์ ์ด์ฉํ์
๋ ๋ฉ๋๋ค. ๐
๐ฃ ์์น 2. ๋ฐฐ์์ผ๋ก ์ฌ์ํด๋ ๋ค ๋ค๋ฆฌ๋๋ก ๋ฐ์ํ ๊ฒ
๋ณต์ต์ ์ํด ๋ค์ ๋ฃ๋ ์ค์ด๊ฑฐ๋, ๋ฐ์๋ค๋ฉด ๋ฐฐ์์ผ๋ก ๋ค์ด๋ณด์ธ์!
์ต๋ 2๋ฐฐ์ ๊น์ง ๋ฐ์์ด ์ ๋ค๋ฆฌ๋๋ก ๊ฐ๋ณํ ์ ๊ฒฝ์ผ์ด์ ๐
(์๋์ 1.5๋ฐฐ์์ผ๋ก ์ฌ์๋๋ ์์์ ํ๋ฒ ๋ค์ด๋ณด์ธ์!)
๐ฃ ์์น 3. ์ฝ๋๋ฅผ ์ฐพ์๋ณด๊ธฐ ์ฝ๊ฒ ์ ์ฅํด๋ ๊ฒ
์ ์จ ์์ฑํ ์ค์ต ์ฝ๋๋ค์ ์๋ฌด๋ ๊ฒ๋ ๋ณด๊ดํ๋ฉด ์์ฝ์ฃ ?
์ธ์ ๋ ๋ค์ ๋์๋ณผ ์ ์๋๋ก ์ฝ๋๋ฅผ ์น์
๋ณ๋ก ์ ๋๋์ด ๋ณด๊ดํ ์ ์๋๋ก ์ ๊ฒฝ ์ผ์ด์.
์ฝ๋ ๋ณด๊ด์ ๋งํฌ :https://github.com/winterlood/onebite-react-v2
๐ฃ ์์น 4. ๋์์์ด ์ํตํ ๊ฒ
์๊ฐ์ ์ ์ฉ ์ปค๋ฎค๋ํฐ์ ๋ชจ์ฌ ์๋ก ์ง์๊ณผ ์์์ ๊ณต์ ํ๋ฉฐ ์ฑ์ฅํฉ๋๋ค.
๋์ค์ฝ๋ ์ฑ๋ ์ฐธ๊ฐ : https://discord.gg/YDqhkH8XkN(์คํ์ฑํ
๋ฐฉ์ ์์
์๋ฃ์์ ํ์ธํ์ค ์ ์์ต๋๋ค)
์์ ์ง๋ฌธ Q&A ๐ฌ
Q. ๊ฐ์ ์๊ฐ ๋์์ด ์ด๋ป๊ฒ ๋๋์?
HTML, CSS์ ๋ํ ์ดํด๊ฐ ์์ผ์ ๋ถ๋ค์ด ๋ฃ๊ธฐ์ ์ต์ ํ๋ ๊ฐ์์
๋๋ค.
๋ค๋ง ๊ฐ์ ์ค๊ฐ์ค๊ฐ์ ์ค๋ช
์ด ์กด์ฌํ๊ธฐ์ ๋ด์ฉ ์์ง๊ฐ ๋น ์ญํ์ง ์์๋ ๋ฉ๋๋ค!
Q. ์ด์ ๋ง ์์ํ๋ ค ํฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ, Node.js๋ ์ ๋ชจ๋ฅด๋๋ฐ ๋ค์ด๋ ๊ด์ฐฎ์๊น์?
๋ค, ํ์ํฉ๋๋ค! ๐โโ๏ธ
๋ณธ ๊ฐ์๋ ๋ฆฌ์กํธ๋ฅผ ํ์ตํ๋๋ฐ ๊ผญ ํ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ง์๊ณผ Node.js ์ง์๊น์ง ์๋ ค๋๋ ค์.
๋ฐ๋ผ์ ๋ณธ ๊ฐ์ ํ๋๋ก ๋ฆฌ์กํธ์ ํ์ํ ๊ธฐ์ด ์ง์์ ๋จผ์ ํ์ตํ๊ณ , ๋ฆฌ์กํธ๊น์ง ํ์ตํ ์ ์์ต๋๋ค.
Q. ์์
์์ ์ด๋ ์ ๋์ ์์ค๊น์ง ๋ค๋ค์ง๋์?
React๊ฐ ํ์ํ ์ด์ ๋ถํฐ ๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ๋ฒ, ์ค์ ํ๋ก๋์
๊ฐ๋ฐ์ ์ํ ์ฑ๋ฅ ์ต์ ํ ๊ธฐ๋ฒ์ ๋ค๋ฃน๋๋ค.
๋, Vercel๋ฅผ ์ด์ฉํ์ฌ ์ค์ ๋ก ๋ฐฐํฌํ๊ณ Open Graph ์ค์ ์ผ๋ก ๋ง๋ฌด๋ฆฌํ์ฌ
์น ํ๋ก์ ํธ์ ์ฒ์๋ถํฐ ๋๊น์ง ๊ฐ๋ฐํ ์ ์๋ ๋ชจ๋ ์ง์์ ๋ด๊ณ ์์ต๋๋ค.
ํฌํธํด๋ฆฌ์ค ๋ฐ ๊ฐ์ธ ์์