[JavaScript] 비동기(Asynchronous) 원리

JS의 비동기 원리

Single Thread, But Asynchronous

JS는 single thread 이지만, asynchronous한 언어이다.

싱글 스레드로 동작하지만 Web API와 Event Loop를 통해 멀티 스레드"처럼" 동작할 수 있다.

 

JS + Browser 구조

JS는 다른 언어와 유사하게 code area, call stack, memory heap을 이용하여 동작한다.

 

Code area에는 실행한 JS 코드가 저장된다.

Call stack을 통해 context가 관리되고 primitive type의 data가 저장된다.

 

Memory heap을 통해서는 reference type(배열, 객체, 함수 등)의 데이터가 저장된다.

Heap 영역에 객체의 데이터를 저장하고 call stack에 할당된 변수에는 heap의 주소를 연결한다.

이는 객체를 복사할 때 변수를 할당하면 얕은 복사가 일어나는 원인이기도 하다.

얕은 복사(shallow copy) : 두 변수가 같은 주소를 가리키게 되는 현상

 

Heap은 메모리 누수 방지를 위해 JS 엔진의 메모리 관리자가 항상 관리하고,

LIFO(Last In, First Out)을 따르지 않고 랜덤하게 들어간다.

 

 

나머지 Web APIs, Callback Queue, Event Loop 영역을 브라우저가 관리해준다.

이 영역들간의 상호작용을 통해 비동기가 이루어진다.

 

비동기 원리

0. Stack

Stack를 통해 변수 저장, 함수 호출 등이 이루어지며 js의 코드가 실행된다.

 

1. Stack → Web APIs → Callback Queue

실행 중에 비동기 코드가 나온다면 Web APIs 영역으로 넘겨서 수행한다.

비동기 코드는 브라우저의 Web API를 이용하여 수행하기 때문이다.

 

2. Event Loop : Callback Queue → Stack

Web API는 비동기 작업을 다 끝내면 해당하는 callback 함수를 Callback queue로 넘긴다.

Event loop는 stack 영역이 다 비었을 때 callback queue에 넘어온 callback 함수를 stack으로 넘긴다.

 

3. Stack

넘어간 callback 함수가 stack 영역에서 수행된다.

 

 

---

비동기 처리

아래 3가지 방식은 작동 원리가 다르다기 보다는 사용하는 방식이 다른 부분이 더 크다.

버전이 발전함에 따라 사용하는 방식이 개편되었다.

 

비동기 처리 방법

• Callback
  • <pre>setTimer(() => {...}, 0);</pre>
  • Callback hell : 콜백 안에 다시 콜백 함수가 반복되는 경우 들여쓰기가 반복되어 가독성이 떨어지게 된다.
• Promise...then
  • ES6부터 사용가능하다.
  • Promise를 생성하거나 이용하여 끝에 <pre>.then((...) => {...})</pre>을 붙인다.
• async / await
  • ES8부터 사용가능하다.
  • <pre>async function func() { await call(); }</pre>
  • <pre>async () => { await call(); }</pre>