[자바스크립트] 비동기 프로그래밍

본 내용은 이웅모 님의 "모던 자바스크립트 DeepDive" 책을 보고 정리한 내용입니다. 저작권 보호를 위해 책의 내용은 요약되었습니다.

 

동기 처리와 비동기 처리

• 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.
• 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크들이다.
• 자바스크립트 엔진은 하나의 테스크만 실행하는 싱글 스레드 방식으로 동작한다. 싱글 스레드는 하나의 태스크만 실행 가능하기에 처리에 시간이 걸리는 태스트 실행 시 블로킹(작업 중단)발생한다.

예시 1) sleep 함수 구현

function sleep(func, delay) {
    // 현재시간 + delay시간
    const detailUntil = Date.now() + delay;
    // 현재시간이 현재시간 + delay가 될 때 까지 무한반복
    while(Date.now() < detailUntil);
    func();
}

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

function second() {
    console.log('second');
}
// 2초뒤에 first 함수 실행
sleep(first, 2 * 1000);
// second 함수 실행
second(); 
// 출력 : first second

 
예시 2) setTimeout 함수 사용

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

function second() {
    console.log('second');
}
// 3초뒤에 first 함수 실행
setTimeout(first, 2 * 1000); 
// second 함수 실행
second();
// 출력 : second first

 

• 예시 1) 처럼 sleep 함수를 구현해 사용하면 태스크를 블로킹하여 first -> second 순으로 출력되지만 예시 2) 처럼 setTimeout 함수를 사용하면 태스크를 블로킹하지 않고 바로 실행된다. 이런 처리 방식을 비동기 처리 라고 한다.
• 비동기 방식은 블로킹이 실행되지 않는다는 장점이 있지만 순서가 보장되지 않고, 콜백 헬을 발생시켜 가독성이 나쁘고, 에러의 예외 처리가 힘들다.
• 타이머 함수인 setTimeout과 setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리방식으로 동작 한다.

이벤트 루프와 태스크 큐

• 자바 스크립트의 동시성을 지원하는 것이 이벤트 루프이다.
• 예시 2)의 setTimeout의 콜백함수는 태스크 큐에 푸시되어 대기하다 콜 스택이 비면 콜 스택에 푸시되어 실행된다.
• 자바 스크립트는 싱글 스레드 방식이지만 브라우저에 내장된 자바 스크립트 엔진을 사용하여 멀티 스레드 방식을 사용할 수 있다.

콜 스택

• 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택이 콜스택이다.
• 함수 호출 시 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행되기에 하나의 콜 스택만 사용할 수 있다.

힙

• 힙은 객체가 저장되는 메모리 공간으로 실행 컨텍스트는 힙에 저장된 객체를 참조한다.
• 객체가 저장되는 메모리 공간인 힙은 구조화 되어 있지 않다.

태스크 큐

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

이벤트 루프

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