동기와 비동기

동기와 비동기

동기(Synchronous)

✔ 모든 일을 순서대로 하나씩 처리하는 것
✔ 요청과 응답을 동기식으로 처리하게 된다면?

• 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직을 처리

비동기(Asynchronous)

✔ 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리(병렬적 수행)

비동기를 사용하는 이유

✔ 사용자 경험

• 아주 큰 데이터를 불러온 뒤 실행되는 앱이 있을 때 동기로 처리한다면 데이터를 모두 불러온 뒤에야 앱의 실행 로직이 수행되므로 사용자들은 마치 앱이 멈춘 것과 같은 경험을 겪게된다.
• 비동기로 처리하면 먼저 처리되는 부분부터 보여줄 수 있으므로, 사용자 경험에 긍정적인 효과를 볼 수 있음

Single Thread 언어, JavaScript

✔ JavaScript는 한번에 하나의 일만 수행하는 Single Thread 언어로 원래는 동시에 여러 작업처리 불가

JavaScript Runtime

✔ JavaScript 가 비동기 처리를 할 수 있도록 도와주는 환경
✔ JavaScript 에서 비동기와 관련한 작업은 브라우저 또는 Node 환경에서 처리
✔ 브라우저 환경에서의 비동기 동작 구성 요소

1. JavaScript Engine의 Call Stack
2. Web API
3. Task Queue
4. Event Loop

브라우저에서의 비동기 처리 방식

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