Search
➿

Event Loop

Event Loopλ₯Ό μ•Œμ•„μ•Ό ν•˜λŠ” 이유

μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ—μ„œ μ΄λ²€νŠΈκ°€ μ–΄λ–€ μˆœμ„œλ‘œ λ™μž‘ν•˜λŠ”μ§€ μ•Œ 수 μžˆλ‹€.

이 λ¬Έμ„œλ₯Ό 보고 λ‚˜λ©΄

μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ—μ„œ μ΄λ²€νŠΈκ°€ μ–΄λ–€ μˆœμ„œλ‘œ λ™μž‘ν•˜λŠ”μ§€ μ•Œ 수 μžˆλ‹€.

λ‹€μŒμ€ μ–΄λ–»κ²Œ console에 μ°νžκΉŒμš”?

function showLog() { console.log("event1") setTimeout(() => { console.log("event2") }, 0) console.log("event3") }
JavaScript
볡사
λΆ„λͺ…νžˆ setTimeout이 delayλŠ” 0μ΄μ§€λ§Œ, event1 => event3 => event2 둜 logκ°€ μ°νžˆλŠ”κ±Έ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό μ΄ν•΄ν•˜λ €λ©΄ Event Loop에 λŒ€ν•΄ μ•Œμ•„μ•Ό ν•©λ‹ˆλ‹€.

Event Loop

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ νŠΉμ§• 쀑 ν•˜λ‚˜λŠ” μ‹±κΈ€ μŠ€λ ˆλ“œλ‘œ λ™μž‘ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. μ‹±κΈ€ μŠ€λ ˆλ“œ 방식은 ν•œ λ²ˆμ— ν•˜λ‚˜μ˜ task만 μ²˜λ¦¬ν•  수 μžˆλŠ” 것을 μ˜λ―Έν•˜λŠ”λ°μš”. ν•˜μ§€λ§Œ λΈŒλΌμš°μ €κ°€ λ™μž‘ν•˜λŠ” 것을 보면 λ§Žμ€ taskκ°€ λ™μ‹œμ— μ²˜λ¦¬λ˜λŠ” κ²ƒμ²˜λŸΌ λŠκ»΄μ§‘λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ html μš”μ†Œκ°€ μ• λ‹ˆλ©”μ΄μ…˜ 효과λ₯Ό 톡해 μ›€μ§μ΄λ©΄μ„œ 이벀트λ₯Ό μ²˜λ¦¬ν•˜κΈ°λ„ ν•˜κ³ , HTTP μš”μ²­μ„ 톡해 μ„œλ²„λ‘œλΆ€ν„° 데이터λ₯Ό 가지고 μ˜€λ©΄μ„œ λ Œλ”λ§ ν•˜κΈ°λ„ ν•©λ‹ˆλ‹€. 이처럼 μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λ™μ‹œμ„±μ„ μ§€μ›ν•˜λŠ” 것이 λ°”λ‘œ 이벀트 λ£¨ν”„μž…λ‹ˆλ‹€.
이벀트 λ£¨ν”„λŠ” λΈŒλΌμš°μ €μ— λ‚΄μž₯λ˜μ–΄ μžˆλŠ” κΈ°λŠ₯ 쀑 ν•˜λ‚˜μž…λ‹ˆλ‹€.
κ΅¬κΈ€μ˜ V8 μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진을 λΉ„λ‘―ν•œ λŒ€λΆ€λΆ„μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 크게 2개의 μ˜μ—­μœΌλ‘œ ꡬ뢄할 수 μžˆμŠ΅λ‹ˆλ‹€.

μ½œμŠ€νƒ

μ†ŒμŠ€μ½”λ“œ 평가 κ³Όμ •μ—μ„œ μƒμ„±λœ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μΆ”κ°€λ˜κ³  μ œκ±°λ˜λŠ” μŠ€νƒ 자료ꡬ쑰인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμž…λ‹ˆλ‹€. ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 순차적으둜 콜 μŠ€νƒμ— ν‘Έμ‹œλ˜μ–΄ 순차적으둜 μ‹€ν–‰λ©λ‹ˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 단 ν•˜λ‚˜μ˜ 콜 μŠ€νƒμ„ μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— μ΅œμƒμœ„ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ(싀행쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ)κ°€ μ’…λ£Œλ˜μ–΄ 콜 μŠ€νƒμ—μ„œ 제거되기 μ „κΉŒμ§€λŠ” λ‹€λ₯Έ μ–΄λ–€ νƒœμŠ€ν¬λ„ μ‹€ν–‰λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

νž™

νž™μ€ 객체가 μ €μž₯λ˜λŠ” λ©”λͺ¨λ¦¬ κ³΅κ°„μž…λ‹ˆλ‹€. λ©”λͺ¨λ¦¬μ— 값을 μ €μž₯ν•˜λ €λ©΄ λ¨Όμ € 값을 μ €μž₯ν•  λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 크기λ₯Ό κ²°μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€. κ°μ²΄λŠ” μ›μ‹œ κ°’κ³ΌλŠ” 달리 크기가 μ •ν•΄μ Έ μžˆμ§€ μ•ŠμœΌλ―€λ‘œ ν• λ‹Ήν•΄μ•Ό ν•  λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 크기λ₯Ό λŸ°νƒ€μž„μ— κ²°μ •(동적 ν• λ‹Ή)ν•΄μ•Ό ν•©λ‹ˆλ‹€. λ”°λΌμ„œ 객체가 μ €μž₯λ˜λŠ” λ©”λͺ¨λ¦¬ 곡간인 νž™μ€ ꡬ쑰화 λ˜μ–΄ μžˆμ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
이처럼 콜 μŠ€νƒκ³Ό νž™μœΌλ‘œ κ΅¬μ„±λœ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 λ‹¨μˆœνžˆ νƒœμŠ€ν¬κ°€ μš”μ²­λ˜λ©΄ 콜 μŠ€νƒμ„ 톡해 μš”μ²­λœ μž‘μ—…μ„ 순차적으둜 μ‹€ν–‰ν•  λΏμž…λ‹ˆλ‹€. 비동기 μ²˜λ¦¬μ—μ„œ μ†ŒμŠ€μ½”λ“œμ˜ 평가와 싀행을 μ œμ™Έν•œ λͺ¨λ“  μ²˜λ¦¬λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진을 κ΅¬λ™ν•˜λŠ” ν™˜κ²½μΈ λΈŒλΌμš°μ € λ˜λŠ” Node.jsκ°€ λ‹΄λ‹Ήν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, 비동기 λ°©μ‹μœΌλ‘œ λ™μž‘ν•˜λŠ” setTimeout의 콜백 ν•¨μˆ˜μ˜ 평가와 싀행은 μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 λ‹΄λ‹Ήν•˜μ§€λ§Œ, 호좜 μŠ€μΌ€μ€„λ§μ„ μœ„ν•œ 타이머 μ„€μ •κ³Ό 콜백 ν•¨μˆ˜μ˜ 등둝은 λΈŒλΌμš°μ € λ˜λŠ” Node.jsκ°€ λ‹΄λ‹Ήν•©λ‹ˆλ‹€. 이λ₯Ό μœ„ν•΄ λΈŒλΌμš°μ € ν™˜κ²½μ€ νƒœμŠ€ν¬ 큐와 이벀트 루프λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.

νƒœμŠ€ν¬ 큐

setTimeoutμ΄λ‚˜ setInervalκ³Ό 같은 비동기 ν•¨μˆ˜μ˜ 콜백 ν•¨μˆ˜ λ˜λŠ” 이벀트 ν•Έλ“€λŸ¬κ°€ μΌμ‹œμ μœΌλ‘œ λ³΄κ΄€λ˜λŠ” μ˜μ—­μž…λ‹ˆλ‹€.

이벀트 루프

이벀트 λ£¨ν”„λŠ” 콜 μŠ€νƒμ— ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μžˆλŠ”μ§€, 그리고 νƒœμŠ€ν¬ 큐에 λŒ€κΈ° 쀑인 ν•¨μˆ˜κ°€ μžˆλŠ”μ§€ λ°˜λ³΅ν•΄μ„œ ν™•μΈν•©λ‹ˆλ‹€. λ§Œμ•½ 콜 μŠ€νƒμ΄ λΉ„μ–΄ 있고, νƒœμŠ€νŠΈ 큐에 λŒ€κΈ° 쀑인 ν•¨μˆ˜κ°€ μžˆλ‹€λ©΄ 이벀트 λ£¨ν”„λŠ” 순차적으둜(μ„ μž… μ„ μΆœ) νƒœμŠ€ν¬ 큐에 λŒ€κΈ° 쀑인 ν•¨μˆ˜λ₯Ό 콜 μŠ€νƒμœΌλ‘œ μ΄λ™μ‹œν‚΅λ‹ˆλ‹€. 이 λ•Œ 콜 μŠ€νƒμœΌλ‘œ μ΄λ™ν•œ ν•¨μˆ˜λŠ” μ‹€ν–‰λ©λ‹ˆλ‹€.
μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” μ‹±κΈ€ μŠ€λ ˆλ“œ λ°©μ‹μœΌλ‘œ λ™μž‘ν•©λ‹ˆλ‹€. 그런데 이 λ•Œ μ‹±κΈ€ μŠ€λ ˆλ“œ λ°©μ‹μœΌλ‘œ λ™μž‘ν•˜λŠ” 것은 λΈŒλΌμš°μ €κ°€ μ•„λ‹ˆλΌ λΈŒλΌμš°μ €μ—μ„œ λ‚΄μž₯된 μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μž…λ‹ˆλ‹€. λ§Œμ•½ λͺ¨λ“  μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œκ°€ μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ—μ„œ μ‹±κΈ€ μŠ€λ ˆλ“œ λ°©μ‹μœΌλ‘œ λ™μž‘ν•œλ‹€λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λΉ„λ™κΈ°λ‘œ λ™μž‘ν•  수 μ—†μŠ΅λ‹ˆλ‹€. 즉 μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μ‹±κΈ€ μŠ€λ ˆλ“œλ‘œ λ™μž‘ν•˜μ§€λ§Œ λΈŒλΌμš°μ €λŠ” λ©€ν‹° μŠ€λ ˆλ“œλ‘œ λ™μž‘λ©λ‹ˆλ‹€.
예λ₯Ό λ“€μ–΄ setTimeout ν•¨μˆ˜μ˜ λͺ¨λ“  μ²˜λ¦¬κ°€ μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ—μ„œ μ‹±κΈ€ μŠ€λ ˆλ“œλ‘œ μˆ˜ν–‰λœλ‹€κ³  κ°€μ •ν•΄ λ³Όκ²Œμš”. μ΄λ•Œ setTimeout ν•¨μˆ˜μ˜ 호좜 μŠ€μΌ€μ€„λ§μ„ μœ„ν•œ 타이머 섀정도 μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ—μ„œ μˆ˜ν–‰λ  κ²ƒμ΄λ―€λ‘œ λŒ€κΈ°μ‹œκ°„ λ™μ•ˆ μ–΄λ–€ νƒœμŠ€ν¬λ„ μ‹€ν–‰ν•  수 μ—†μŠ΅λ‹ˆλ‹€. 즉 setTimeout ν•¨μˆ˜μ˜ 타이머 μ„€μ •κΉŒμ§€ μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ—μ„œ μ‹±κΈ€ μŠ€λ ˆλ“œ λ°©μ‹μœΌλ‘œ λ™μž‘ν•΄μ„œλŠ” λΉ„λ™κΈ°λ‘œ λ™μž‘ν•  수 μ—†μŠ΅λ‹ˆλ‹€.
λΈŒλΌμš°μ €λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진 외에도 λ Œλ”λ§ 엔진과 WebAPIλ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€. WebAPIλŠ” ECMAScript 사양에 μ •μ˜λœ ν•¨μˆ˜κ°€ μ•„λ‹ˆλΌ λΈŒλΌμš°μ €μ—μ„œ μ œκ³΅ν•˜λŠ” API이며, DOM API와 타이머 ν•¨μˆ˜, HTTP μš”μ²­(Ajax)κ³Ό 같은 비동기 처리λ₯Ό ν¬ν•¨ν•©λ‹ˆλ‹€. μœ„ μ˜ˆμ œμ—μ„œ μ‚΄νŽ΄λ΄€λ“―μ΄ λΈŒλΌμš°μ €μ˜ Web API인 setTimeout ν•¨μˆ˜κ°€ 호좜되면 μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ˜ 콜 μŠ€νƒμ— ν‘Έμ‹œλ˜μ–΄ μ‹€ν–‰λ©λ‹ˆλ‹€. ν•˜μ§€λ§Œ setTimeout ν•¨μˆ˜μ˜ 두 가지 κΈ°λŠ₯인 타이머 μ„€μ •κ³Ό 타이머가 λ§Œλ£Œν•˜λ©΄ 콜백 ν•¨μˆ˜λ₯Ό νƒœμŠ€ν¬ 큐에 λ“±λ‘ν•˜λŠ” μ²˜λ¦¬λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 μ•„λ‹ˆλΌ λΈŒλΌμš°μ €κ°€ μ‹€ν–‰ν•©λ‹ˆλ‹€. 이처럼 λΈŒλΌμš°μ €μ™€ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 ν˜‘λ ₯ν•˜μ—¬ 비동기 ν•¨μˆ˜μΈ setTimeout ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•©λ‹ˆλ‹€.

μ°Έκ³  μ˜μƒ

참고 링크

β€’