프로그래밍을 하다 보면 종종 ‘동기(synchronous)'와 '비동기(asynchronous)'라는 용어를 접하게 됩니다. 동기와 비동기는 코드 실행 순서와 시간에 관련된 개념으로, 시스템의 효율성과 사용자 경험에 영향을 미칩니다.
자바스크립트는 실행 컨텍스트 스택에 들어있는 실행 컨텍스트를 실행하여 순차적으로 수행합니다. 실행 컨텍스트에 함수 실행 컨텍스트가 푸시되며 스택의 상단에 위치한 컨텍스트 부터 순서대로 실행됩니다.
자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가지기 때문에, 스택의 최상단에 있는 실행 컨텍스트를 제외하고 모든 실행 컨텍스트는 대기 중인 태스크입니다. 이는 자바스크립트 엔진이 싱글 스레드 방식으로 동작함을 의미합니다.
싱글 스레드 방식은 하나의 태스크만 실행 가능하기 때문에 동작 시간이 긴 태스크 실행 시, 블로킹(작업 중단)이 발생합니다.
1. 동기(Synchronous)
예를 들어, 일정 시간이 흐른 뒤 함수를 호출하는 코드를 실행하는 경우, 해당 코드 뒤에 위치한 작업들은 일정 시간동안 호출되지 못하고 작업 중단이 발생합니다.
이처럼, 현재 실행 중인 태스크 종료까지 다른 태스크들이 대기한 뒤 순서에 따라 실행되는 것을 동기 처리라고 합니다.
동기 처리 방식은 태스크 순서 대로 처리되어 실행 순서가 보장된다는 장점이 존재하지만, 앞선 태스크 종료까지 블로킹된다는 단점이 존재합니다.
2. 비동기(Asynchronous)
반대로, 비동기 처리 방식은 실행 중인 태스크가 종료되지 않았더라도 후순위의 태스크를 실행하는 방식입니다. 이러한 방식을 '논블로킹(non-blocking)’이라고도 부릅니다.
현재 실행 중인 태스크가 종료되지 않더라도 다음 태스크를 실행한다는 장점이 존재하지만, 실행 순서가 보장되지 않는다는 단점도 존재합니다.
동기 처리와 비동기 처리는 실행 순서와 관련되어 중요한 개념으로 이를 활용한다면 효율적인 시스템 성능을 구현할 수 있습니다. 하지만, 잘못된 방법으로 사용한다면 블로킹 현상이나, 예측하지 못한 결과를 초래하기 때문에 상황에 알맞은 방식을 사용해야 합니다.
브라우저에서 비동기 처리가 어떻게 동작되는지 궁금하다면…?
참고
이웅모, ⌈모던 자바스크립트 - Deep Dive⌋, 2020, 42_비동기 프로그래밍(p.809 - 812)