JS 작동 원리 (Event Loop, Call Stack, Web API, Callback Queue)

JS 작동 원리

싱글 스레드 기반의 이벤트 루프 방식

JS 는 싱글 쓰레드 언어

• 프로세스 : 운영체제에서 실행중인 하나의 프로그램

• 쓰레드 : 프로세스의 작은 단위이며 단 한개의 일만 처리할 수 있음

• Call Stack

  현재 실행중인 서브루틴(함수)에 대한 정보들을 담아주는 Stack 구조의 메모리 영역

  후입선출 구조이기 떄문에 가장 나중에 쌓인 함수가 가장 먼저 처리됨

• Web APIs

  Call Stack 에서 불러온 함수가 비동기적 함수일 시 이것의 Run 함수를 호출하는 역할을 함

  DOM, Ajax, SetTimeout 등이 비동기적 처리

  처리를 끝맞힌 함수는 Callback Queue 로 이동시킴

• Callback Queue

  Web API 에서 보내진 비동기 처리가 모이는 곳

  Queue 구조이며 선입선출함

  여기 모인 함수들은 이벤트 루프의 감시하에 놓임

• Event Loop

  Call stack 과 Queue 를 감시하는 역할을 함

  동기 함수와 비동기 함수의 순서를 정함

  Call Stack 이 비게 되면 Queue 에 쌓인 비동기 함수를 Queue 방식으로 Call Stack 으로 보내주는 역할을 함

  이러한 행동을 tick 이라 부름

참조 : https://velog.io/@xedni/JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%91%EB%8F%99-%EC%9B%90%EB%A6%ACEvent-Loop%EC%99%80-Call-Stack-Web-API-Callback-Queue