[7/15] 동기식 vs 비동기식

동기식 처리 모델

- 작업들이 한 줄로 줄 서서 순서대로 처리

- 이전 작업이 끝나기 전까지는 다음 작업이 시작되지 않음

* 직렬 처리: 이전 작업 끝나기 전까지 다음 작업 기다림 

* 블로킹: 시간이 오래 걸리는 작업이 있으면 전체 흐름 멈춤 

* 예측 가능성 증가: 성능 저하 

function func1() {
	console.log('1');
    func2();
}

function func2() {
	console.log('2');
    func3();
}

function func3() {
	console.log('3');
}

func1();

- func1이 끝나야 func2가 실행되고, func2가 끝나야 func3이 실행됨.

동기식 처리 한계

- 실시간 처리, 대기 시간이 기 작업에 불리

const data = fetchDataFromServer(); // 서버 요청 (시간 오래 걸림)
console.log(data); // 서버 응답 없으면 실행 안됨

- fetchDataFromServer()에서 응답이 올 때까지 대기

- 아래 줄은 실행되지 않고 멈춤 

비동기가 필요한 이유

- 동기식은 한 작업이 오래 걸리면 전체 흐름이 멈춤

- 네트워크 요청, 이미지 로딩, db 접근 등은 비동기 처리가 적합

- Promise, async/await, setTimeout, fetch 같은 비동기 처리 필요 

비동기식 처리 모델

- 여러 작업을 기다리지 않고, 다음 작업을 즉시 실행하는 방식

* Non-Blocking: 기다리지 않고 다음 코드 실행

* 콜백 함수, 이벤트 핸들러를 통해 나중 결과가 도착했을 때 처리

* DOM 이벤트, Ajax, setTimeout, fetch, Promise 등이 대표적인 예시

function func1() {
	console.log('1');
    func2();
}

function func2() {
	setTimeout(function () {
    	console.log('2');
    }, 0);
    
    func3();
}

function func3() {
	console.log('3');
}

func1();

자바스크립트 런타임 구성요소

- Call Stack : 함수 실행 순서 저장소

- Web APIs : setTimeout, DOM Event, Ajax 등 비동기 작업 실행

- Task Queue : 완료된 비동기 작업의 콜백 함수 저장

- Event Loop : Call Stack이 비었을 때 Task Queue -> Call Stack

실행 순서

step 1: func1() 호출 -> Call Stack에 올라감

-> 1 출력됨

-> Call Stack: func1

func1

step 2: func2() 호출 -> Call Stack에 올라감

-> setTimeout(..., 0) 실행됨

-> Web APIs 영역에 등록됨 (0초 후 실행 예약)

-> setTimeout은 즉시 실행되는 것이 아니라 예약만 하고 빠짐

-> func3()으로 이동

Call Stack:
[func3]
[func2]
[func1]

step 3: func3() 실행

-> 3 출력

-> Call Stack에서 func3 -> func2 -> func1 모두 빠짐

func3이 끝나고 func2와 func1이 바로 빠지는 이유

- func()이 실행 후 func2()도 끝나기 때문

- setTimeout()은 Web APIs로 넘기고 끝

- func3() 호출 -> 3 호출 -> 끝

- func2() 함수 전체의 실행이 종료되므로 Call Stack에서 func2 제거

- func1도 마찬가지 

step 4: setTimeout의 콜백 대기 -> Task Queue로 이동

-> 0초 후 Web APIs가 setTimeout 콜백을 Task Queue로 보냄

이 시점에 Call Stack은 비어있음

-> Event Loop가 Task Queue에서 콜백 함수를 가져와 Call Stack에 푸시

-> 2 출력 

setTimeout(..., 0)도 뒤에 실행되는 이유

- 0초라고 해도 최소한 한 번은 Task Queue를 거쳐야 하기 때문에, 현재 코드 실행이 끝난 이후에 실행됨

- 최소 대기 시간인 4ms 딜레이 발생

- 이벤트 루프는 Call Stack이 완전히 비워진 후에만 Task Queue에서 가져와 실행 가능 

비동기는 병렬 처리인가

- JS는 단일 스레드 기반

- 병렬이 아닌 이벤트 루프를 활요한 비동기적 직렬 처리