JavaScript - 자바스크립트를 멀티 쓰레드처럼 사용하는 방법 , 비동기

자바스크립트를 멀티 쓰레드처럼 사용하는 방법

---

JavaScript는 기본적으로 싱글 쓰레드 기반의 언어이기 때문에 멀티 쓰레드를 직접적으로 지원하지 않는다!

그러나 비동기 프로그래밍을 통해 멀티 쓰레드와 유사한 효과를 얻을 수 있음!!

자바스크립트에서의 비동기 로직

JavaScript는 한 번에 하나의 일만 수행할 수 있는 Single Thread 언어로 동시에 여러 작업을 처리할 수 없음

Thread란?

작업을 처리할 때 실제로 작업을 수행하는 주체로, multi-thread라면 업무를 수행할 수 있는 주체가 여러개라는 의미

=> 즉, JavaScript는 하나의 작업을 요청한 순서대로 처리할 수 밖에 없다.

그러면 어떻게 Single Thread인 JavaScript가 비동기 처리를 할 수 있을까?

• JavaScript 자체는 Single Thread이므로 비동기 처리를 할 수 있도록 도와주는 환경이 필요함
• 특정 언어가 동작할 수 있는 환경을 "런타임"이라 함
• JavaScript에서 비동기와 관련한 작업은 브라우저 또는 Node 환경에서 처리
• 이 중에서 브라우저 환경에서의 비동기 동작은 크게 아래의 요소들로 구성됨
  - JavaScript Engine의 Call Stack
  - Web API
  - Task Queue
  - Event Loop

JavaScript 비동기 처리 동작 방식

1. 모든 작업은 Call Stack으로 들어간 후 처리된다. (Call Stack은 알바)
2. 오래 걸리는 작업이 Call Stack으로 들어오면 Web API로 보내 별도로 처리하도록 한다.
3. Web API(주방장)에서 처리가 끝난 작업들은 곧바로 Call Stack으로 들어가지 못하고 Task Queue(요리(가판대))에 순서대로 들어간다.
4. Event Loop(사장님)가 Call Stack이 비어 있는 것을 계속 체크하고 Call Stack이 빈다면 Task Queue에서 가장 오래된 (가장 앞에 있는) 작업을 Call Stack으로 보낸다.

비동기 처리 동작 요소

1. Call Stack(알바)

• 요청이 들어올 때 마다 순차적으로 처리하는 Stack
• 기본적인 JavaScript의 Single Thread 작업 처리

2. Web API(주방장)

• JavaScript 엔진이 아닌 브라우저에서 제공하는 runtime 환경
• 시간이 소요되는 작업을 처리(setTimeout, DOM Event, AJAX 요청 등)

3. Task Queue(요리)

• 비동기 처리된 Callback함수가 대기하는 Queue

4. Event Loop(사장님)

• Call Stack과 Task Queue를 지속적으로 모니터링
• Call Stack이 비어 있는지 확인 후 비어 있다면 Task Queue에서 대기 중인 오래된 작업을 Call Stack으로 Push

정리

JavaScript는 한 번에 하나의 작업을 수행하는 Single Thread 언어로 동기적 처리를 하지만, 브라우저 환경에서는 Web API에서 처리된 작업이 지속적으로 Task Queue를 거쳐 Event Loop에 의해 Call Stack에 들어와 순차적으로 실행됨으로써 비동기 작업이 가능한 환경이 됨

태스크 큐와 마이크로태스크 큐

- 태스크 큐

• 태스크 큐에는 비동기 작업 중에서 콜백 함수가 포함된 이벤트나 타이머, AJAX 요청, DOM 이벤트 핸들러 등이 들어감
• 주로 setTimeout, setInterval, 이벤트 핸들러, AJAX 요청 완료 콜백 등이 태스크 큐에 들어감
• 태스크 큐에 있는 작업은 호출 스택(Call Stack)이 비어있을 때, 이벤트 루프에 의해 호출 스택으로 이동되어 실행

- 마이크로태스크 큐

• 마이크로태스크 큐에는 Promise의 then() 및 catch() 메소드, queueMicrotask() 함수 등과 같이 프로미스와 관련된 비동기 작업이 들어감
• 마이크로태스크 큐에 있는 작업은 호출 스택이 비어있을 때, 태스크 큐보다 우선하여 호출 스택으로 이동되어 실행됨
• 이러한 특성 때문에 마이크로태스크 큐에 들어간 작업은 태스크 큐에 있는 작업보다 먼저 실행됨

requestAnimationFrame

브라우저에서 제공하는 API 중 하나로, 웹 애니메이션을 구현할 때 사용

• 브라우저가 다음 번 렌더링이 일어나기 직전에 애니메이션 프레임을 요청할 수 있음
  => 브라우저가 렌더링할 때 제어권을 자바스크립트에 넘겨주는 것을 의미
• 브라우저가 애니메이션을 더 부드럽게 렌더링
  => 브라우저의 내부 최적화에 의해 시스템 리소스를 효율적으로 사용하기 때문

requestAnimationFrame 장점

1. 브라우저 최적화: 브라우저가 자체적으로 최적화를 수행하므로 부드럽고 효율적인 애니메이션을 제공
2. 타이밍 제어: 브라우저의 리플로우나 리페인트와 관련된 문제를 피할 수 있으며, 애니메이션의 타이밍을 더욱 정확하게 제어 가능
3. 자원 절약: 애니메이션이 화면에 보이지 않을 때는 렌더링을 중지하여 자원을 절약 가능
4. 자동 조정: 브라우저가 탭이나 창이 백그라운드에 있는 경우에는 requestAnimationFrame이 자동으로 중지되므로 배터리 수명을 절약 가능