[JS Log] 비동기 프로그래밍

비동기는 프로그래밍을 처음 배울 때 굉장히 어렵게 느껴지던 개념이었는데 실상 그렇지가 않다. 동기의 의미를 명확히하면 그러한데, 동기는 순서대로이다. 코드는 라인 바이 라인으로 진행한다. 이게 동기인데 이 순리를 거스르는 것이 비동기이다. 말그대로 순서를 지키지않고 먼저 처리하고 싶은 코드를 처리한다는 개념이다. 오늘 상세히 파헤쳐보겠다.

42.1 동기 처리와 비동기 처리

> 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.

 

> 실행 컨텍스트 스택의 최상위 요소인 "실행 중인 실행 컨텍스트"를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크들이다.

 

> 이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다.

 

나 > 여기서 동기처리를 위해서 foo 함수가 지속적으로 실행되고 3초 후에 bar를 실행한다. 

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

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

setTimeout(foo, 3*1000)
bar();

나 > 이번 경우는 setTimeout이라는 함수를 통해 비동기식으로 처리했다. setTimeout은 블로킹하지 않고 bar함수를 실행하게 한다. 

 

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

 

42.2 이벤트 루프와 태스크 큐

 

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

> 힙: 힙은 객체가 저장되느 메모리 공간이다. 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참고한다. 메모리에 값을 저장하려면 먼저 값을 저장할 메모리 공간의 크기를 결정해야 한다. 객체는 원시 값과는 달리 크기가 정해져 있지 않으므로 할당해야 할 메모리 공간의 크기를 런타임에 결정해야한다. 따라서 객체가 저장되는 메모리 공간인 힙은 구조화 되어 있지 않다는 특징이 있다. 

 

> 태스크 큐: setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다. 태스크 큐와는 별도로 프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 마이크로태스크 큐도 존재한다.

 

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

 

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

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

setTimeout(foo, 0)
bar();

나> 몇 초가 되었든 비동기 함수가 실행되면 태스크 큐로 이동한다. 콜 스택이 비게되면 이벤트 루프가 콜백함수를 실행하기 때문에 bar, foo가 순서대로 나온다. 병렬처리가 되는 모습은 콜스택과 브라우저가 동시에 작동하기 때문에 병렬처리가 가능한 것이다.