자바스크립트 비동기 처리

e-pong:)·2023년 1월 30일
0

싱글스레드(Single thread)

싱글 스레드란, 하나의 프로세스에서 한 가지 작업을 실행하기 위해 순차적으로 실행되는 하나의 흐름

한번에 하나의 코드만 실행 할 수있다.

그러면 자바스크립트는 왜 싱글 스레드를 선택했는가?

  • 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경양 프로그래밍 언어를 도입하기로 결정하고 만들어진 언어가 자바스크립트이다.

  • 멀티 스레드로 구현된 서비스에서는 동시성 문제에 대해 신경을 많이 써야하지만, 자바스크립트는 멀티 스레드 환경에서 발생 할 수 있는 복잡한 시나리오를 신경 쓸 필요가 없다.

자바스크립트가 싱글 스레드인 이유

하나의 힙 영역과 하나의 콜 스텍을 갖고 있다.

자바스크립트 엔진

자바스크립트 엔진이란 자바스크립트 코드를 해석하고 실행하는 인터프리터이다.

엔진은 두개의 영역으로 구분

  • Memory Heap : 선언된 변수들이 메모리 할당이 이뤄지는 곳

  • Call Stack : 코드가 실행될 때 호출 스택이 쌓이는 곳. (호출된 함수가 call stack에 push 된다.)

자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 실행 중인 실행 컨택스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다. ⇒ ”동기적 처리”

그러면 생기는 의문하나.

우리는 어떻게 싱글 스레드인 자바스크립트로 비동기적으로 처리가 가능했던걸까?

👉 이에 대한 대답

  1. 자바스크립트가 싱글 스레드라는 말을 정확하지만, 자바스크립트 자체 즉, ‘자바스크립트 엔진이 단일 호출 스택을 사용한다’는 관점으로는 맞는말이지만, 실제 자바스크립트가 구동되는 환경(자바스크립트 런타임 / 브라우저나 node.js) 에서는 멀티 스레드를 사용한다.

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

  3. 자바스크립트가 구동되는 환경인 웹 브라우저는 여러개의 스레드가 사용되는 멀티 스레드이다.

브라우저 구조

출처 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

Web APIs

자바스크립트 혹은 더 넓은 범위로 웹 관련 기술을 지원하는 인터페이스의 모음.

브라우저에서 제공하는 API로 DOM,AJAX,Timeout 등이 있다.

Callback Queue

Web API에서 처리가 끝난 후 실행 되어야 하는 Callback(Task)이 순차적으로 쌓이는 자료 구조

콜스텍에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue에 밀어 넣는다.

Event Loop

이벤트 루프는 Call Stack과 Callback Queue의 상태를 체크하고,

Call Stack이 빈 상태가 되면 Callback Queue의 첫번째 콜백을 Call Stack에 밀어 넣는다.

이런 반복적인 행동을 틱(tick)이라 부름

하나의 스레드에 하나의 콜 스택에서 지연이 걸리는 작업이 프로그램 전체를 멈추게 하지 않도록 지연이 걸리는 작업을 Web APIs에서 처리하고 이벤트 루프라는 일종의 옵저버로 실행 순서를 제어한다. 이러한 형태는 싱글 스레드 언어인 자바스크립트의 비동기 프로그래밍과 관련된다.

다시 말해, 자바스크립트 자체는 싱글 스레드가 맞지만, Web API, Callback Queue, Event Loop 덕분에 멀티 스레드처럼 비동기적 처리가 가능하다.

참고

https://gyofeel.github.io/js/nodejs/web/Javascript와-Nodejs는-모두-싱글-스레드에서-실행되는가/

profile
말에 힘이 있는 사람이 되기 위해 하루하루, 성장합니다.

0개의 댓글