๐Ÿ‘Š

Event Loop

notion image
์ถœ์ฒ˜ : How JavaScript works: an overview of the engine, the runtime, and the call stack
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ์–ธ์–ด์ด๋‹ค.
๊ทธ๋ž˜์„œ ์Šคํƒ์ด ํ•˜๋‚˜๋กœ ๋™๊ธฐ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋ฅผ ํ•œ๋‹ค.
๊ทธ๋ ‡๋‹ค๋ฉด, ์–ด๋–ป๊ฒŒ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์•ผํ• ๊นŒ?
์ด๋ฅผ ๋ณด์กฐ ํ•ด์ฃผ๋Š” Web api๊ฐ€ ์žˆ๋‹ค.
Web api๋Š” ๋ง ๊ทธ๋Œ€๋กœ ์›น๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” api ๊ธฐ๋Šฅ์ด๋‹ค.
Web api์—๋Š” ๋Œ€ํ‘œ์ ์œผ๋กœ setTimeout๊ธฐ๋Šฅ ๊ทธ๋ฆฌ๊ณ  DOM , AJAX ๊ฐ™์€ ๊ธฐ๋Šฅ๋“ค์ด ์žˆ๋‹ค.
๊ธฐ๋ณธ์ ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” Stack์—์„œ ๋ฐ”๋กœ ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š๊ณ , webapi์—์„œ ๋จผ์ € ์š”์ฒญ์„ ํ•˜๊ณ  , ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•œ๋‹ค.
์ฒ˜๋ฆฌ์™„๋ฃŒ ๋œ ์ž‘์—…๋“ค์€ ์ฐจ๊ทผ์ฐจ๊ทผ Task queue(Callback queue)์— ์ž‘์—…์ด ์Œ“์ด๊ณ ,(์ด๋•Œ, ๋จผ์ € ์ฒ˜๋ฆฌ ๋œ ์ž‘์—… ์ˆœ์œผ๋กœ Task queue์— ์Œ“์ด๊ฒŒ ๋œ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋จผ์ € Stack์—์„œ ์š”์ฒญ์„ ํ–ˆ๋‹ค๊ณ ํ•ด๋„, ์ž‘์—…์ด ๋จผ์ € ์™„๋ฃŒ๋œ๋‹ค๋Š” ๋ณด์žฅ์€ ์—†๋‹ค.)
์ด์ œ ์ด ์Œ“์ธ ์ž‘์—…๋“ค์„ Stack์— ๋„˜๊ฒจ์ค˜์•ผํ•˜๋Š”๋ฐ, ์ด ๋•Œ ์ด๋ฒคํŠธ๋ฃจํ”„๊ฐ€ ๋“ฑ์žฅํ•œ๋‹ค.
์ด๋ฒคํŠธ๋ฃจํ”„๋Š” Stack์ด ๋น„์–ด์žˆ๊ณ , task queue์— ์ž‘์—…์ด ์Œ“์—ฌ์žˆ์œผ๋ฉด, Stack์— ํ•˜๋‚˜์”ฉ ์ž‘์—…์„ ๋„˜๊ฒจ์ค€๋‹ค.