
๋ชจ๋ ๋ฆฌ์กํธ Deep Dive

๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์ ํ๊ธ ๋ฒ์ญ ์ฌ์ดํธ
๐๏ธ ๊ธฐ๊ฐ : 2023๋
11์ 17์ผ ~ 2024๋
4์ 11์ผ
ใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใ
๐ฆ ๋ด ํํธ ๋ชจ์๋ณด๊ธฐ
- 2.1 JSX๋? : ๊น๊ฑด์ฃผ๐
- 2.5 ์ปดํฌ๋ํธ์ ํจ์์ ๋ฌด๊ฑฐ์ด ์ฐ์ฐ์ ๊ธฐ์ตํด ๋๋ ๋ฉ๋ชจ์ด์ ์ด์ : ๊น๊ฑด์ฃผ๐
- 3.1.3 ~ 5 : ๊น๊ฑด์ฃผ ์ฅํจ์ค๐
- 5.1.1 : ๊น๊ฑด์ฃผ๐
- 6.3 : ๊น๊ฑด์ฃผ๐
- 1.6 ์กฐ๊ฑด๋ถ ๋ ๋๋ง - ๊น๊ฑด์ฃผ๐
- 1.7 ๋ชฉ๋ก ๋ ๋๋ง - ๊น๊ฑด์ฃผ๐
- 3.2 ์ํ ๊ตฌ์กฐ ์ ํ - ๊น๊ฑด์ฃผ๐
- 4-4 ์ดํํธ & ๋ผ์ดํ ์ฌ์ดํด - ๊น๊ฑด์ฃผ๐
์ผ์ : 2023๋ 11์ 17์ผ ๊ธ์์ผ 23์
์ฅ์ : ์คํฐ๋๋ฃธ1
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด
์ผ์ : 2023๋ 11์ 22์ผ ์์์ผ 22์
์ฅ์ : ์คํฐ๋๋ฃธ1
๋ฒ์ : 2์ฅ ๋ฆฌ์กํธ ํต์ฌ ์์ ๊น๊ฒ ์ดํด๋ณด๊ธฐ(2.1~2)
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด
์ฑํฐ๋ณ ๋ด๋น์ :
- 2.1 JSX๋? : ๊น๊ฑด์ฃผ๐
- 2.2 ๊ฐ์ DOM๊ณผ ๋ฆฌ์กํธ ํ์ด๋ฒ : ์ฅํจ์ค
์ผ์ : 2023๋ 11์ 29์ผ ์์์ผ 22์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : 2์ฅ ๋ฆฌ์กํธ ํต์ฌ ์์ ๊น๊ฒ ์ดํด๋ณด๊ธฐ(2.3~5)
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ
์ฑํฐ๋ณ ๋ด๋น์ :
- 2.3.1 : ๊นํฌ์
- 2.3.2 ~ 4 : ์ด๋ํธ
- 2.4 ๋ ๋๋ง์ ์ด๋ป๊ฒ ์ผ์ด๋๋๊ฐ? : ์ ์์ด, ์กฐ์งํ
- 2.5 ์ปดํฌ๋ํธ์ ํจ์์ ๋ฌด๊ฑฐ์ด ์ฐ์ฐ์ ๊ธฐ์ตํด ๋๋ ๋ฉ๋ชจ์ด์ ์ด์ : ๊น๊ฑด์ฃผ๐
์ผ์ : 2023๋ 12์ 6์ผ ์์์ผ 21์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : 3์ฅ ๋ฆฌ์กํธ ํ ๊น๊ฒ ์ดํด๋ณด๊ธฐ(3.1.1-8)
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ
์ฑํฐ๋ณ ๋ด๋น์ :
- 3.1.1 ~ 2 : ์ ์ ์ฉ ์ ์น๋ฏผ
- 3.1.3 ~ 5 : ๊น๊ฑด์ฃผ ์ฅํจ์ค๐
- 3.1.6 ~ 8 : ์ด๋ํธ ์กฐ์งํ
์ผ์ : 2023๋ 12์ 13์ผ ์์์ผ 21์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : 3์ฅ ๋ฆฌ์กํธ ํ ๊น๊ฒ ์ดํด๋ณด๊ธฐ(3.1.9-3.2.4)
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ
์ฑํฐ๋ณ ๋ด๋น์ :
- 3.1.9 ~ 12 : ์ ์น๋ฏผ ์ ์์ด
- 3.2.1 ~ 4 : ๊นํฌ์ ์ ์ ์ฉ
์ผ์ : 2023๋ 12์ 18์ผ ์์์ผ 21์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : 5์ฅ ๋ฆฌ์กํธ์ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(5.1.1-5.2.3)
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ
์ฑํฐ๋ณ ๋ด๋น์ :
- 5.1.1 ~ 5.2.1 : ๊น๊ฑด์ฃผ ์ฅํจ์ค๐
- 5.2.2 ~ 3 : ์ด๋ํธ ์กฐ์งํ
์ผ์ : 2023๋ 12์ 27์ผ ์์์ผ 21์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : 5์ฅ ๋ฆฌ์กํธ์ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(5.2.4-5.2.5)
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ
์ฑํฐ๋ณ ๋ด๋น์ :
- 5.2.4.1 : ์ ์น๋ฏผ ์ ์์ด
- 5.2.4.2 ~ 5.2.5 : ๊นํฌ์ ์ ์ ์ฉ
์ผ์ : 2024๋ 1์ 3์ผ ์์์ผ 21์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : 6์ฅ ๋ฆฌ์กํธ ๊ฐ๋ฐ ๋๊ตฌ๋ก ๋๋ฒ๊น ํ๊ธฐ, 10.1์ฅ ๋ฆฌ์กํธ 17 ๋ฒ์ ์ดํด๋ณด๊ธฐ
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ
์ฑํฐ๋ณ ๋ด๋น์ :
- 6.1 ~ 6.4 : ๊น๊ฑด์ฃผ ์ฅํจ์ค๐
- 10.1 ๋ฆฌ์กํธ 17 ๋ฒ์ ์ดํด๋ณด๊ธฐ : ์ด๋ํธ ์กฐ์งํ
์ผ์ : 2024๋ 1์ 10์ผ ์์์ผ 22์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : 8.2 ๋ฆฌ์กํธ ํ์ด ๊ถ์ฅํ๋ ๋ฆฌ์กํธ ํ ์คํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ
์ฑํฐ๋ณ ๋ด๋น์ :
- 8.2 ๋ฆฌ์กํธ ํ์ด ๊ถ์ฅํ๋ ๋ฆฌ์กํธ ํ ์คํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ : ์ ์น๋ฏผ ์ ์์ด
์ผ์ : 2024๋ 1์ 18์ผ ๋ชฉ์์ผ 21์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : 10.2 ๋ฆฌ์กํธ 18 ๋ฒ์ ์ดํด๋ณด๊ธฐ
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ
์ฑํฐ๋ณ ๋ด๋น์ :
- 10.2 ๋ฆฌ์กํธ 18 ๋ฒ์ ์ดํด๋ณด๊ธฐ : ๊นํฌ์ ์ ์ ์ฉ
์ผ์ : 2024๋ 1์ 22์ผ ์์์ผ 21์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : UI ๊ตฌ์ฑํ๊ธฐ ์ฑํฐ 1~8
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ, ํฉ์ด์
์ฑํฐ๋ณ ๋ด๋น์ :
- 1-1์ฅ ์ฒซ ๋ฒ์งธ ์ปดํฌ๋ํธ ~ 1-2์ฅ ์ปดํฌ๋ํธ import ๋ฐ export - ์ฅํจ์ค
- 1-3์ฅ JSX๋ก ๋งํฌ์ ์์ฑํ๊ธฐ ~ 1-4์ฅ JSX์์ JavaScript - ํฉ์ด์
- 1-5์ฅ ์ปดํฌ๋ํธ์ props ์ ๋ฌํ๊ธฐ - ์กฐ์งํ
- 1-6์ฅ ์กฐ๊ฑด๋ถ ๋ ๋๋ง - ๊น๊ฑด์ฃผ๐
- 1-7์ฅ ๋ชฉ๋ก ๋ ๋๋ง - ๊น๊ฑด์ฃผ๐
- 1-8์ฅ ์ปดํฌ๋ํธ ์์์ฑ ์ ์ง - ์กฐ์งํ
์ผ์ : 2024๋ 1์ 31์ผ ์์์ผ 22์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : UI ๊ตฌ์ฑํ๊ธฐ ์ฑํฐ 9, ์ํธ์์ฉ ์ถ๊ฐํ๊ธฐ ์ฑํฐ 1~4
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ, ํฉ์ด์
์ฑํฐ๋ณ ๋ด๋น์ :
- 1-9์ฅ UI๋ฅผ ํธ๋ฆฌ(Tree)๋ก ์ดํดํ๊ธฐ - ๊นํฌ์
- 2-1์ฅ ์ด๋ฒคํธ์ ์๋ตํ๊ธฐ - ์ด๋ํธ
- 2-2์ฅ state: ์ปดํฌ๋ํธ์ ๋ฉ๋ชจ๋ฆฌ - ์ด๋ํธ
- 2-3์ฅ ๋ ๋๋งํ๊ณ ์ปค๋ฐํ๊ธฐ - ์ ์น๋ฏผ
- 2-4์ฅ ์ค๋ ์ท์ผ๋ก์์ state - ์ ์น๋ฏผ
์ผ์ : 2024๋
2์ 15์ผ ๋ชฉ์์ผ 22์ 30๋ถ
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : ์ํธ์์ฉ ์ถ๊ฐํ๊ธฐ ์ฑํฐ 5~6
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์์ด, ์กฐ์งํ, ํฉ์ด์
์ฑํฐ๋ณ ๋ด๋น์ :
- 2-5์ฅ ์ฌ๋ฌ state ์ ๋ฐ์ดํธ๋ฅผ ํ์ ๋ด๊ธฐ - ์ ์์ด
- 2-6์ฅ ๊ฐ์ฒด state ์ ๋ฐ์ดํธ - ์ ์์ด
์ผ์ : 2024๋ 2์ 26์ผ ์์์ผ 11์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : ์ํ ๊ด๋ฆฌ ์ฑํฐ 1~3
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์์ด, ์กฐ์งํ, ํฉ์ด์
์ฑํฐ๋ณ ๋ด๋น์ :
- 3-2 ์ํ ๊ตฌ์กฐ ์ ํ - ๊น๊ฑด์ฃผ๐
- 3-3 ์ปดํฌ๋ํธ ๊ฐ ์ํ ๊ณต์ - ์ฅํจ์ค
์ผ์ : 2024๋ 3์ 4์ผ ์์์ผ 21์
์ฅ์ : ์คํฐ๋๋ฃธ4
๋ฒ์ : ์ํ ๊ด๋ฆฌ ์ฑํฐ 1, 4, 5
๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ๊นํฌ์, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ, ํฉ์ด์
์ฑํฐ๋ณ ๋ด๋น์ :
- 3-1 ์ํ๋ก ์ ๋ ฅ์ ๋ฐ์ - ์ ์ ์ฉ
- 3-4 ์ํ ์ ์ง ๋ฐ ์ฌ์ค์ - ํฉ์ด์
- 3-5 ์ํ ๋ก์ง ๋ฆฌ๋์ ์ถ์ถ - ์กฐ์งํ
์ผ์ : 2024๋ 3์ 14์ผ ๋ชฉ์์ผ 14์ ์ฅ์ : ์คํฐ๋๋ฃธ4 ๋ฒ์ : ์ํ ๊ด๋ฆฌ ์ฑํฐ 6~7 ๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์์ด, ์กฐ์งํ, ํฉ์ด์
- 3-6 ์ปจํ ์คํธ ํ์ฉ(์ํ ๊ณต๊ธ) - ์ ์น๋ฏผ
- 3-7 ๋ฆฌ๋์ & ์ปจํ ์คํธ ํ์ฉ ์ค์ผ์ผ ์ - ์ด๋ํธ
์ผ์ : 2024๋ 3์ 21์ผ ๋ชฉ์์ผ 14์ ์ฅ์ : ์คํฐ๋๋ฃธ4 ๋ฒ์ : ์ด์ค์ผ์ดํ ํด์น ์ฑํฐ 2~3 ๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์กฐ์งํ, ํฉ์ด์
- 4-1 Refs๋ก ๊ฐ ์ฐธ์กฐ - ์ ์์ด
- 4-2 Refs๋ก DOM ์กฐ์ - ์ ์น๋ฏผ
์ผ์ : 2024๋ 3์ 28์ผ ๋ชฉ์์ผ 14์ ์ฅ์ : ์คํฐ๋๋ฃธ4 ๋ฒ์ : ์ด์ค์ผ์ดํ ํด์น ์ฑํฐ 1,4~5 ๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ, ํฉ์ด์
- 4-3 ์ดํํธ & ์ฑํฌ๋ก๋์ด์ง - ์ ์ ์ฉ
- 4-4 ์ดํํธ๊ฐ ํ์ํ์ง ์์ ๊ฒฝ์ฐ - ์ด๋ํธ
- 4-4 ์ดํํธ & ๋ผ์ดํ ์ฌ์ดํด - ๊น๊ฑด์ฃผ๐
์ผ์ : 2024๋ 4์ 11์ผ ๋ชฉ์์ผ 13์ ์ฅ์ : ์คํฐ๋๋ฃธ4 ๋ฒ์ : ์ด์ค์ผ์ดํ ํด์น ์ฑํฐ 6~8 ๋ฉค๋ฒ : ๊น๊ฑด์ฃผ, ์ ์น๋ฏผ, ์ด๋ํธ, ์ฅํจ์ค, ์ ์ ์ฉ, ์ ์์ด, ์กฐ์งํ, ํฉ์ด์
- 4-5 ์ดํํธ์์ ์ด๋ฒคํธ ๋ถ๋ฆฌ - ์ฅํจ์ค
- 4-6 ์ดํํธ ์ข ์์ฑ ์ ๊ฑฐ - ํฉ์ด์
- 4-7 ์ปค์คํ ํ (๋ก์ง ์ฌ์ฌ์ฉ) - ์กฐ์งํ