비동기를 동작시키는 원리

JS는 싱글 스레드이다.

자바스크립트는 싱글 스레드 언어이다.

 

Call Stack이 하나이기 때문인데,

전역 Main 함수를 포함하여 함수의 실행을 하나의 스레드가 순회하면서 실행한다.

 

하지만 모든 연산을 하나의 스레드에서 처리하는 방식만이 존재한다면 자바스크립트는 지금까지 살아남지 못했을 것이다.

JS의 비동기 프로그래밍 특징

이러한 단점을 극복하기 위해 비동기 프로그래밍을 사용한다.

 

비동기적 코드의 반대말은 동기적 코드이다. 동기적 코드는 작업이 끝나야 다음 작업을 진행한다.

비동기적 코드는 현재 실행 중인 코드의 완료 여부와 상관없이 바로 다음 코드로 넘어간다.

 

CPU의 계산으로 즉시 처리가 가능한 코드는 동기적인 코드이다.

하지만 사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행을 보류한다거나(setTimeout),

사용자의 직접적인 개입이 있을 때 비로소 어떤 함수를 실행하도록 대기한다거나(addEventListener)와 같은

별도의 요청, 실행 대기, 보류와 같은 코드는 비동기적인 코드이다.

 

Source를 순회하며 시간 비용이 큰 로직은 다른 스레드로 위임하고 다른 로직으로 이동해 일을 계속한다.

즉, 일을 넘기고 다른 일로 넘기며 진행하는 논 블로킹을 한다.

출처 : JS 비동기는 어떻게 구현되어 있는가?, thsoon 블로그

 

위임시키는 대상은 API라는 곳이며,

브라우저에서 WebAPI, NodeJS에서 Node API라고 부르는 별개의 스레드 영역이다.

 

출처 : JS 비동기는 어떻게 구현되어 있는가?, thsoon 블로그

다른 스레드에 던진 일이 끝나면,

이 일을 마저 처리할 수 있도록 Source를 순회하는 스레드가 알 수 있게 이벤트로 알려주는 시스템을 이벤트 기반 아키텍처라고 한다.

 

다음은 setTimeout()을 사례로 들어보았다.

// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

위 코드는 동기적 처리를 한다면 다음과 같을 것이다.

1. 'Hello'
2. 3초 뒤 'Bye'
3. 'Hello Again'

하지만 결과는 1 -> 2 -> 3이 아닌 1 -> 3 -> 2이다.

setTimeout이 비동기 방식으로 실행되기 때문에 1, 3번을 출력하고 난 뒤 3초가 지나면 'Bye'가 출력되는 것이다.

 

 

 

 

 

 

 

출처

https://velog.io/@thsoon/JS-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EA%B5%AC%ED%98%84%EB%90%98%EC%96%B4%EC%9E%88%EB%8A%94%EA%B0%80

JS 비동기는 어떻게 구현되어있는가??