Elice) Asynchronous와 event Loop

해당 포스팅은 https://www.youtube.com/watch?v=8aGhZQkoFbQ 의 정리글 입니다.

---

해당 포스팅의 목적 : 비동기와 이벤트루프의 이해와 비동기적인 처리가 필요한 이유에 대한 생각 정리

 

 

1. Call Stack

 

자바스크립트에서의 코드 실행 순서는 다음과 같은 순서로 진행된다.

1. 제일 먼저 코드 자체를 말하는 main() 함수를 스택에 집어넣는다
2. 함수들을 위에서 부터 순서대로 정의한다.
3. 함수 호출을 만나면 스택에 함수를 추가한다.
4. 해당 함수를 추가 후 함수 안에 있는 또 다른 함수가 있다면 해당 함수도 호출한다.
5. 이후 최종 함수에서 return을 만나면 return 할때마다 스택의 맨 위에 있는 것을 꺼낸다.
6. 이후 함수의 return이 끝나면 최종 메인 함수인 main()을 return 후 끝난다.

 

 

이를 이해하기 위해서 물건 배송과 비유하여 생각을 해보았다.

1. 물건을 배송하는 직원들이 출근한다. // main() 함수
2. 오늘 배송을 보내야 하는 물건들을 확인한다. // 함수 정의
3. 확인이 끝난 후 배송 보낼 물건들을 차례대로 쌓는다. // 스택에 함수 추가
4. 물건을 다 쌓은 후 맨 밑의 물건을 꺼낼 수 없으므로 맨 위부터 배송을 시작한다. // return
5. 배송을 마친 후 직원들이 퇴근한다. // main() 함수 return

 

 

해당 함수들이 쌓이는 곳을 Call Stack이라고 한다.

 

 

---

 

 

2. Asynchronous

 

자바스크립트에서는 이러한 코드의 실행 (물건 배송)을 동기적으로만 처리가 가능하다.

 

즉, 한 줄 씩만 쌓아서 처리가 가능하다는 뜻이다.

 

하지만 이러한 방식에서의 문제는 너무 많은 요청이 동시에 몰리게 된다면 해당 요청들을 처리하는 시간들이 늦어 질 것이다.

따라서 이러한 문제를 해결하기 위하여 Asynchronous 즉, 비동기적인 처리가 필요하다 이런 비동기적인 처리를 위하여 필요한 것이 바로

setTimeout , promise , async/await 같은 비동기 적인 처리 webapi이다.

 

 

---

 

 

3. Event Loop

 

이러한 webapi의 사용도 사실은 동기적은 Call Stack방식으로 실행된다.

하지만 어떻게 비동기적인 처리 방식을 만들어 낼 수 있을까?

 

바로 Event Loop를 통하여 이를 만들어 낼 수 있다.

 

setTimeout함수가 들어가도 자바스크립트는 정상적으로 Call Stack방식으로 작업을 진행한다.

그러나 setTimeout함수들은 호출을 받은 후 해당 호출에 대한 콜백함수를 반환하기 까지의 타이머를 외부에서 진행시킨다.

(자바스크립트 엔진의 외부의 webapi이기 때문에)

 

 

 

비동기 처리의 순서

 

1. 만약 Call Stack 구조에서 함수를 호출하는 순서를 따라가다가 setTimeout함수와 같은 비동기 처리의 함수를 만난다면,

해당 함수는 외부의 webapi에서 타이머를 진행하고 타이머를 진행함으로서 setTimeout함수를 호출 받은 역할을 다하였으므로

Call Stack에서 사라지고 다음 함수의 처리를 진행 한다.

 

2. webapi에서 타이머가 끝났을 때 webapi는 외부에 있으므로 직접적으로 콜스택에 이를 넘길 수 없다. 따라서 이를 task que에 넘기게 되고 task que에서는 이를 저장하고 있는다.

 

3. Event Loop의 역할은 Call Stack과 task que를 주시하고 있는 역할을 한다. 따라서 setTimeout함수가 Call Stack에서 사라진 이후 Call Stack이 다 빌때 까지 진행이 완료 되면 webapi에서 콜백되어 온 콜백함수를 Call Stack에 밀어 넣고 이를 실행하게 된다.

 

 

 

---

 

 

남기는 글 : 비동기 처리를 이해하기 가장 힘들었던 부분은 바로 Execution Context의 설명과 같이 한 구역안에서 한번에 이루어진다고 생각하였기 때문이다. 이번 비동기 처리의 이해과정 처럼 해당 과정이 각자의 구역으로 진행된다고 생각하면

Execution Context등에 대한 이해가 조금 쉬어질 것 같다.

 

 

setTimeout(()=>{		},0) // 이로서 setTimeout에서 delay로 0을 주어도 의미가 있음을 알 수 있다.