동기(Synchronous)

작업을 순차적으로 하나씩 처리하는 것으로, 이전 작업이 완료된 이후에 다음 작업을 실행하게 된다.

• • 동기와 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있음. 즉, A작업이 모두 진행 될 때까지 B작업은 대기해야 함

비동기(Asynchronous)

작업을 시작한 후 결과를 기다리지 않고 바로 다음 작업을 수행하는 것으로, 요청에 대한 응답을 병렬적으로 처리한다.

• 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있음. 즉, A작업을 시작하면서 동시에 B작업이 실행되며, A작업은 결과값이 나오는대로 출력됨.

비동기(Asynchronous)를 사용하는 이유

예를 들어, 용량이 큰 사진이나 데이터를 불러온 뒤에 실행되는 앱의 경우, 이를 동기로 처리한다면 데이터를 모두 불러온 뒤에야 앱이 실행되게 되므로, 사용자들은 앱을 이용하기 위해 오랜 시간 기다려야하는 불편을 겪게 된다.

만약 이를 비동기로 처리할 수 있다면, 먼저 처리되는 부분부터 보여지게 되므로, 사용자 경험에 긍정적인 영향을 줄 수 있다.

JavaScript의 비동기 처리 방식

JavaScript는 Single Thread 언어로, 여러 작업을 동시에 처리할 수 없다. 따라서 자바스크립트는 비동기 처리를 위해 다음과 같은 환경의 도움을 받는다.

<aside> 💡 Thread? 작업을 처리할 때 실제로 작업을 수행하는 주체로, Multi-thread라면 업무를 수행할 수 있는 주체가 여러 개라는 의미

</aside>

1. JS Engine의 Call Stack
   • Call Stack(LIFO)은 요청이 들어올 때 마다 순차적으로 처리하는 스택으로, 기본적인 자바스크립트의 싱글 스레드 작업 처리함.
2. Web API
   • JS 엔진이 아닌 브라우저에서 제공하는 Runtime 환경으로, 시간이 소요되는 작업이 Call Stack으로 들어오면, Web API로 보내서 처리하도록 함.
3. Task Queue
   • 비동기 처리된 Callback 함수가 대기하는 Queue로, Web API에서 처리가 끝난 작업들은 Task Queue(FIFO)에 순서대로 들어가게 됨.
4. Event Loop
   • Event Loop가 Call Stack이 비어있는 것을 체크하고, Task Queue에서 가장 오래된 작업을 Call Stack으로 보낸다.