비동기프로그래밍

자바스크립트 엔진은 단 하나의 실행 컨텍스트를 갖는 "싱글 스레드"로 동작한다. 하지만, 브라우저엔진의 이벤트루프 동작을 통해 비동기처리가 가능해진다. 기다려야 하는 일을 브라우저에 위임, 이 때 끝나면 실행시킬 콜백을 등록해놓고, 위임된 일이 끝나면 그 결과와 콜백을 "태스크 큐" 에 추가한다. 그리고 브라우저는 "콜스택" 이 비워질때마다, 태스크 큐에서 오래된 작업을 꺼내와서 해당 작업에 대한 콜백을 실행시킨다. 이를 "이벤트 루프" 라고 하고, 멀티스레드로 동작하며 비동기 작업이 가능해진다.

1. 동기 처리(Sync)와 비동기(Async) 처리

• 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.
  • 실행 컨텍스트 스택의 최상위 요소인 ‘실행 중인 실행 컨텍스트'를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크
  • 현재 실행 중인 함수가 종료하면 다음 태스크가 실행된다.
  • 이처럼 자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다.
  • 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다.
• 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기처리라고 한다.
• 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기처리 라고 한다.
• 타이머함수(setTimeout), setInteraval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다.

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

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

• 자바스크립트 엔진은 크게 두 개의 영역으로 이루어져 있다.

  • 콜 스택(Call Stack, 호출 스택)
    • 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에, 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다.
    • 실행맥락에는 아래와 같은 정보들이 저장된다.
      - 함수 내부에서 사용되는 변수
      - 스코프 체인
      - this가 가리키는 객체
  • 힙(Heap)
    • 힙은 객체가 저장되는 메모리 공간이다. 콜스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다.

• 비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진을 구동하는 환경인 브라우저 또는 Node.js 가 담당한다.

• 브라우저가 JavaScript 코드를 실행시킬 때, 호출 스택은 다음과 같이 조작된다.
  - 스크립트를 불러올 때, 전역 실행 맥락 (global execution context) 을 호출 스택에 추가한다.

  • 함수가 호출되면, 해당 호출에 대한 실행 맥락을 생성해서 호출 스택에 추가 (push) 한다.
  • 변수에 대입이 일어나면, 호출 스택에 저장되어 있는 변수의 내용을 변경한다.
  • 함수의 실행이 끝나면 결과값을 반환하고 호출 스택 가장 위에 있는 실행 맥락을 제거(pop)한다.
  • 스크립트의 실행이 모두 끝나면, 전역 실행 맥락을 호출 스택에서 제거(pop) 한다.

• 작업 큐(Task queue)

  • 어떤 사건(event)가 일어날 때까지 기다리거나, 혹은 큰 데이터에 대한 계산이 완료될 때까지 기다리는데 브라우저에는 이벤트루프 를 통해서 오래 기다려야 하는 일을 처리할 수 있다.
    • 기다려야 하는 일을 Javscript 엔진에서 직접 처리하는 것이 아니라, API 를 통해 브라우저에 위임 합니다. 이 때, 끝나면 실행시킬 콜백을 같이 등록합니다.
    • 위임된 일이끝나면, 그 결과과 콜백을 작업 큐(task queue)에 추가합니다.
    • 브라우저는 호출 스택이 비워질 때마다 작업 큐에서 가장 오래된 작업을 꺼내와서 해당 작업에 대한 콜백을 실행시킵니다. 브라우저는 이 과정을 끊임없이 반복하는데, 이를 이벤트 루프(event loop)라고 부릅니다.

• 이벤트루프(Event Loop)

  • 자바스크립트의 동시성을 지원.
  • 콜 스택이 비어있고, 태스크 큐에 대기중인 함수가 있다면, 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.

정리하자면, 이벤트 루프는 자바스크립트가 아닌 브라우저에 내장되어 있는 기능 중 하나이다. 즉, 자바스크립트는 싱글 스레이드이지만, 브라우저에서는 이벤트 루프 덕분에 멀티 스레드로 동작하며 비동기 작업이 가능하다.

+) 큐 우선순위

큐는 크게 태스크 큐(Task Queue), 마이크로 태스크 큐(Micro Task Queue), rAF 큐(Request Animation Frame Queue)로 나뉜다.

• 태스크 큐(Task Queue): setTimeout(), setInterval()과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 대기하는 곳이다.
• 마이크로 태스크 큐(Micro Task Queue): Promise()의 후속 처리 메서드의 콜백 함수나 MutationObserver()가 대기하는 곳이다.
• rAF 큐(Request Animation Frame Queue): requestAnimationFrame()처럼 애니메이션을 업데이트하는 콜백 함수가 대기하는 곳이다.

마이크로 태스크 큐 > rAf 큐 > 태스크 큐 순이다.

3. 비동기처리

A. 콜백함수 (Callback)

• 자바스크립트는 비동기처리를 위한 하나의 패턴으로 콜백함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 지옥으로 인해 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 처리가 곤란하며, 여러개의 비동기 처리를 한번에 처리하는데 한계가 있다.
• 비동기 함수인 setTimeout 은 콜백함수의 처리 결과를 외부로 반환하거나, 상위 스코프의 변수에 할당하지 못한다.

let g=0;

setTimeout(()=>{g=100;},0);
console.log(g); //0

• 콜백함수의 후속 처리를 위해 비동기 함수가 비동기 처리 결과를 가지고 또 다시 비동기 함수를 호출해야되는 경우, 콜백함수호출이 중첩되어 복잡도가 높아지는 현상을 콜백 지옥이라고 한다.
• 에러 처리가 매우 곤란해짐.

B. 프라미스 (Promise)

• Promise 는 then 메소드를 통해 콜백을 등록해서, 작업이 끝났을 때 결과값을 가지고 추가 작업을 할 수 있다.
• Promise(ES6) 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는다.
  • resolve : 성공했을 때 호출되는 콜백 함수
  • reject : 실패했을 때 호출되는 콜백 함수
• 프로미스는 비동기처리가 어떻게 진행되고 있는지를 나타내는 상태 정보를 갖는다.
  • pending : 비동기 처리가 아직 수행되지 않은 상태 (프로미스가 생성된 직후)
  • fulfilled : 비동기 처리가 수행된 상태(성공, resolve 함수 호출)
  • rejected : 비동기 처리가 수행된 상태(실패, reject 함수 호출)
  • fulfilled 와, rejected 는 settled 상태고, 한번 settled 상태가 되면 다른 상태로 변화될 수 없다.
• 프로미스의 후속 처리 메소드
  • 후속 예외처리를 위해 then, catch, finally 를 제공한다.
  • 프로미스의 비동기 처리 상태가 변화하면, 후속 처리 메소드에 인수로 전달한 콜백함수가 선택적으로 호출된다. 이때, 후속처리 메소드의 콜백함수에 프로미스의 처리 결과가 인수로 전달된다.
  • 모든 후속처리 메소드는 프로미스를 반환하고, 비동기로 동작한다.
• Promise.prototype.then
  • then 메소드는 두 개의 콜백함수를 인수로 전달받는다.
  • fulfilled 상태, rejected 상태
• Promise.prototype.catch
  • catch 메소드는 한 개의 콜백함수를 인수로 전달받는다.
  • rejected 상태일 때만
• Promise.prototype.finally
  • finally 메서드는 한 개의 콜백함수를 인수로 전달받는다.
  • finally 메서드의 콜백함수는 프로미스의 성공(fufilled) 또는 실패 (rejected) 와 상관없이 무조건 한 번 호출된다.

C. 비동기 함수 async/await

• async/await 은 프로미스를 기반으로 동작한다.
• async/await 을 사용하면, 프로미스의 후속처리메소드 없이, 마치 동기처럼 프로미스를 사용할 수 있다.

async function fetchTodo(){
	const url="https:///sdflkjk"
	const reponse = await fetch(url);

	const todo= await response.json;

	console.log(todo);
}
fetchTodo();

• async 함수
  • await 키워드는 반드시 async함수 내부에서 사용해야 한다.
  • async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다.
• await 키워드
  • await 키워드는 프로미스가 settled 인 상태가 될 때까지 대기하다가, settled 상태가 되면 프로미스가 resolve 한 처리결과를 반환한다.
• 에러처리
  • try, catch
  • 후속 처리 메소드 사용해서 처리해도 됨.

💁 출처

• https://www.howdy-mj.me/javascript/asynchronous-programming/
• https://helloworldjavascript.net/pages/285-async.html#motivation---%ED%83%80%EC%9D%B4%EB%A8%B8-api
• 모던 자바스크립트 deep dive