JS. WEBAPI와 단일 쓰레드

MJ·2023년 6월 7일
0
post-thumbnail

단일쓰레드

  • Javascript 는 단일쓰레드로 한 번에 하나의 작업만 수행할 수 있다.
    이로 인해서 싱글스레드라고 부르기도 한다.

  • 하지만 이벤트 루프만 독립적으로 실행되지 않고, 웹 브라우저나 NodeJS 같은
    멀티 쓰레드 환경에서 실행된다

  • 자바스크립트자체는 싱글 쓰레드가 맞지만 자바스크립트 런타임은 싱글 쓰레드가 아니다.

비동기식 요청을 사용하는 이유

기존 동기식 요청은 코드를 한줄 한줄 차례대로 실행하므로 하나의 작업에 걸리는 시간에
관계 없이 첫 번째 코드가 실행 된 뒤 다음 코드가 실행된다. 이 방법은 앞의 작업시간이
길수록 시간 및 자원의 낭비가 심해진다.

하나의 요청이 완료될 때 까지 기다리지 않고 동시에 다른 작업을 실행하는 비동기 호출
로 극복할 수 있다.


1.1 JS 비동기처리 부가 설명

  • 단일 쓰레드임에도 불과하고 여러 개의 코드를 실행해도 지연되지 않고 코드가 바로
    실행되는 이유는 JS 대신에 브라우저가 실제로 작업하고 있다.

  • 브라우저는 C, C++같은 언어로 작성되기 때문에 JS에선 할수 없는 일들을 구현합니다.

  • JS 에서 코드를 작성하고 이벤트 핸들러나, 비동기함수, AJAX 요청들은 브라우저에게
    처리작업을 떠넘깁니다. 이후에 작업을 마치게 되면 콜스택에 추가되어서 JS가 실행할 수
    있게 되는 원리입니다.

WebAPI

브라우저에는 WebApi 라는 API가 존재합니다.
JS 에서 처리할 수 없는 이벤트 핸들러, AJAX 요청, 비동기함수(SetTimout 등) 같은
요청을 전달받아서 대신 처리해주는 역할을 수행합니다.

이들은 백그라운드내에서 동시에 실행될 수 있습니다.


1.2 비동기식 처리 확인하기

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으로 전달하고 이후에 처리하는 것을 확인할 수 있습니다.

profile
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

0개의 댓글