요약 정리는 못 참지 않을까요? (15) 비동기 프로그래밍

🙄 자바스크립트는 싱글스레드?

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가집니다.
즉 동시에 두개 이상의 함수를 동시에 실행할 수 없습니다.

따라서 실행중인 실행 컨텍스트를 제외하면 모든 실행 컨텍스트는
모두 실행 대기 중인 태스크라는 뜻입니다.
자바스크립트 엔진은 싱글 스레드 방식으로 동작하는데
그래서 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생합니다.

---

🙄동기처리? 비동기처리?

동기 처리는 실행 중인 태스크가 종료할 때 까지 대기하는 방식을 뜻합니다.
반면 비동기처리는 현재 실행 중인 태스크가 종료되지 않은 상태여도
다음 태스크를 곧바로 실행하는 방식을 말합니다.

동기처리는 실행 순서가 보장된다는 장점이 있지만 모든 태스크가 블로킹된다는 문제가 있고
비동기처리는 블로킹이 발생하지 않지만 실행 순서가 보장되지 않는다는 단점이 있습니다.

비동기처리를 위해서는 주로 콜백 패턴, 프로미스 등의 방식이 사용되며
타이머함수, HTTP 요청, 이벤트 핸들러가 비동기 처리 방식으로 동작하며
비동기 처리는 이벤트 루프, 태스크 큐와 깊은 관계가 있습니다.

---

🙄 이벤트 루프가 뭔가요

이벤트루프란? 자바스크립트의 동시성을 지원하는 기능으로 브라우저에 내장되어 있는 기능입니다.
이벤트 루프는
1. 콜스택에 현재 실행중인 실행 컨텍스트가 있는지
2. 태스크 큐에 대기 중인 함수(콜백 or 이벤트 핸들러)가 있는지 반복해서 확인합니다.

if(콜스택이 비어있고 && 태스크큐에 대기중인 함수가 있다면) 이벤트 루프는
FIFO로 태스크 큐에 대기중인 함수를 콜스택으로 이동시킵니다.
태스크 큐에 보관된 함수들은 비동기 처리 방식입니다.

---

🙄자바스크립트 엔진의 구분

자바스크립트 엔진은 크게 두가지의 영역으로 구분 가능합니다.

1. 콜 스택
2. 힙

콜스택?
-> 실행컨텍스트 스택을 뜻합니다. 함수를 호출하면 함수 실행 컨텍스트가 콜 스택에 푸시되죠!

힙?
-> 힙은 객체가 저장되는 메모리 공간입니다. 콜스택의 요소인 실행 컨텍스트는
힙에 저장되어 있는 객체를 참조합니다.

메모리에 값을 저장하려면 값을 저장할 메모리 공간의 크기를 결정해야하는데
객체는 원시값과는 달리 크기가 정해져있지 않아서
메모리 공간의 크기를 런타임에 결정하는(동적할당)을 해야합니다.
그래서 힙은 구조화 되어 있지 않다는 특징이 있습니다.

PPT로 열심히 만들어 왔읍니다.

자바스크립트 엔진은 위와 같은 방식으로 작동하는데

1. 태스크 큐에서 자바스크립트 엔진에게 태스크를 요청함

2. 자바스크립트 엔진은 콜스택을 통해 요청된 작업을 순차적으로 실행하며 그 과정에서 Heap을 참조해서 사용한다.

라고 할 수 있습니다.

 

비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 브라우저 or Node.js가 담당합니다.

그럼 태스크 큐랑 Web API는 자바스크립트 엔진이 담당하는게 아니라는거네요

---

🙄 태스크 큐?

태스크 큐는 비동기 함수의 콜백 함수 or 이벤트 핸들러가 일시적으로 보관되는 영역입니다.
태스크 큐와 별개로 프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는
마이크로태스크 큐라는 것도 존재합니다.

---

🙄 아래 예제에서 먼저 실행될 함수는?

function ak() {
    console.log('ak')
}
function m4() {
    console.log('m4')
}

setTimeout(ak,0);//0초를 설정해도 실제로는 4ms 후에 호출됩니다.
m4()

1. 전역 코드의 평가 -> 전역 실행 컨텍스트 생성 -> 콜 스택 푸시
2. 전역 코드 실행 -> setTimeout 호출됨
3. setTimeout 함수의 함수 실행 컨텍스트가 콜스택에 푸시 현재 실행중인 실행 컨텍스트가 됨
4. setTimeout 함수가 실행되면 콜백함수 ak를 호출 스케줄링하고 콜스택에서 팝됨 
타이머가 만료되면 브라우저는 콜백 함수를 태스크큐에 푸시함. 
5.1 브라우저는 타이머를 설정하고 타이머의 만료를 기다립니다.
타이머가 만료되면 콜백함수 ak가 태스크큐에 푸시됩니다.
5.2 m4 함수가 호출되어 m4함수의 실행컨텍스트가 생성 콜스택에 푸시됨
이때 ak 함수는 태스크 큐에서 콜스택이 비워지길 대기합니다.
6. 전역 코드 실행이 끝나고 콜스택이 비워집니다.
7. 이벤트 루프에 의해 콜스택이 비워진걸 확인하고 태스크 큐에 있던 콜백함수 ak가 푸시됩니다.

위와 같은 순서로 동작할것이라고 예상할 수 있습니다.

---