[elice] 비동기 프로그래밍

yuna·2023년 6월 6일
0

elice

목록 보기
8/14
post-thumbnail

🐰 동기 처리 vs 비동기 처리

동기 처리 방식실행 순서를 보장하지만, 블로킹으로 인한 단점이 존재한다.
비동기 처리 방식 은 현재 실행 중인 태스크가 종료 되지 않아도 다음 태스크를 바로 실행하는 방식이다. 블로킹이 발생하지 않지만 태스크의 실행 순서가 보장되지 않는다.
비동기 함수는 전통적으로 콜백 패턴을 사용한다. 콜백 패턴은 콜백 헬, 예외 처리의 어려움, 한 번에 여러 비동기 처리 불가능 같은 단점 들이 있다.
타이머 함수인 setTimeout, setInterval, HTTP 요청, 이벤트 핸들러 는 비동기 처리 방식으로 동작한다.

🐰 이벤트 루프와 태스크 큐

이벤트 루프(Event Loop) 는 자바스크립트의 동시성(concurrency)을 지원하는 역할을 하는 매커니즘이다. 브라우저 동작을 보면 태스크가 동시에 처리되는 것 처럼 보이는데, 이벤트 루프를 통해 이를 가능하게 한다

대부분의 자바스크립트 엔진은 2개의 영역으로 구분된다.
콜 스택(Call stack) : 실행 컨텍스트 스택을 말하며, 실행 중인 실행 컨텍스트가 제거 되기 전까진 다른 태스크는 실행되지 않는다.
힙(Heap) : 힙(heap)은 객체가 저장되는 메모리 공간이며, 값을 저장할 메모리 공간의 크기는 런타임에 동적으로 할당한다.

🐰 비동기 함수 실행 과정

  1. 전역 코드가 평가되어 전역 실행 컨텍스트가 생성되고 콜 스택에 푸시

  2. 전역 코드 실행 단계에서 setTimeOut 함수 호출문을 만나면, 함수 실행 컨텍스트가 생성되고, 현재 실행 중인 실행 컨텍스트가 된다. (여기서 setTimeout은 호스트 객체인 Web API의 함수)

  3. setTimeout 함수가 실행되면 브라우저(Node.js)에 의해 콜백 함수를 스케줄링(setTimeout() 3초뒤에 실행을 하겠다.)한 후, 실행 콘텍스트는 콜 스택에서 팝된다.

    4-1. 브라우저는 타이머를 설정 한 후, 타이머의 만료를 기다린 후 콜백함수 fisrt 가 태스크 큐에 Push된다.(4-1는 브라우저에 의해, 4-2는 자바스크립트 엔진에 의해 병행 처리된다.)
    4-2. second 함수가 호출되어 함수 실행 컨텍스트가 생성되고, 콜 스택에 푸시되어 현재 실행 중인 실행 컨텍스트가 된다. 이 때, 아직 타이머로 설정한 시간이 지나지 않았으면, first 함수는 태스크 큐에서 대기

  4. 전역 코드 실행이 종료되고, 전역 실행 콘텍스트가 콜 스택에서 팝된다.

  5. 이벤트 루프에 의해 콜 스택이 비어 있음이 감지되고, 태스크 큐에 대기 중인 콜백 함수 first의 실행 컨텍스트가 생성되고 콜 스택에 푸시되어 실행되고 종료 후 콜 스택에서 팝된다.

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

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

// 비동기 방식
setTimeout(first, 3000);
second();

0개의 댓글