동기(Synchronous), 비동기(Asynchronous)란?
동기 : 한 작업이 끝난 후에 다음 작업을 진행하는 방식, 작업들이 순차적으로 실행됨
비동기 : 작업이 완료되기 전에 다음 작업을 시작할 수 있는 방식
자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다.
console.log('Hi!');
console.log('Hello!');
console.log('Bye!');위 코드를 실행해면 Hi!, Hello!, Bye!가 순차적으로 출력될 것이다.
한 번에 한 줄의 코드만 순차적으로 실행한 것이다.
이것이 동기다.
출력하는 문자가 많을수록 실행 시간이 1초 이상 길어진다고 가정하자. 그리고 코드를 읽어내려가는 것은 1초 안에 이루어진다.
이때 동기 처리가 되면 Hi!, Hello!, Bye! 순서대로 출력이 되지만,
비동기 처리라면 Hello!, Bye!, Hi! 순서대로 출력이 될 것이다.
비동기 처리는 한가지 작업이 다 끝나지 않아도 다른 작업을 할 수 있다. 이것이 비동기다.
동기처리에서 만약 console.log('Hello!'); 대신에 시간이 아주 오래 걸리는 코드가 있을 경우
console.log('Bye!');는 오래걸리는 작업이 끝날 때까지 실행되지 못하고 기다리고 있을 것이다.
확대하여, 웹개발에서 여러 기능들이 모두 순차적으로 작동하다보면 중간중간 오래걸리는 코드들이 있을 것이고, 이러한 코드를 기다리느라 사용자들은 버벅거리는 웹서비스를 경험하게 될 것이다.
이러한 문제를 해결하기 위해서 비동기 처리를 해야 한다.
호출스택(Call stack)
자바스크립트가 비동기 처리를 어떻게 처리하는지 알기 위해서는 호출스택과 이벤트 루프, WebAPI를 꼭 알아야 한다.
호출스택은 자바스크립트 엔진이 함수를 호출하고 실행하는 과정에 사용하는 스택이다.
작동방식은 다음과 같다.
- 함수가 호출되면 그 함수는 호출스택에 쌓인다.
- 호출스택에 쌓인 함수는 순차적(Top -> Bottom)으로 실행된다. 만약 함수 안에서 또 다른 함수를 호출하면 그 함수도 호출스택에 추가된다.
- 함수가 종료되면 스택에서 제거된다.
WebAPI
브라우저나 Node.js 환경에서 제공하는 비동기 API들을 말한다.
자바스크립트에서 직접 처리하지 않고, 브라우저나 Node.js의 환경에서 제공하는 API들이 비동기 작업을 처리하도록 맡긴다.
- 비동기 작업이 발생하면 자바스크립트 엔진은 그 작업을 WebAPI에 넘긴다.
- WebAPI는 비동기 작업을 완료하고, 해당 콜백함수를 콜백 큐에 추가한다.
이벤트 루프(Event loop)
이벤트 루프는 자바스크립트에서 비동기 작업을 처리하는 메커니즘이다.
이벤트 루프의 역할은 호출스택과 콜백큐(Callback Queue)를 사용하여 작업을 관리하는 것이다.
콜백 큐(Callback Queue)는 비동기 작업에서 완료된 작업들을 대기시키는 큐다.
- 콜백 큐에는 MicroTask Queue와 MacroTask Queue가 있으며, MicroTask Queue가 더 우선순위가 높다.
- 호출스택이 비어 있을 때 이벤트 루프는 콜백 큐에 있는 콜백함수들을 호출스택으로 가져와서 실행한다.
호출 스택이 비어야 콜백 큐에 있는 완료된 작업들이 실행된다.
