Javascript
는 단일쓰레드로 한 번에 하나의 작업만 수행할 수 있다.
이로 인해서 싱글스레드라고 부르기도 한다.
하지만 이벤트 루프만 독립적으로 실행되지 않고, 웹 브라우저나 NodeJS
같은
멀티 쓰레드 환경에서 실행된다
자바스크립트자체는 싱글 쓰레드가 맞지만 자바스크립트 런타임은 싱글 쓰레드가 아니다.
⭐ 비동기식 요청을 사용하는 이유
기존 동기식 요청은 코드를 한줄 한줄 차례대로 실행하므로 하나의 작업에 걸리는 시간에
관계 없이 첫 번째 코드가 실행 된 뒤 다음 코드가 실행된다. 이 방법은 앞의 작업시간이
길수록 시간 및 자원의 낭비가 심해진다.
하나의 요청이 완료될 때 까지 기다리지 않고 동시에 다른 작업을 실행하는 비동기 호출
로 극복할 수 있다.
단일 쓰레드임에도 불과하고 여러 개의 코드를 실행해도 지연되지 않고 코드가 바로
실행되는 이유는 JS
대신에 브라우저가 실제로 작업하고 있다.
브라우저는 C, C++같은 언어로 작성되기 때문에 JS
에선 할수 없는 일들을 구현합니다.
즉 JS
에서 코드를 작성하고 이벤트 핸들러나, 비동기함수, AJAX 요청들은 브라우저에게
처리작업을 떠넘깁니다. 이후에 작업을 마치게 되면 콜스택에 추가되어서 JS
가 실행할 수
있게 되는 원리입니다.
⭐ WebAPI
브라우저에는WebApi
라는 API가 존재합니다.
JS
에서 처리할 수 없는 이벤트 핸들러, AJAX 요청, 비동기함수(SetTimout 등) 같은
요청을 전달받아서 대신 처리해주는 역할을 수행합니다.
이들은 백그라운드내에서 동시에 실행될 수 있습니다.
console.log("Sending request to server")
setTimeout( function () {
console.log('Here is your data from the server.')
}, 3000)
console.log('Done');
JS
가 단일 쓰레드라면 콜백함수가 호출되고 3초동안 지연된다음Done
문자열을
출력해야 하지만,JS
에서WebApi
를 통해 함수 처리작업을 브라우저로 떠넘기기 때문에
해당 작업을JS
에서 처리하지 않기에 두 번쨰console.log
가 출력됩니다.
loupe 사이트에서
JS
가 코드를 콜스택에 추가하고 처리할 수 없는 비동기 함수는
WebApi
으로 전달하고 이후에 처리하는 것을 확인할 수 있습니다.