๐โโ๏ธ์ฝ๋์ ์คํ๋ฆฐํธ ๋ฏธ์
3, 4 ๐ํ๊ณ
๐โ์คํ๋ฆฐํธ ๋ฏธ์
3
JS ์ค๊ธ ์์
Event Listner & Handler
- ๋๋์ด ํ๋ก๊ทธ๋๋ฐ ์์
- ์ฝํ
๊ฐ ์๋ ํ๋ก๊ทธ๋๋ฐ์ ์ํด์ ์จ๋ณด๋ JS๋ ๋ ์ฒ์์ด๋ผ์ ๋๋์ด ์ด ์น๊ตฌ๊ฐ ์ด๋ป๊ฒ ์ฐ์ด๋์ง ์๊ฒ๋จ
- ๋ ๋ค ๊ฐ๋
์ ์ฌ์. ํ์ง๋ง ๋ง์ 100์ค ๋์ด๊ฐ๋ ์ฝ๋๋ฅผ ์ง๊ณ ์๋ค๋ณด๋ฉด ํท๊ฐ๋ ค ๋ฏธ์น๊ฒ ๋ค.
- quick return์ ํ์ฉํด์ ์ฝ๋์ ๊ฐ๋
์ฑ์ ๋์ด๋๊ฒ ๊น์ง ํ์
ํ์! ํ์ง๋ง ๋ฉํ ๋์ฒ๋ผ ์ฝ๋๋ฅผ ์ด์ผ์ ์ผ,,, ์๊ณ ๋ฆฌ์ฆ์ ๋ค์ํ๊ฒ ์ง๋ ๊ณผ์ ์ ์ ๋ฉ์ฒญํด์ ์ ๋ชป ํ๊ฒ ์ด์,,
- ์ธ๋ป ๋ณด๊ธฐ์ ๋ณ๊ฑฐ ์๋๊ฒ ๊ฐ์ ๋ณด์ด์ง๋ง ์ฌ์ค์ ์ ์ผ ์๊ฐ ๋ง์ด ์ก์๋จน์
- ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ฌ์ด์ฆ์ ๋ฐ๋ผ์ ์ด๋ฏธ์ง๋ ๋ฒํผ์ visible๊ณผ invisible์ ์กฐ์ ํ๋๊ฒ ์๊ทผ ๊ท์ฐฎ์๋ค.
- ๋ชจ๋ฐ์ผ QA๋ฅผ ์งํํ ๋, chrome ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋๋ฐ, ์ด ์กฐ์ฐจ ์ ํํ์ง ์๋ค๊ณ ํ๋ค.
์ด์ฉ์ง
๐โ์คํ๋ฆฐํธ ๋ฏธ์
4
API ์์ฒญ ์ฃผ๊ณ ๋ฐ๊ธฐ
- JS๋ฅผ ์ด์ฉํด์ fetch, axios๋ฅผ ํ์ฉํด์ api ์ฃผ๊ณ ๋ฐ๊ธฐ๋ฅผ ํ์ตํจ
- ์ฌ์ค์ ๋ด์ฉ ์์ฒด๋ ๊ฐ์ฅ ํ์
ํ๊ธฐ ์ฌ์ ์. ๋ค๋ง ๊ณ์ ์๋ฌ ๋ ์ ๋ ํผ์ ํ๋ด๊ณ ์ ๊น ์ฝ๋ ์๋ณด๋ค๊ฐ ์ฟจํ์ ์ฐจ๋ฉด ๋ค์ ์ฝ๋ ์น๊ธฐ๋ฅผ ๋ฐ๋ณตํจ.
- ๋ง์ง๋ง ํ์ธํ๊ณ pr๋ง ์ฌ๋ฆฌ๋ฉด ๋๋๋ฐ ๊ท์ฐฎ์์ ๋ฐ๋๋ผ์ธ๊น์ง ๋ฏธ๋ฃจ๊ณ ์๋คใ
...
async์ await, promise
- ์ด๋ค์ ๋์ ์์๊ฐ ์์ง๋ ํท๊ฐ๋ฆฐ๋ค.
- ๋ฉํ ๋ง ์๊ฐ์ ๊ณต์ ์ฃผ์ ํ์ผ์ ๋ณด๊ณ ์ด๋ค๋ scope์ ๋ฐ๋ผ ์งํ๋๋ ์์๊ฐ ๋ ๋ค๋ฆ์ ๋ฐฐ์
CallStack(๋๊ธฐ ์์
) -> MicrostackQueue(Promise) -> MacrostackQueue(timer ๋ฑ๋น๋๊ธฐ ์์
) ์์๋ก ์ด๋ฃจ์ด์ง
์ดํ
- ๋ถ๋ช
์คํ๋ฆฐํธ ๋ฏธ์
1,2 ํ ๋๋ ๋จธ๋ฆฌ ์ฅ์ด ์ง๋ฉด์ ํ๋๋ฐ, ์๋ก์ด ์คํ๋ฆฐํธ ๋ฏธ์
์ ์์ํ ์๋ก ์ ๋ฏธ์
๋ค์ด ์ ๋
๋ก ๋ณด์ธ๋ค.
- JS ํ,,, ๋ฉ์๋ ์ข
๋ฅ๊ฐ ์ด๋ ๊ฒ ๋ง์๋ฐ ์์ง ๋ค ์ธ์ฐ์ง๋ ๋ชปํ๊ณ ํ์ฉ๋ ์ ๋๋ก ๋ชปํ๋๊ฑธ ๋ฐ์ฑํ๋ค.
- ๋ฏธ์
์ ์งํํ๊ณ ์ฝ๋๋ฅผ ์น๋ฉด ์น ์๋ก ๊ทธ๋ฅ ๊ฐ๋ฐ ์ํ๋ ์ฌ๋์ ๋ณ์ ์ปค๋น๋ง๋ฅ ์ผ์ผ์ ๋ฅ๋ ฅ์ ๋ค ๋์ด์ค๊ณ ์ถ๋ค๋ ์๊ฐ๋ฐ์ ์๋ ๋ค... ๋นจ๋ฆฌ ์ฑ์ฅํ๊ณ ์ถ์ ๋ด ์์ฌ๊ณผ ๋ชป ๋ฐ๋ผ์ค๋ ๋ด ๋จธ๋ฆฌ์ ๋ถ์กฐํ
- ๊ทธ๋๋ ์ด๋ฒ์ฃผ์ ์นญ์ฐฌ์ ์กฐ๊ธ์ฉ ๋ฐ์์ ๊ธฐ๋ปค๋คใ
ใ
- ์ด์ฉ๋ค๋ณด๋ ๊ฐ์ฌ๋๊ณผ ์ผ๋์ผ ๋ํ ์๊ฐ์ ๊ฐ๊ฒ ๋์๋๋ฐ, ํ์
์ ๋์๋๋ ๋ง์ถคํ ์ด์ผ๊ธฐ๋ฅผ ๋ง์ด ์ฃผ์
์ ๊ฐ์ฌํ๋ค. ๊ธฐ์ตํด์ผ ํ ๊ฑด, "์ง์ ๊ฐ๋ฅํ ์ฑ์ฅ"์ ์ด๋ฃฐ ์ ์๋ ๊ฐ๋ฐ์๋ก ์ฑ์ฅํ๊ธฐ!
- ๋ด์ผ๋ถํฐ react๋ฅผ ๋ฐฐ์ฐ๋๋ฐ, ์ด๋ฏธ ๋ฒจ๋ก๊ทธ ์ํด๋ฆฌ ํ์ดํผ ์์ฑํ๋ฉด์ ์ฐ๋จน๋ง ํด๋ดค์์๋ ๋ถ๊ตฌํ๊ณ ์ด๋ฏธ ๋ณดํต์ด ์๋๋๊ฑธ ์๊ฒ ์
- ๊ฐ์ฌ๋์ด ์ง๊ธ๊น์ง ๋์ด๋ 3์ ํ๋ค๋ฉด ์ด๊ฑด ๋์ด๋ 8์ด๋ผ๋๋ฐ ์ง์ง์ธ๊ฒ ๊ฐ๋ค.
- ๋ด ๋จธ๋ฆฌ๊ฐ ๋นจ๋ฆฌ ์ข์์ง๊ธธ,,, ์ง์ ๊ณผ์์ด๋ค ์ง์ ๊ณผ์