[모던 자바스크립트 Deep Dive] 38. 비동기 프로그래밍

동기 처리와 비동기 처리

• 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문
• 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가짐 (함수를 실행할 수 있는 창구가 단 하나)
• 자바스크림트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작
• 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹 (작업 중단) 발생

동기처리 : 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식 (순서 보장)

// sleep 함수는 일정 시간이 경과한 이후에 func 함수를 호출
function sleep(func, delay) {
  const delayUntill = Date.now() + delay;

  // delay 시간동안 반복문 실행 작업
  while (Date.now() < delayUntill);

  // 일정 시간이 경과한 이후에 콜백함수 호출
  func();
}

function foo() {
  console.log("foo");
}

function bar() {
  console.log("bar");
}

// sleep 함수 3초 이상 실행
sleep(foo, 3000);

// bar 함수는 sleep 함수 실행이 종료된 이후에 호출되므로 3초 이상 블로킹
bar();

// (3초 경과 후) foo 호출 → bar 호출

 

비동기 처리 : 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식 (블로킹 발생 X)

function foo(){
 console.log('foo');
}

function bar(){
 console.log('bar');
}

// 타이머 함수 setTimeout은 일정 시간이 경과한 이후에 콜백 함수 foo를 호출
// 타이머 함수 setTimeout은 bar 함수를 블로킹하지 않는다
setTimeout(foo, 3 * 1000);
bar();
// bar 호출 → (3초 경과 후)foo 호출

• setTimeout 함수는 함수 이후 태스크를 블로킹하지 않고 곧바로 실행
• 타이머 함수인 setTimeout 과 setInterval, HTTP요청, 이벤트 핸들러는 비동기 처리 방식으로 동작

이벤트 루프와 태스크 큐

• 이벤트 루프는 자바스크립트의 동시성을 지원

1. 콜 스택과 힙

1-1. 콜 스택

• 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨택스트 스택
• 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행
• 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행 X

1-2. 힙

• 객체가 저장되는 메모리 공간
• 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조
• 객체는 원시 값과 달리 크기가 정해져 있지 않아 런타임에 동적할당 해야함 (힙은 구조화 되어있지 X)

 

2. 태스크 큐와 이벤트 루프

• 비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진을 구동하는 환경인 브라우저 또는 Node.js 가 담당
• 이를 위해 브라우저 환경은 태스크 큐와 이벤트 루프 제공

2-1. 태스크 큐

• 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역

2-2. 이벤트 루프

• 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인
• 콜 스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킴

3. 브라우저 환경에서의 비동기 함수 동작 방식

function foo(){
 console.log("foo");
}

function bar(){
 console.log("bar");
}

setTimeout(foo, 0);	// 0초 (실제는 4ms) 후에 foo 함수 호출
bar();

• 동기 함수인 setTimeout 의 콜백 함수는 태스크 큐에 푸시되어 대기하다가 콜 스택이 비게 되면, 다시 말해 전역 코드 및 명시적으로 호출된 함수가 모두 종료하면 비로소 콜 스택에 푸시되어 실행
• 싱글 스레드 방식으로 동작하는 것은 브라우저가 아니라 브라우저에 내장된 자바스크립트 엔진
• 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작