[JS] 자바스크립트에서 비동기가 가능한 이유

1. 동기

• 서버에 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어지는 방식.

 

2. 비동기

• 서버로부터 데이터를 받아와서 뿌려줘야 할 때, 데이터를 받아오기까지 시간이 걸림.
• 이를 동기로 하면 데이터를 받아오기까지 기다린 다음 앱이 실행됨.
• 서버에서 가져오는 데이터 양이 많을수록 앱의 실행 속도는 느려지면서 UX가 좋지 않게 됨.
• 따라서 이를 비동기로 처리하는데, 데이터를 수신하는 코드와 페이지를 표시하는 코드가 비동기적으로 처리되어 앱이 바로 실행될 수 있음.
• firebase, web API등을 쓸 때 필요.

 

3. 자바스크립트에서 비동기가 가능한 이유

• 자바스크립트는 싱글스레드로 동작하는 언어이기 때문에 비동기가 안됨. (?)
• 자바스크립트 엔진은 [메모리힙 + 콜스택] 으로 구성되어 있음.
• 싱글스레드는 콜스택이 하나라는 것.
• 콜스택은 작업을 실행하면(함수가 실행되면) 쌓이고 실행이 끝나면 사라짐.
• WebAPI(DOM, AJAX, setTimeout...), Task Queue, Event Loop 등과 함께 동작.

 

예를들어

• setTimeout이 실행되면 콜스택에 들어감.
• 그러면 콜스택은 web API에 요청 함.(이것 좀 해줘!)
• 만약 1분을 기다렸다가 실행하는 것이라면,
• setTimeout 이후에 실행 될 콜백함수를 1분 후에 골백큐에 넘겨줌.(이제 이 함수 실행하면 돼!)
• 이벤트 루프를 통해 콜스택에 콜백함수를 다시 넣음.
• 해당 함수가 실행되면 콜스택에서 사라짐.

 

즉, 자바스크립트의 비동기 작업은

1. 콜스택에 들어감
2. web API같은 곳에 위임함
3. 콜스택에서 사라짐
4. 위임된 곳에서 일 처리 함
5. 콜백큐에 콜백함수 넘겨 줌
6. 이벤트루프를 통해 콜백함수는 콜스택에 들어감
7. 콜스택이 실행을 하면 사라짐