From 86e1b2bad71da5bf6eba50f954ad3e3d05e64bfb Mon Sep 17 00:00:00 2001 From: ccconac Date: Fri, 26 Jan 2024 00:16:05 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=EB=B9=84=EB=8F=99=EA=B8=B0=20=ED=94=84?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EB=9E=98=EB=B0=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\353\254\270\354\206\214\355\235\254.md" | 110 ++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 "docs/42_\353\271\204\353\217\231\352\270\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/\353\254\270\354\206\214\355\235\254.md" diff --git "a/docs/42_\353\271\204\353\217\231\352\270\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/\353\254\270\354\206\214\355\235\254.md" "b/docs/42_\353\271\204\353\217\231\352\270\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/\353\254\270\354\206\214\355\235\254.md" new file mode 100644 index 00000000..60e32958 --- /dev/null +++ "b/docs/42_\353\271\204\353\217\231\352\270\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/\353\254\270\354\206\214\355\235\254.md" @@ -0,0 +1,110 @@ +# πŸš€ 비동기 ν”„λ‘œκ·Έλž˜λ° + +## πŸ”Ž 1. 동기 μ²˜λ¦¬μ™€ 비동기 처리 + +> μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 **단 ν•˜λ‚˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 가지기 λ•Œλ¬Έμ— ν•œ λ²ˆμ— ν•˜λ‚˜μ˜ νƒœμŠ€ν¬λ§Œ μ‹€ν–‰ν•  수 μžˆλŠ” μ‹±κΈ€ μŠ€λ ˆλ“œ λ°©μ‹μœΌλ‘œ λ™μž‘ν•œλ‹€.** ν˜„μž¬ μ‹€ν–‰ 쀑인 νƒœμŠ€ν¬κ°€ μ’…λ£Œν•  λ•ŒκΉŒμ§€ λ‹€μŒμ— 싀행될 νƒœμŠ€ν¬κ°€ λŒ€κΈ°ν•˜λŠ” 방식을 **동기synchronous 처리라고 ν•˜κ³ ,** μ’…λ£Œλ˜μ§€ μ•Šμ€ μƒνƒœμ—λ„ λ‹€μŒ νƒœμŠ€ν¬λ₯Ό κ³§λ°”λ‘œ μ‹€ν–‰ν•˜λŠ” 방식을 **비동기asynchronous 처리라고 ν•œλ‹€.** + +ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ ν•¨μˆ˜ μ½”λ“œκ°€ ν‰κ°€λ˜μ–΄ ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ½œ μŠ€νƒκ°€ μƒμ„±λ˜κ³ , μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν‘Έμ‹œλ˜λ©΄μ„œ ν•¨μˆ˜ μ½”λ“œκ°€ μ‹€ν–‰λœλ‹€. ν•¨μˆ˜ μ½”λ“œμ˜ 싀행이 μ’…λ£Œλ˜λ©΄ μŠ€νƒμ—μ„œ νŒλ˜μ–΄ μ œκ±°λœλ‹€. + +```javascript +const foo = () => {}; +const bar = () => {}; + +foo(); +bar(); +``` + +![](https://velog.velcdn.com/images/zivivle/post/2b377843-f8f5-45e6-9401-b807ac7a7284/image.png) + +μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ ν‘Έμ‹œλ˜λŠ” 것은 ν•¨μˆ˜ μ‹€ν–‰μ˜ μ‹œμž‘μ„ μ˜λ―Έν•œλ‹€. ν•¨μˆ˜κ°€ 호좜된 μˆœμ„œλŒ€λ‘œ 순차적으둜 μ‹€ν–‰λ˜λŠ” μ΄μœ λŠ” ν˜ΈμΆœλ˜λŠ” μˆœμ„œλŒ€λ‘œ ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν‘Έμ‹œλ˜κΈ° λ•Œλ¬Έμ΄λ‹€. 즉, _ν•¨μˆ˜μ˜ μ‹€ν–‰ μˆœμ„œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμœΌλ‘œ κ΄€λ¦¬ν•œλ‹€._ + +**μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 단 ν•˜λ‚˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 가지며,** μ΄λŠ” ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•  수 μžˆλŠ” 창ꡬ가 단 ν•˜λ‚˜μ΄κ³  2개 μ΄μƒμ˜ ν•¨μˆ˜λ₯Ό λ™μ‹œμ— μ‹€ν–‰ν•  수 μ—†λ‹€λŠ” 것을 μ˜λ―Έν•œλ‹€. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ˜ μ΅œμƒμœ„ μš”μ†ŒμΈ `μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ`λ₯Ό μ œμ™Έν•œ λͺ¨λ“  μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ‹€ν–‰ λŒ€κΈ° 쀑인 νƒœμŠ€ν¬λ“€μ΄λ©°, λŒ€κΈ° 쀑인 νƒœμŠ€ν¬λ“€μ€ ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ νŒλ˜μ–΄ μŠ€νƒμ—μ„œ 제거되면(ν˜„μž¬ μ‹€ν–‰ 쀑인 ν•¨μˆ˜κ°€ μ’…λ£Œν•˜λ©΄) μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•œλ‹€. + +μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 ν•œ λ²ˆμ— ν•˜λ‚˜μ˜ νƒœμŠ€ν¬λ§Œ μ‹€ν–‰ν•  수 μžˆλŠ” μ‹±κΈ€ μŠ€λ ˆλ“œ λ°©μ‹μœΌλ‘œ λ™μž‘ν•œλ‹€. λ•Œλ¬Έμ— μ²˜λ¦¬μ— μ‹œκ°„μ΄ κ±Έλ¦¬λŠ” νƒœμŠ€ν¬λ₯Ό μ‹€ν–‰ν•˜λŠ” 경우 **λΈ”λ‘œν‚Ήblocking (μž‘μ—… 쀑단)이 λ°œμƒν•œλ‹€.** 이처럼 ν˜„μž¬ μ‹€ν–‰ 쀑인 νƒœμŠ€ν¬κ°€ μ’…λ£Œν•  λ•ŒκΉŒμ§€ **λ‹€μŒμ— 싀행될 νƒœμŠ€ν¬κ°€ λŒ€κΈ°ν•˜λŠ” 방식을 동기synchronous 처리라고 ν•œλ‹€.** + +![](https://velog.velcdn.com/images/zivivle/post/d2905f9a-a22a-4f68-8d59-bde5bbaff7de/image.png) + +`setTimeout` ν•¨μˆ˜λŠ” 일정 μ‹œκ°„μ΄ κ²½κ³Όν•œ 이후에 콜백 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ§€λ§Œ μ΄ν›„μ˜ νƒœμŠ€ν¬λ₯Ό λΈ”λ‘œν‚Ήν•˜μ§€ μ•Šκ³  κ³§λ°”λ‘œ μ‹€ν–‰ν•œλ‹€. 이처럼 **ν˜„μž¬ μ‹€ν–‰ 쀑인 νƒœμŠ€ν¬κ°€ μ’…λ£Œλ˜μ§€ μ•Šμ€ μƒνƒœλΌ 해도 λ‹€μŒ νƒœμŠ€ν¬λ₯Ό κ³§λ°”λ‘œ μ‹€ν–‰ν•˜λŠ” 방식을 비동기asynchronous 처리라고 ν•œλ‹€.** + +비동기 ν•¨μˆ˜λŠ” μ „ν†΅μ μœΌλ‘œ 콜백 νŒ¨ν„΄μ„ μ‚¬μš©ν•˜λŠ”λ°, 이 콜백 νŒ¨ν„΄μ€ 콜백 ν—¬callback hell을 λ°œμƒμ‹œμΌœ 가독성을 λ‚˜μ˜κ²Œ ν•˜κ³ , 비동기 처리 쀑 λ°œμƒν•œ μ—λŸ¬μ˜ μ˜ˆμ™Έ μ²˜λ¦¬κ°€ κ³€λž€ν•˜λ©°, μ—¬λŸ¬ 개의 비동기 처리λ₯Ό ν•œ λ²ˆμ— μ²˜λ¦¬ν•˜λŠ” 데도 ν•œκ³„κ°€ μžˆλ‹€. + +**타이머 ν•¨μˆ˜μΈ setTimeoutκ³Ό setInterval, HTTP μš”μ²­, 이벀트 ν•Έλ“€λŸ¬λŠ” 이벀트 루프와 νƒœμŠ€ν¬ 큐와 κΉŠμ€ 관계가 μžˆλŠ” 비동기 처리 λ°©μ‹μœΌλ‘œ λ™μž‘ν•œλ‹€.** + +![](https://velog.velcdn.com/images/zivivle/post/bbcd16ec-72c9-4748-bc17-3e23392a0d3c/image.png) + +| μž₯/단점 | 동기 처리 방식 | 비동기 처리 방식 | +| ------- | ----------------------------------- | ---------------- | +| μž₯점 | μ‹€ν–‰ μˆœμ„œ 보μž₯ | λΈ”λ‘œν‚Ή λ°œμƒ X | +| 단점 | μ•žμ„  νƒœμŠ€ν¬ μ’…λ£Œ μ‹œκΉŒμ§€ λΈ”λ‘œν‚Ή λ°œμƒ | μ‹€ν–‰ μˆœμ„œ 보μž₯ X | + +## πŸ”Ž 2. 이벀트 루프와 νƒœμŠ€ν¬ 큐 + +> 이벀트 루프event loopλŠ” λΈŒλΌμš°μ €μ— λ‚΄μž₯λ˜μ–΄ μžˆλŠ” κΈ°λŠ₯ 쀑 ν•˜λ‚˜λ‘œ, μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λ™μ‹œμ„±concurrency을 μ§€μ›ν•œλ‹€. + +λŒ€λΆ€λΆ„μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 크게 2개의 μ˜μ—­μœΌλ‘œ ꡬ뢄할 수 μžˆλ‹€. + +#### ✨ 콜 μŠ€νƒcall stack + +> μ†ŒμŠ€μ½”λ“œ 평가 κ³Όμ •μ—μ„œ μƒμ„±λœ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μΆ”κ°€λ˜κ³  μ œκ±°λ˜λŠ” **μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ„ 콜 μŠ€νƒμ΄λΌκ³  ν•œλ‹€.** + +ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 순차적으둜 콜 μŠ€νƒμ— ν‘Έμ‹œλ˜μ–΄ 순차적으둜 μ‹€ν–‰λœλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 단 ν•˜λ‚˜μ˜ 콜 μŠ€νƒμ„ μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— μ΅œμƒμœ„ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ’…λ£Œλ˜μ–΄ 콜 μŠ€νƒμ—μ„œ 제거되기 μ „κΉŒμ§€λŠ” λ‹€λ₯Έ μ–΄λ–€ νƒœμŠ€ν¬λ„ μ‹€ν–‰λ˜μ§€ μ•ŠλŠ”λ‹€. + +#### ✨ νž™heap + +> **νž™μ€ 객체가 μ €μž₯λ˜λŠ” λ©”λͺ¨λ¦¬ 곡간이닀.** 콜 μŠ€νƒμ˜ μš”μ†ŒμΈ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” νž™μ— μ €μž₯된 객체λ₯Ό μ°Έμ‘°ν•œλ‹€. + +λ©”λͺ¨λ¦¬μ— 값을 μ €μž₯ν•˜λ €λ©΄ λ¨Όμ € 값을 μ €μž₯ν•  λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 크기λ₯Ό κ²°μ •ν•΄μ•Ό ν•œλ‹€. κ°μ²΄λŠ” 크기가 μ •ν•΄μ Έ μžˆμ§€ μ•ŠμœΌλ―€λ‘œ ν• λ‹Ήν•΄μ•Ό ν•  λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 크기λ₯Ό λŸ°νƒ€μž„μ— κ²°μ •(동적 ν• λ‹Ή)ν•΄μ•Ό ν•œλ‹€. λ”°λΌμ„œ 객체가 μ €μž₯λ˜λŠ” λ©”λͺ¨λ¦¬ 곡간인 νž™μ€ κ΅¬μ‘°ν™”λ˜μ–΄ μžˆμ§€ μ•Šλ‹€λŠ” νŠΉμ§•μ΄ μžˆλ‹€. + +#### ✨ Web API + +> λΈŒλΌμš°μ €μ—μ„œ μ œκ³΅ν•˜λŠ” API이며, DOM API와 타이머 ν•¨μˆ˜, HTTP μš”μ²­ajaxκ³Ό 같은 비동기 처리λ₯Ό ν¬ν•¨ν•œλ‹€. + +![](https://velog.velcdn.com/images/zivivle/post/420c45ef-3403-4420-ab46-5ab4a298132e/image.png) + +콜 μŠ€νƒκ³Ό νž™μœΌλ‘œ κ΅¬μ„±λ˜μ–΄ μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 _νƒœμŠ€ν¬κ°€ μš”μ²­λ˜λ©΄ 콜 μŠ€νƒμ„ 톡해 μš”μ²­λœ μž‘μ—…μ„ 순차적으둜 μ‹€ν–‰ν•œλ‹€._ **비동기 μ²˜λ¦¬μ—μ„œ μ†ŒμŠ€μ½”λ“œμ˜ 평가와 싀행을 μ œμ™Έν•œ λͺ¨λ“  μ²˜λ¦¬λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진을 κ΅¬λ™ν•˜λŠ” ν™˜κ²½μΈ λΈŒλΌμš°μ € λ˜λŠ” Node.jsκ°€ λ‹΄λ‹Ήν•œλ‹€.** 예λ₯Ό λ“€μ–΄, `setTimeout`의 콜백 ν•¨μˆ˜ 평가와 싀행은 μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 λ‹΄λ‹Ήν•˜μ§€λ§Œ _호좜 μŠ€μΌ€μ€„λ§μ„ μœ„ν•œ 타이머 μ„€μ •κ³Ό 콜백 ν•¨μˆ˜μ˜ 등둝은 λΈŒλΌμš°μ € λ˜λŠ” Node.jsκ°€ λ‹΄λ‹Ήν•œλ‹€._ + +이λ₯Ό μœ„ν•΄ λΈŒλΌμš°μ € ν™˜κ²½μ€ νƒœμŠ€ν¬ 큐와 이벀트 루프λ₯Ό μ œκ³΅ν•œλ‹€. + +#### ✨ νƒœμŠ€ν¬ 큐task queue/event queue/callback queue + +> 비동기 ν•¨μˆ˜μ˜ 콜백 ν•¨μˆ˜ λ˜λŠ” 이벀트 ν•Έλ“€λŸ¬κ°€ μΌμ‹œμ μœΌλ‘œ λ³΄κ΄€λ˜λŠ” μ˜μ—­μ΄λ‹€. + +νƒœμŠ€ν¬ νμ™€λŠ” λ³„λ„λ‘œ ν”„λ‘œλ―ΈμŠ€μ˜ 후속 처리 λ©”μ„œλ“œμ˜ 콜백 ν•¨μˆ˜κ°€ μΌμ‹œμ μœΌλ‘œ λ³΄κ΄€λ˜λŠ” λ§ˆμ΄ν¬λ‘œνƒœμŠ€ν¬ 큐도 μ‘΄μž¬ν•œλ‹€. + +#### ✨ 이벀트 루프event loop + +> 콜 μŠ€νƒμ— ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μžˆλŠ”μ§€, νƒœμŠ€ν¬ 큐에 λŒ€κΈ° 쀑인 ν•¨μˆ˜(콜백 ν•¨μˆ˜, 이벀트 ν•Έλ“€λŸ¬ λ“±)κ°€ μžˆλŠ”μ§€ λ°˜λ³΅ν•΄μ„œ ν™•μΈν•œλ‹€. + +**λ§Œμ•½ 콜 μŠ€νƒμ΄ λΉ„μ–΄ 있고 νƒœμŠ€ν¬ 큐에 λŒ€κΈ° 쀑인 ν•¨μˆ˜κ°€ μžˆλ‹€λ©΄ 이벀트 λ£¨ν”„λŠ” 순차적FIFO, Fist In First Out으둜 νƒœμŠ€ν¬ 큐에 λŒ€κΈ° 쀑인 ν•¨μˆ˜λ₯Ό 콜 μŠ€νƒμœΌλ‘œ μ΄λ™μ‹œν‚¨λ‹€.** μ΄λ•Œ 콜 μŠ€νƒμœΌλ‘œ μ΄λ™ν•œ ν•¨μˆ˜λŠ” μ‹€ν–‰λœλ‹€. 즉, _νƒœμŠ€ν¬ 큐에 μΌμ‹œ λ³΄κ΄€λœ ν•¨μˆ˜λ“€μ€ 비동기 처리 λ°©μ‹μœΌλ‘œ λ™μž‘ν•œλ‹€._ + +![](https://velog.velcdn.com/images%2Fboram_in%2Fpost%2Fe3d6254b-5b87-47d1-8847-02b44b93ee6a%2F비동기.gif) + +**비동기 ν•¨μˆ˜μΈ `setTimeout`의 콜백 ν•¨μˆ˜λŠ” νƒœμŠ€ν¬ 큐에 ν‘Έμ‹œλ˜μ–΄ λŒ€κΈ°ν•˜λ‹€κ°€ 콜 μŠ€νƒμ΄ λΉ„κ²Œ 되면 콜 μŠ€νƒμ— ν‘Έμ‹œλ˜μ–΄ μ‹€ν–‰λœλ‹€.** μ‹±κΈ€ μŠ€λ ˆλ“œ λ°©μ‹μœΌλ‘œ λ™μž‘ν•˜λŠ” 것은 λΈŒλΌμš°μ €κ°€ μ•„λ‹Œ λΈŒλΌμš°μ €μ— λ‚΄μž₯된 μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이닀. **만일 λͺ¨λ“  μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œκ°€ μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ—μ„œ μ‹±κΈ€ μŠ€λ ˆλ“œ λ°©μ‹μœΌλ‘œ λ™μž‘ν•œλ‹€λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λΉ„λ™κΈ°λ‘œ λ™μž‘ν•  수 μ—†λ‹€. 즉, μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μ‹±κΈ€ μŠ€λ ˆλ“œλ‘œ λ™μž‘ν•˜μ§€λ§Œ λΈŒλΌμš°μ €λŠ” λ©€ν‹° μŠ€λ ˆλ“œλ‘œ λ™μž‘ν•œλ‹€.** λΈŒλΌμš°μ €μ™€ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 ν˜‘λ ₯ν•΄ 비동기 ν•¨μˆ˜μΈ `setTimeout` ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜λŠ” 것이닀. πŸ‘€ + +### πŸ’­ 이런 μ‹μœΌλ‘œ λ™μž‘ν•΄μš” + +```javascript +function foo() { + console.log('foo'); +} + +function bar() { + console.log('bar'); +} + +setTimeout(foo, 0); // 0초(μ‹€μ œλ‘œλŠ” 4ms) 후에 foo ν•¨μˆ˜ 호좜 +bar(); +``` + +1. μ „μ—­ μ½”λ“œκ°€ ν‰κ°€λ˜μ–΄ μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜κ³  콜 μŠ€νƒμ— ν‘Έμ‹œλœλ‹€. +2. μ „μ—­ μ½”λ“œκ°€ μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•˜μ—¬ setTimeout ν•¨μˆ˜κ°€ ν˜ΈμΆœλ˜λ©΄μ„œ ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜κ³  콜 μŠ€νƒμ— ν‘Έμ‹œλ˜μ–΄ ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ λœλ‹€. λΈŒλΌμš°μ €μ˜ Web API인 타이머 ν•¨μˆ˜λ„ ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•œλ‹€. +3. setTimeout ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜λ©΄ 콜백 ν•¨μˆ˜λ₯Ό 호좜 μŠ€μΌ€μ€„λ§ν•˜κ³  μ’…λ£Œλ˜μ–΄ 콜 μŠ€νƒμ—μ„œ νŒλœλ‹€. μ΄λ•Œ 호좜 μŠ€μΌ€μ€„λ§, 즉 타이머 μ„€μ •κ³Ό 타이머가 만료되면 _콜백 ν•¨μˆ˜λ₯Ό νƒœμŠ€ν¬ 큐에 ν‘Έμ‹œν•˜λŠ” 것은 λΈŒλΌμš°μ €μ˜ 역할이닀._ +4. λΈŒλΌμš°μ €κ°€ μˆ˜ν–‰ν•˜λŠ” 4-1κ³Ό μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 μˆ˜ν–‰ν•˜λŠ” 4-2λŠ” 병행 μ²˜λ¦¬λœλ‹€. + 4-1. λΈŒλΌμš°μ €λŠ” 타이머λ₯Ό μ„€μ •ν•˜κ³  νƒ€μ΄λ¨Έμ˜ 만료λ₯Ό κΈ°λ‹€λ¦°λ‹€. 이후 타이머가 만료되면 **4ms 후에 콜백 ν•¨μˆ˜ fooκ°€ νƒœμŠ€ν¬ 큐에 ν‘Έμ‹œλ˜μ–΄ λŒ€κΈ°ν•˜κ²Œ λœλ‹€.** (지연 μ‹œκ°„μ΄ 4ms μ΄ν•˜μΈ 경우 μ΅œμ†Œ 지연 μ‹œκ°„ 4msκ°€ μ§€μ •λœλ‹€.) νƒœμŠ€ν¬ 큐에 ν‘Έμ‹œλ˜μ–΄ λŒ€κΈ°ν•˜λŠ” 콜백 ν•¨μˆ˜λŠ” 콜 μŠ€νƒμ΄ λΉ„μ–΄μ•Ό ν˜ΈμΆœλ˜λ―€λ‘œ `setTimeout` ν•¨μˆ˜λ‘œ 호좜 μŠ€μΌ€μ€„λ§ν•œ 콜백 ν•¨μˆ˜λŠ” μ •ν™•νžˆ 지연 μ‹œκ°„ 후에 ν˜ΈμΆœλœλ‹€λŠ” 보μž₯은 μ—†λ‹€. 즉, μ•½κ°„μ˜ μ‹œκ°„μ°¨κ°€ λ°œμƒν•  수 μžˆλ‹€. + 4-2. bar ν•¨μˆ˜κ°€ ν˜ΈμΆœλ˜μ–΄ bar ν•¨μˆ˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜κ³  콜 μŠ€νƒμ— ν‘Έμ‹œλ˜μ–΄ ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 되고, μ’…λ£Œλ˜λ©΄ 콜 μŠ€νƒμ—μ„œ νŒλœλ‹€. μ΄λ•Œ λΈŒλΌμš°μ €κ°€ 타이머λ₯Ό μ„€μ •ν•œ ν›„ 4msκ°€ κ²½κ³Όλ˜μ—ˆλ‹€λ©΄ **foo ν•¨μˆ˜λŠ” 아직 νƒœμŠ€ν¬ νμ—μ„œ λŒ€κΈ° 쀑이닀.** +5. μ „μ—­ μ½”λ“œ 싀행이 μ’…λ£Œλ˜κ³  μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 콜 μŠ€νƒμ—μ„œ νŒλ˜λ©΄μ„œ 콜 μŠ€νƒμ—λŠ” μ•„λ¬΄λŸ° μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ„ μ‘΄μž¬ν•˜μ§€ μ•Šκ²Œ λœλ‹€. +6. 이벀트 루프에 μ˜ν•΄ 콜 μŠ€νƒμ΄ λΉ„μ–΄ 있음이 κ°μ§€λ˜κ³  νƒœμŠ€ν¬ νμ—μ„œ λŒ€κΈ° 쀑인 콜백 ν•¨μˆ˜ fooκ°€ 이벀트 루프에 μ˜ν•΄ 콜 μŠ€νƒμ— ν‘Έμ‹œλœλ‹€. μ΄λ ‡κ²Œ ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 되고, foo ν•¨μˆ˜κ°€ μ’…λ£Œλ˜λ©΄ 콜 μŠ€νƒμ—μ„œ νŒλœλ‹€. + +## πŸ‘€ REFERENCE + +λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive 42μž₯ 비동기 ν”„λ‘œκ·Έλž˜λ°