[JavaScript] 비동기 (Promise, async, await, JSON)

🥕 동기 처리와 비동기 처리

• 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.
  즉, 자바스크립트 엔진은 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드방식으로 동작한다.
• 싱글 스레드 방식은 한 번에 하나의 테스크만 실행할 수 있기에 시간이 걸리는 테스크를 실행하는 경우 블로킹(blocking, 작업 중단)이 발생한다.

싱글 스레드는 프로세스 내에서 하나의 메인스레드만으로 작업을 처리한다

// sleep 함수는 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출한다.

function sleep(func, delay) {
  // Date.now()는 현재 시간을 숫자(ms)로 반환한다.
  const delayUntil = Date.now() + delay;

  // 현재 시간에 delay를 더한 delayUntil이 현재 시간보다 작으면 계속 반복한다.
  while (Date.now() < delayUntil);

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

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

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

// sleep 함수는 3초 이상 실행된다.
sleep(foo, 3 * 1000)
// bar 함수는 sleep 함수의 실행이 종료된 이후에 호출되므로 3초 이상 블로킹된다.
bar()
//  즉, 3초 경과 후 foo 호출 => bar 호출

위처럼 현재 실행 중인 테스크가 종료할 때까지 다음에 실행될 테스크가 대기하는 방식을 동기 처리라고 한다.

 

 

🥕 동기 처리 방식

• 장점: 테스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다.
• 단점: 앞선 테스크가 종료할 때까지 이후 테스크들이 블로킹된다.

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

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

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

 

setTimeout 함수는 앞서 살펴본 sleep 함수와 유사하게 일정 시간이 경과한 이후에 콜백 함수를 호출하지만 setTimeout 함수 이후의 테스크를 블로킹하지 않고 곧바로 실행된다.

이처럼 현재 실행중인 테스크가 종료되지 않은 상태라 해도 다음 테스크를 곧바로 실행하는 방식을 비동기 처리라고 한다.

• 장점: 현재 실행 테스크가 종료되지 않은 상태라도 다음 테스크를 곧바로 실행하므로 블로킹이 발생하지 않는다.
• 단점: 테스크의 실행순서가 보장되지 않는다.

타이머 함수인 setTimeout과 setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다.

 

비동기 처리를 수행하는 비동기함수는 전통적으로 콜백함수를 사용한다.
비동기 처리를 위한 콜백 패턴은 콜백 헬을 발생시켜 가독성을 나쁘게하고,
비동기 처리 중 발생한 에러의 예외처리가 곤란하며, 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다.

---

 🥕 이벤트 루프와 태스크 큐

자바스크립트는 위에서 말했듯이 싱글 스레드 방식이므로 한 번에 하나의 태스크만 처리한다. 하지만 브라우저가 동작하는 것을 살펴보면 많은 태스크가 동시에 처리되는 것처럼 느껴진다.

예를 들어, HTML 요소가 애니메이션 효과를 통해 움직이면서 이벤트를 처리하기도 하고, HTTP 요청을 통해 서버로부터 데이터를 가지고 오면서 렌더링하기도 한다. 이처럼 자바스크립트의 동시성을 지원하는 것이 이벤트루프이다.