My Library

오늘은 동기 / 비동기에 대해 완벽하게 정리해 보겠습니다.

동기(Sync) / 비동기(Async)

동기(Sync)란?

동기란 직렬적으로 작업을 수행하는 방식을 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어집니다.

즉, 다른 요청을 처리하는 동안 나머지 작업들은 대기 상태가 됩니다.

동기 실행의 동작 방식 및 처리 순서

콜 스택(Call Stack):

• JavaScript  엔진은 현재 실행중인 모든 동기 작업을 콜 스택에 쌓습니다.
• 콜 스택은 LIFO(Last In, First Out) 구조로 가장 마지막에 추가된 작업이 가장 먼저 처리됩니다.
• 한 작업이 실행되면, 그 작업이 완료될 때 까지 콜 스택의 맨 위에 위치하며, 완료되면 콜 스택에서 제거됩니다.

블로킹(Blocking):

• 동기 작업 중 하나가 긴 시간을 필요로 하는 작업일 경우, 그 작업이 완료될 때까지 콜 스택이 차단됩니다.
• 이로 인해 후속 작업들은 차단 작업이 완료되기 전까지 실행될 수 없으며, UI업데이트나 다른 이벤트 처리가 지연될 수 있습니다.

작업 처리 순서:

• 작업1이 콜 스택에 들어가서 실행됩니다.
• 작업1에서 데이터를 서버에서 가져오는 동기작업을 요구하느 경우, 해당 작업이 완료되기 전까지 다음 작업은 실행되지 않습니다.
• 작업1이 완료되고 콜 스택에서 제거되면, 작업2가 콜 스택에 들어가 실행됩니다.

예시:

console.log('Task 1 시작'); // 콜 스택에 들어감
// 서버에서 데이터를 동기적으로 가져옴 (블로킹)
const data = getDataFromServer(); // 작업이 완료될 때까지 콜 스택 차단
console.log('Task 1 완료'); // 작업 1 완료 후 콜 스택에서 제거

console.log('Task 2 시작'); // 작업 1이 완료된 후 콜 스택에 들어감
doSomethingWith(data); // 작업 2 실행
console.log('Task 2 완료'); // 작업 2 완료 후 콜 스택에서 제거

비동기(Async)란?

비동기란 병렬적으로 작업 수행하는 방식으로 요청을 보낸 후 응답의 수락 여부와 상관없이 다음 작업을 동작하느 방식입니다. 비동기 요청시 응답 후 처리할 콜백함수를 함께 알려주어 작업이 완료되어 응답을 받으면 콜백함수가 호출됩니다.

비동기 동작 방식

메인 스레드: JavaScript코드가 실행될 때, 동기적으로 실행되는 작업들은 콜 스택(call stack)에서 처리되고 작업이 완료되면, 콜 스택에서 제거됩니다

이벤트 루프: 비동기 작업은 바로 콜 스택에 추가되지 않습니다. 대신 해당 작업은 Web API 또는 C++ API에 의해 처리되고, 완료되면 콜백 함수가 테스크 큐(task queue) 또는 마이크로테스크큐(microtask queue)에 추가됩니다.

테스크 큐와 마이크로테스크 큐:

• 태스크 큐(Task Queue): setTimeout, setInterval, I/O 작업과 같은 비동기 작업의 콜백이 대기하는 공간입니다.
• 마이크로태스크 큐(Microtask Queue): Promise의 then, catch, finally 콜백이나 MutationObserver 콜백 같은 더 높은 우선순위를 가진 작업들이 대기하는 공간입니다.

이벤트 루프의 역할: 이벤트 루프는 콜 스택이 비어 있고 실행할 준비가 되었을 때, 태스크 큐 또는 마이크로태스크 큐에서 대기 중인 작업을 콜 스택으로 이동시킵니다. 마이크로태스크 큐의 작업은 태스크 큐의 작업보다 우선 처리됩니다.

비동기 작업 처리 순서