
์น ํ๋ก ํธ์๋๋ฅผ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฒซ๊ฑธ์
ํจ๋น Hyobin
์น ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ฅผ ํฌ๋งํ๋ค๋ฉด? ์ฌ๋ฏธ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์๋ก ์ฒซ๊ฑธ์์ ๋ด๋์ด๋ณด์ธ์โจ
์ ๋ฌธ
JavaScript, DOM
๊ธฐ๋ณธ ๋ฌธ๋ฒ๋ถํฐ ์ฌํ ๊ฐ๋ ๊น์ง ํ์ตํ๋ฉด์, ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก SPA๋ฅผ ๊ฐ๋ฐํด ๋ด ์๋ค๐ฅ
์๊ฐ์ 8,449๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ






์นด์นด์ค ๋ชจ๋น๋ฆฌํฐ
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!





์นด์นด์ค ๋ชจ๋น๋ฆฌํฐ
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!
๋จผ์ ๊ฒฝํํ ์๊ฐ์๋ค์ ํ๊ธฐ
5.0
Chan
์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์๋ ์ด๋ฏธ ํ๋ ๋ฒ ๋ค์ด๋ณธ ์ ์ด ์์์ต๋๋ค. ํ์ง๋ง ์ด์ํ๊ฒ ํญ์ ์๋ ๊ฒ ๊ฐ์ง๋ง ๋ง์ ์ฐ๋ ค๋ฉด ์ ์ ๋๋ ์ํ๊ฐ ๊ณ์ ๋์๋๋ฐ, ์ด ๊ฐ์๋ ๊ทธ ์ ๋งคํ๋ ๋ถ๋ถ๋ค์ ํ๋์ฉ ์ ๋ฆฌํด์ค ๋๋์ด์์ต๋๋ค. ๋ฌธ๋ฒ๋ง ์ค๋ช ํ๊ณ ๋๋๋ ๊ฒ ์๋๋ผ ์ ์ด ๊ฐ๋ ์ด ํ์ํ์ง, ์ด๊ฒ ๋์ค์ SPA์์ ์ด๋ป๊ฒ ์ฐ์ด๋์ง๊น์ง ๊ณ์ ์ฐ๊ฒฐํด์ ์ค๋ช ํด์ฃผ์ ์ ์ข์์ต๋๋ค. ํนํ ์ข์๋ ๊ฑด ํ๋ก์ ํธ ๋ถ๋ถ์ด์์ต๋๋ค. ๋ณดํต์ ๋ฐ๋ผ ์น๊ณ ๋๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ, ์ด ๊ฐ์๋ ์ค๊ฐ ํ๋ก์ ํธ โ ๋ฌธ์ ์ ์ธ์ โ ๊ฐ๋ ๋ณด์ โ ์ต์ข ํ๋ก์ ํธ ์ด ํ๋ฆ์ด ์์ด์ ์๊ฐ์ ์ ํ ์๊ฐ ์์์ต๋๋ค. ์์งํ ์ฝ์ง ์์๋๋ฐ, ๊ทธ๋งํผ ๋จ๋ ๊ฒ ๋ง์์ต๋๋ค. ๊ฐ์ ์๋ฃ(ํธ๋๋ถ)๋ ์ ๋ฆฌ๊ฐ ์ ๋์ด ์์ด์ ๊ฐ์ ๋ค์ ๋๋ฟ๋ง ์๋๋ผ ๋ณต์ตํ ๋ ๊ณ์ ์ฐธ๊ณ ํ๊ฒ ๋ฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ค์ ํ ๋ฒ ์ ๋๋ก ์ ๋ฆฌํ๊ณ ์ถ์ ๋ถ๋ค๊ป ์ถ์ฒํ๊ณ ์ถ์ ๊ฐ์์ ๋๋ค.
5.0
์ฐ๋ ๊ธฐ
์๊ฐํ์ต๋๋ค! ์๊ฐํ๋ฉด์ ๋๋ ์ ์ ํฉ๋ฆฌ์ ์ธ ๊ฐ๊ฒฉ์ ์ ๋ง ๊ผผ๊ผผํ ์ค๋นํ ๊ฐ์๋ฅผ ๋ค์ ์ ์์ด์ ๊ธฐ๋ปค์ด์. ๊ฐ๋ฐ ๊ฐ์๋ ๊ฐ๊ฒฉ๋ ์ฒ์ฐจ๋ง๋ณ์ธ๋ฐ ์ ๋ ์ง๊ธ๋ ์ฌ๋ฌ ๊ฐ์๋ฅผ ํจ๊ป ๋ฃ๊ณ ์์ง๋ง, ๊ฐ๊ฒฉ์ด ๋น์ธ๋ค๊ณ ๊ฐ์ฌ๊ฐ ์ง๋ฌธ ์๋ต์ ์ ๋๋ก ํด์ค๋ค๋ ์ง ์ฝ๋ ์ ๋ฐ์ดํธ๊ฐ ์๋ค๋ ์ง ๊ทธ๋ฌ์ง ์๋๋ผ๊ณ ์. ๊ทธ๋์ ์ด๋ ๊ฐ์ฌํํ ๊ต์ฅํ ์ค๋งํ ์ํ์๋๋ฐ ํจ๋น ๋ ๊ฐ์๋ฅผ ๋ค์ผ๋๊น ์ง์ง ํ์คํ ๋ค๋ฅด๋ค์. ๋ค๋ฅธ ๋ถ๊ณผ ๋น๊ตํด์ ๋งํ๊ธด ์ข ๊ทธ๋ ์ง๋ง ํจ๋น ๋ ๊ฐ์ ๊ต์ก์๊ฐ ๋์ฑ ๋ ์ ๋์ จ์ผ๋ฉด ์ข๊ฒ ์ด์. ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์๋ ๋ฆฌ์กํธ๋ next.js ์ด ์ชฝ์ผ๋ก ๊ฐ์๋ฅผ ํ์ฅํ์๋ฉด ๋๋ฌด๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค! ์ธํ๋ฐ n๋ ์ฐจ๋ก์ ๊ฐ์ฅ ๊ฐ์ฑ๋น ์์ผ๋ฉด์ ์ ์ตํ๋ ๊ฐ์์์ต๋๋ค. ๋ฌผ๋ก ๋ง์ง๋ง ํ์ด๋ ํ๋ก์ ํธ๋ ์ด๋ ค์ ์ง๋ง, ์ด๋ ค์ด๋งํผ ๊ฒธ์ํ๊ฒ ๋ค์ ๋ณต์ตํ๋ผ๋ ์๋ฏธ์ธ ๊ฒ ๊ฐ์ ์๊ทน์ด ๋์์ด์. ์ด๋ ๊ฒ ๊ธธ๊ฒ ์๊ฐํ์ ๋จ๊ธด ์ ์ ์๋๋ฐ ํจ๋น ๋ ํฌ์ด ๋์ด์ ๋ค๋ฅธ ๋ถ๋ค๊ป ์ถ์ฒ๋๋ฆฌ๊ณ ์ ์๊ฐํ์ ๋จ๊น๋๋ค! ์์ธํ ํธ๋๋ถ, ๋ช ํํ ๋์ , ๊น๋ํ ์์ , ๋น ๋ฅธ ์ง์์๋ต ๋ฑ ๋ญ ํ๋ ์์ฌ์ด ์ ์์์ต๋๋ค. ์ธํ๋ฐ์ด๋ ๊ต์ก๊ณ์์ ๋์ฑ ์ ๋ช ํด์ง์๊ธธ ๋ฐ๋๋๋ค! ์ ๋ค์์ต๋๋ค!
5.0
kimday365
์ ๊ฐ ์ด์ง์ ์ค๋นํ๋ฉฐ ๊ฑฐ์ 5๋ ๋ง์ ๋ค์ FE๋ก ๋์์ค๊ฒ ๋์์ต๋๋ค. ๋ค์ ์์ํ๋ ค๋ ์ด๋์๋ถํฐ ๊ณต๋ถํด์ผํ ์ง ๋ง๋งํ๋๋ฐ์, ์ด ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ์ด์ ์ ๊ฐ๋ณ๊ฒ ์๊ณ ์๋ ๋ถ๋ถ์ ๋ํ ๋ณต์ต๋ถํฐ, ์๋ก์ด ๋ฌธ๋ฒ ๊ตฌ์กฐ, ๊ทธ๋ฆฌ๊ณ ๊ฐ์ฒด / ํ๋กํผํฐ / ์ปดํฌ๋ํธ ๋จ์ ๋ฑ ์ฌํ๊ณผ์ ๊น์ง ์์ฃผ ์์ฐจ๊ฒ ๋ฐฐ์ธ ์ ์์ด ๋๋ฌด ์ข์์ต๋๋ค. ํนํ ํ๋ก์ ํธ๋ฅผ ์งํํ๊ฒ ์ ๋ง ์ ์ตํ ์๊ฐ์ด์์ต๋๋ค. ๋จ์ํ ๊ธฐ์ด ์ง์ & ๋ฌธ๋ฒ๋ง ๋ฐฐ์ฐ๋ ๊ฒ์ด ์๋๋ผ ์ค๋ฌด์์ ์ด๋ป๊ฒ ์ฌ์ฉํ๋ฉด ์ข์์ง์ ๋ํด ๋ฐฐ์ ์ผ๋ฉฐ, ๋งค๋ฒ ๋ง๋ค๋ todo๋ฆฌ์คํธ๊ฐ ์๋ ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ์งํํด์ ๋์ฑ ํฅ๋ฏธ๋ก์ด ์๊ฐ์ด์์ต๋๋ค! ๋ค์ ๊ฐ์๋ ๋๋ฌด ๊ธฐ๋๋ฉ๋๋ค! ์ข์ ๊ฐ์ ๊ฐ์ฌํฉ๋๋ค :)
๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ ๋ฌธ๋ฒ
์ค๋ฌด ๊ฐ๋ฐ์ ํ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋
Promise ๊ฐ์ฒด์ async/await ์ ํตํ ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ
์ปดํฌ๋ํธ์ ๋ชจ๋ํ
DOM API๋ฅผ ์ฌ์ฉํ ์น ์์ ์กฐ์
state์ setState๋ฅผ ์ฌ์ฉํ ์ํ ๊ด๋ฆฌ
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด SPA ๊ฐ๋ฐ
history api๋ฅผ ํตํ ๋ผ์ฐํ
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฆฌ์กํธ์ฒ๋ผ ์ฌ์ฉํ๊ธฐ
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ทจ์ ํ๊ณ ์ถ์ ๋ถ๋ค
ํ๋ก์ ํธ๋ฅผ ๊ฐ๋ฐํ๋ฉฐ ์ฌ๋ฌ ๊ฐ๋ ์ ํ์ตํ๊ณ ์ถ์ ๋ถ๋ค
๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฐ์๋ณด๊ณ ์ถ์ ๋ถ๋ค
๊ฐ์ ์๋ฃ์ ํจ๊ป ์๊ฐํ๊ณ ์ถ์ ๋ถ๋ค
์คํฐ๋๋ฅผ ํตํด, ์ฌ๋ฌ ์ฌ๋๋ค๊ณผ ํจ๊ป ํ์ตํ๊ณ ์ถ์ ๋ถ๋ค
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML
CSS
12,495
๋ช
์๊ฐ์
479
๊ฐ
์๊ฐํ
137
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
20
๊ฐ
๊ฐ์
์๋
ํ์ธ์ ๊นํจ๋น ์
๋๋ค ๐
ํ๋ก ํธ์๋๋ฅผ ํฌ๋งํ๋ ๋ถ๋ค์ ์ํด ์ฝ๊ณ ์น์ ํ ๊ฐ์๋ฅผ ์ ๊ณตํ๊ณ ์์ต๋๋ค.
์น ํ์ด์ง
์จ๋ผ์ธ ๊ฐ์
๋์
์ธ๋ถํ๋
udemy, codeit, ํ์์ฌ์๋ํ๊ต ๋ฑ ํน๊ฐ ์งํ
์ ์ฒด
56๊ฐ โ (9์๊ฐ 40๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
6. ๋ณ์์ ์์
09:22
8. ์ฐ์ฐ์
20:43
9. ์กฐ๊ฑด๋ฌธ
11:39
10. ํจ์
15:01
11. ์ค์ฝํ
13:34
12. ํธ์ด์คํ
08:00
14. ๊ฐ์ฒด
15:45
15. ๋ฐฐ์ด
13:47
16. ์์ฑ์ ํจ์
03:50
17. ๋ฐ๋ณต๋ฌธ
18:13
21. spread์ rest
14:22
22. ๋น๋๊ธฐ ์ฒ๋ฆฌ
10:59
24. async์ await
11:06
25. API ํธ์ถ
12:01
์ ์ฒด
160๊ฐ
4.8
160๊ฐ์ ์๊ฐํ
์๊ฐํ 3
โ
ํ๊ท ํ์ 5.0
์์ ๋จ
5
๋ชฉ์๋ฆฌ๊ฐ ์๋ค๋ฆฌ๊ณ ๋ฐ์๋ ๋๋ฐ๋๋ฐ ์ ํํด์ 2๋ฐฐ์์ผ๋ก ๋ค์ด๋ ์ ๋ค๋ฆฝ๋๋ค! ๊ทธ๋ฆฌ๊ณ ์ดํดํ๊ธฐ ์ฌ์ด ๊ตฌ์ฑ์ผ๋ก ๋์ด์๋ค์. ๊ฐ์ฌํฉ๋๋ค.
๋ ธํ๊ธฐ๋! ์ข์ ์๊ฐํ ๊ฐ์ฌ๋๋ฆฝ๋๋ค :) ์๊ฐ ์ถํ๋๋ฆฝ๋๋ค๐๐
์๊ฐํ 2
โ
ํ๊ท ํ์ 5.0
5
์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ ์ด ๋ถ์กฑํ ์ ์๊ฒ ์ ํฉํ ๊ฐ์๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ํด ํ์ํ ๊ฐ๋ ๋ค๋ง ์์ ์ป๊ณ ๊ฐ๋๊ฒ ๊ฐ์ ์ ๋ง ๋ง์ ๋์์ด ๋์์ต๋๋ค ๐ ํธ๋๋ถ์ด ์ ๊ณต๋์ ํ๋ก์ ํธ ์ฝ๋๋ฅผ ์์ฑํ๋๋ฐ ํธํ์ต๋๋ค!! ๋ณต์ตํ๊ธฐ๋ ์ข๊ณ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ ํจ๊ป ๋ณด๊ธฐ์๋ ์์ฃผ ์ข์ต๋๋ค. ์ข์ ๊ฐ์๋ฅผ ์ ๋ ดํ๊ฒ ์๊ฐํ ์ ์์์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค!!
๋ผ๋ฐ๋์ด๋ ๐ ์ข์ ์๊ฐํ ๊ฐ์ฌํฉ๋๋ค!! ์๊ฐ ์ถํ๋๋ฆฝ๋๋ค ๐ฅณ๐ฅณ
์๊ฐํ 5
โ
ํ๊ท ํ์ 5.0
5
์น ํ๋ก ํธ์๋๋ฅผ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฒซ๊ฑธ์ ๊ฐ์ข๋ฅผ ๋ฃ์ ๋ค์, ์ด ๊ฐ์ข๋ฅผ ์๊ฐ์ ํ๋๊น ์ดํด๊ฐ ์ ๋์ด์ ์ข์์ต๋๋ค. ์ํ ๊ฐ์ข๋ฅผ ์ฒญ์ทจํ์ ํ ์ด ๊ฐ์ข๋ฅผ ์กฐ๊ธ ๋ถ๋ด์ค๋ฝ๋ค๊ณ ํ์ ๋ถ๋ค์ ์น ํ๋ก ํธ์๋๋ฅผ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฒซ๊ฑธ์ ๊ฐ์ข๋ฅผ ์ถ์ฒํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ธฐํ๊ฐ ๋์ ๋ค๋ฉด ๋ง๋ค๊ณ ๋ฐ๋ผ ํ๋ฉด์ ๋ฐฐ์ฐ๋ ์ผํ๋ชฐ ์ฌ์ดํธ๋ฅผ ๊ฐ์ข๋ฅผ ๊ธฐํํด์ ๋ง๋ค์ด ์ฃผ์ จ์ผ๋ฉด ํฉ๋๋ค. ์ธํ๋ฐ, ๊ธฐํ ๋ฑ๋ฑ ์ผํ๋ชฐ ์ฌ์ดํธ ๊ด๋ จ ๊ฐ์ข๋ ๋ณ๋ก ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ์๋ฐ ๊ฐ์ข๊ฐ ๋ง์ ๋์์ด ๋์์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
pasw9๋ ์๊ฐ ์ถํ๋๋ฆฝ๋๋ค ๐ ํ ๋ฒ์ ๋๋ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์๋, ์ฒซ๊ฑธ์ ๊ฐ์๋ฅผ ์๊ฐํ์ ๋ค์์ ์๊ฐํ๋ฉด ๋ ์ข์ ๊ฐ์์ ๋๋ค!! ์ถํ์ ์ผํ๋ชฐ ์ฌ์ดํธ ๊ฐ์ข๋, ๊ธฐํ๊ฐ ๋๋ค๋ฉด ์ค๋นํด๋ณด๊ฒ ์ต๋๋ค! ์ข์ ์๊ฐํ ๊ฐ์ฌํฉ๋๋ค ๐
์๊ฐํ 1
โ
ํ๊ท ํ์ 5.0
5
์๊ฐ์๋ฃ๋ ๊น๋ํ๊ณ ๋ฌด์๋ณด๋ค ๋ผ์ด๋ธ ์ฝ๋ฉ์ผ๋ก ์ฒ์ฒํ ํ๋ํ๋ ์๋ ค์ฃผ์ ์ ์ข์์ต๋๋ค. ๊พธ์คํ ์๊ฐ ํ ์๊ฐํด๋ณด๊ฒ ์ต๋๋ค! ์ข์ ๊ฐ์ ๊ฐ์ฌํฉ๋๋ค.
์ข์ ์๊ฐํ ๊ฐ์ฌํฉ๋๋ค๐ ๊ผญ ์๊ฐํ์ จ์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค!!
์๊ฐํ 13
โ
ํ๊ท ํ์ 5.0
์์ ๋จ
5
์ด์ ํ๋ ๊ฐ์๋ฅผ ๋ณด๊ณ ํ์ ์ปค๋ฎค๋ํฐ์ ๊ฐ์ ํ์ฌ ํด๋น ๊ฐ์๋ฅผ ์๊ฒ๋์์ต๋๋ค. SPA ๋ฅผ ์ด์ฉ๋ง ํด๋ดค์ง ์ง์ ๋ง๋๋๊ฑด ์ํด๋ณธ๊ฑฐ ๊ฐ์์ ์ด๋ฏธ ๊ฒฐ์ ๋ฒํผ์ ๋๋ฅด๊ณ ์๋๋ผ๊ตฌ์ ใ ใ ํ๊ณ ์๋๊ฒ ์์ด์ ํ์ ์ฑ๋ฆฐ์ง๋ ์ฐธ์ฌํ์ง ๋ชปํ์ง๋ง ๋งค์ฐ ๋ง์กฑํ๋ ๊ฐ์ ์ ๋๋ค. ์๋ ๋ถ๋ถ์ ๋๊ฒจ๊ฐ๋ฉฐ, ํธ๋๋ถ์ผ๋ก ๋ณต์ต ํ๋ฉด์ ๊ฐ์ ํ๋ฐ๋ถ๋ง ๋ค์๋๋ฐ ๋งค์ฐ ๋ง์กฑํ๋ ๊ฐ์ ์ ๋๋ค. ์ด์ ํ๋๋ ๋์ ์ด ์ข์ ๋ฃ๊ธฐ ํธํ๋๋ฐ ํจ๋น๋๋ ๋์ ์ด ๋จ๋ค๋ฅด๊ฒ ์ข๋ค์. ๊ฐ์ฌํฉ๋๋ค.
SK๋! ์ข์ ์๊ฐํ ๊ฐ์ฌ๋๋ฆฝ๋๋ค ๐ ์ถํ์ ๋ค์ ํ ๋ฒ ๋ณต์ต์ฉ์ผ๋ก ํ์ ์ฑ๋ฆฐ์ง์ ์ฐธ์ฌํด๋ณด์๋ ๊ฒ๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค :) ๋ค์ ํ ๋ฒ ์ข์ ์๊ฐํ ๊ฐ์ฌ๋๋ฆฝ๋๋ค ๐
์ง์๊ณต์ ์๋์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
๊ฐ์ ๋ถ์ผ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!