[JS] 1. Call Stack & Event Loop

모든 자바스크립트 개발자가 알아야 하는 33가지 개념

GitHub - yjs03057/33-js-concepts: 모든 자바스크립트 개발자가 알아야 하는 33가지 개념

Javascript는 싱글 스레드 언어

Javascript는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업 혹은 한 번의 코드 조각을 처리할 수 있습니다.
엄밀히 말하면, Javascript의 메인 스레드인 이벤트 루프가 싱글 스레드입니다.
하지만 이벤트 루프만 독립적으로 실행되지는 않고, 웹 브라우저나 nodeJs의 도움을 받아 멀티스레드처럼 실행이 됩니다.
즉, Javascript 자체는 싱글 스레드가 맞지만 런타임 환경은 멀티 스레드처럼 작동됩니다.

싱글 스레드로 어떻게 한번에 여러 요청을 처리할까?

기존에 사용되던 동기식 요청을 코드를 한 줄 한 줄씩 차례대로 실행되기에 작업시간이 길어지고, 자원의 낭비가 심해집니다.
이것을 해결하기 위해 비동기 작업을 사용합니다.

동기(sync), 비동기(async)

동기(sync): 이어 달리기
비동기(async): 각자 달리기

동기적 실행: 순차적으로 작업이 실행. 이전 작업이 아직 실행 중이라면 다음 작업을 실행할 수 없습니다. 다음 작업을 하기 위해서, 이전 작업의 실행 결과가 필요할 때 적합합니다. Javascript는 일반적으론 동기 실행을 기반으로 합니다.

비동기적 실행: 비 순차적으로 작업을 실행. 이전 작업의 실행 여부가 다음 작업에 영향을 끼치지 않습니다. 작업이 완료되는데 시간이 걸리고, 실행 결과 값이 다음 작업에 영향을 끼치지 않는다면 비동기적으로 실행할 수 있습니다.

Javascript는 엔진이 단 하나의 Call Stack으로 코드를 실행하기 기본적으로 동기 실행 언어입니다. 하지만 비동기적 실행이 불가능한 것은 아닙니다. Javascript의에서 비동기적 작업을 처리하기 위해서는 Call Stack만이 아닌 Callback Queue와 Event Loop의 도움이 필요합니다.

Javascript의 런타임 과정

Javascript 런타임 과정

출처: https://dkje.github.io/2020/09/20/AsyncAndEventLoop/

[JS] 비동기 실행과 Runtime - 어? 쓰흡... 하아.... | Dev X

Javascript의 엔진

Javascript의 엔진은 웹 페이지의 Javascript 코드를 수신받아 구문을 분석하고, 구문 오류가 없다면 실행 가능한 명령으로 변환됩니다.
Javascript의 엔진은 Memory Heap과 Call Stack으로 구성됩니다.

Heap: 메모리 힙은 변수 및 객체들을 할당하는 공간입니다. Javascript의 메모리는 수동 할당과 해제가 불가능하며 대신 Garbage Collector로 관리됩니다. 변수와 객체에 대한 모든 메모리 할당은 여기에서 발생됩니다.

Callback Queue: 비동기적으로 실행된 콜백함수가 보관되는 영역.
Javascript의 런타임에는 처리할 메시지 목록과 실행할 관련 콜백 함수인 메시지 대기열이 포함되어 있습니다.
스택에 충분한 용량이 있으면 메시지가 대기열에서 꺼내어 관련 함수 호출(따라서 초기 스택 프레임 생성)로 처리됩니다.
스택이 다시 비게 되면 메시지 처리가 종료됩니다.
기본적으로 이러한 메시지는 콜백 기능이 제공된 경우 외부 비동기 이벤트(예: 마우스 클릭 또는 HTTP 요청에 대한 응답 수신)에 대한 응답으로 대기열에 추가됩니다.
예를 들어, 사용자가 버튼을 클릭했는데 콜백 기능이 제공되지 않았다면 메시지가 대기열에 추가되지 않았을 것입니다.

• 큐(Queue): 자료 구 중 하나, 선입선출(FIFO, First In First Out)의 룰을 따릅니다.

Call Stack: Call Stack은 함수의 호출을 스택으로 관리하는 공간입니다. Javascript의 엔진은 단 하나의 Call Stack을 갖고 있기 때문에 싱글 스레드의 동기적 방식으로 실행됩니다.
함수는 호출 시 Call Stack에 추가(push)됩니다.
최상위의 스택 함수가 실행되는 동안 하위의 함수들은 작업을 멈춘 채 대기하고 있습니다.
최상위의 함수가 작업을 완료한 후엔 Call Stack에서 제거(pop)되며 return 값과 함께 이전 실행 함수로 되돌아갑니다.

• 스택(stack): 자료구조 중 하나, 선입후출(LIFO, Last In First Out)의 룰을 따름.

Web API

브라우저에서 제공하는 API로, DOM, Ajax, Timeout 등이 있습니다.
Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue에 밀어 넣습니다.

이벤트 루프(Event Loop)

Call Stack과 Callback Queue의 상태를 체크하여, Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣습니다.
이러한 반복적인 행위를 틱(tick)이라고 칭합니다.

 

참고하면 좋을 영상