JavaScript의 비동기 처리?

비동기 VS 동기

• Synchronous 동기 : 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식
  • 함수의 결과를 호출한 쪽에서 처리
• Asynchronous 비동기 : 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식
  • 함수의 결과를 호출한 쪽에서 처리하지 않음

JS는 동기 프로그래밍 언어다.

자바스크립트는 싱글 스레드 기반의 언어이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용한다. 이는 요청이 동기적으로 처리되어, 한 번에 한 가지 일만 처리할 수 있음을 의미한다.

만약, 네트워크 요청과 같은 비동기 함수가 동기적으로 이루어지는 함수로 만들어졌다면, 네트워크 요청이 다른 서버로 보내지고, 컴퓨터는 응답받기를 기다리며 느려질 것이다. 그 사이에 클릭이나, 다른 요소가 렌더링이 되어야 하는 게 있더라도, 스택은 네트워크 요청 함수에 블로킹 되어있으므로, 아무 일도 일어나지 않게 된다.

이러한 문제는 비동기 콜백을 사용함으로써 해결된다. 비동기 요청은 자바스크립트 엔진을 구동하는 환경인 브라우저나 Node.js에서 처리된다.

비동기 처리를 위한 브라우저 환경 구조

출처 : https://miro.medium.com/max/700/1*FA9NGxNB6-v1oI2qGEtlRQ.png

Javascript Engine (V8 Engine)

• Heap : 구조화가 되어있지 않은 형태로 객체들과 변수들의 메모리 할당이 이루어지는 곳이다.
• Call Stack : JS에서 수행해야하는 함수들을 순차적으로 스택에 담아서 실행시킨다.

Web APIs

• 웹 브라우저가 제공하는 API로 AJAX라던가 Timeout등의 비동기 작업을 실행한다.

Task Queue(Event Queue)

• 런타임 환경에서 처리해야 하는 Task들을 임시 저장하는 대기 큐
• Call Stack이 비어졌을 때 먼저 대기열에 들어온 순서대로 수행
• 비동기로 호출되는 함수들을 Call Stack에 쌓이지 않고 Task Queue에 enqueue

Event Loop

• Event Loop는 Call Stack과 Callback Queue를 상태를 계속 감시하며 Call Stack에 함수들이 존재하지 않는다면 Callback Queue에 있는 비동기 함수들을 Call Stack에 밀어 넣게 됩니다. 그 후 Call Stack에서 비동기 함수를 실행시키게 됩니다.
• 브라우저와 Node.js에서 공통으로 제공하는 것이 이벤트 루프이다. 자바스크립트는 싱글 스레드 기반의 언어지만, 자바스크립트가 구동되는 환경(Node.js, 브라우저)은 여러 스레드가 사용된다. 여러 스레드가 사용되는 구동 환경이 자바스크립트 엔진과 연동하기 위해 사용되는 장치가 '이벤트 루프'이다.

Node.js 환경의 구조

Node.js 는 비동기 IO를 지원하기 위해 libuv라이브러리를 사용한다. 이 libuv가 이벤트 루프를 제공한다.

비동기 작업 실행 순서(런타임 환경 Web API)

1. 코드 ⇒ 호출 스택에 쌓인 후 실행
2. JS의 엔진 ⇒ 코드 중 비동기 작업을 Web API에게 위임
3. Web API는 해당 비동기 작업을 수행 후 콜백 함수를 이벤트 루프를 통해 콜백 큐에 넘김
4. 이벤트 루프는 콜 스택에 쌓여있는 **함수가 없을 때에, 태스크 큐에서 대기하고 있던 콜백함수를 콜스택으로 넘김(**Event Loop는 현재 실행 중인 태스트가 없는지, 태스크 큐에 태스크가 있는지 반복적 확인)
5. 콜스택에 쌓인 콜백 함수가 실행되고, 콜 스택에서 제거 후 완료

블로킹 VS 논블로킹

• Blocking 블로킹 : 자신의 수행 결과가 끝날 때까지 제어권을 갖고 있는 것
• non-blocking 논블로킹 : 자신이 호출되었을 때 제어권을 자신을 호출한 쪽으로 넘기고 자신을 호출한 쪽에서 다른 일을 할 수 있도록 하는 것

→ 비슷하지만 다른 개념!

JS는 싱글 스레드인데 비동기가 어떻게 가능할까?

JS는 비동기 작업들은 런타임 환경에게 넘겨줌으로써, 해당 작업이 완료될 때까지 다른 코드들 실행 가능

( JS가 싱글 스레드 기반이지만 비동기 작업을 수행하고 동시성을 가지고 논블로킹 I/O가 가능)