비동기 프로그래밍
개요
- 비동기란 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행하는 과정을 말한다. 이는 작업 순서가 보장되지 않는다는 단점이 있지만 작업이 완료될 때까지 다른 작업이 기다리지 않고 동시에 실행될 수 있으므로 블로킹이 발생하지 않는다는 장점이 있다. 이를 고려하여 프로그래밍 하는 것을 비동기 프로그래밍이라고 한다.
프론트엔드에서 비동기 작업을 하는 이유
- 비동기 프로그래밍은 일반적으로 웹에서 네트워크 요청을 할 때 수행된다. 브라우저가 서버에 네트워크 요청을 보내고 응답을 기다리는 동안 다른 작업을 수행할 때 사용된다. 그 외 다른 작업에서도 비동기 프로그래밍을 수행한다.
자바스크립트에서 함수 실행 방식
자바스크립트는 싱글 스레드 방식!
싱글 스레드 방식은 한번에 단 하나의 작업만 처리할 수 있음을 의미한다.
자바스크립트는 단 하나의 콜 스택을 갖는다. 콜 스택은 함수의 실행 순서를 관리하는 데 함수가 순차적으로 실행되는 원리를 따른다.
함수를 호출하면 함수 실행 컨텍스트가 생성되고 실행 컨텍스트는 콜 스택에 푸쉬되고 함수가 실행된다. 콜 스택의 최상위 요소는 현재 실행 중인 함수이고 콜 스택에서 제거되는 것은 함수의 종료를 의미한다. 콜 스택의 최상위 요소를 제외한 요소들은 대기 중인 작업들이며 최상위 요소가 제거되면 대기 중인 작업이 실행된다.
이처럼 자바스크립트는 단 하나의 콜스택을 갖기 때문에 한 번에 하나의 작업을 할 수 있다. 따라서 작업이 수행되는 동안 다른 작업이 대기하기 하게 되어 블로킹이 발생하고 동기 처리 방식으로 수행된다.
그렇다면 비동기는 어떻게 수행된다는 것인가?
자바스크립트는 싱글 스레드 방식이다. 하지만 웹 브라우저를 보면 한번에 여러 작업이 수행되는 것을 볼 수 있다. (ex. 웹 요청으로 데이터를 가져오는 동안 렌더링 수행).
그 이유는 브라우저(or nodejs)가 이벤트 루프와 태스크 큐를 통해 비동기 처리를 수행하기 때문이다. 이벤트 루프는 자바스크립트 엔진의 콜 스택을 감시하며 콜 스택이 비어있고 태스크 큐에 작업이 있으면 태스크 큐의 작업을 콜 스택에 푸시한다.
예를 들어, setTimeout(fn, delay) 을 호출하면 콜 스택에 setTimeout 함수가 푸시된다. 이후 지정시간 (delay) 시간 이후 setTimeout 의 콜백 함수가 태스크 큐에 푸시된다. 그리고 setTimeout 함수 자체는 그 즉시 콜 스택에서 제거된다. 이 후, 나머지 코드가 실행된 후 콜스택이 비어있으면 이벤트 루프가 이를 감지하고 태스크 큐에 있는 콜백함수를 콜스택에 푸시하여 실행한다.
브라우저는 setTimeout 함수 뿐만 아니라 HTTP 요청과 DOM API와 같은 Web API 를 제공한다.
💡 비동기 처리 과정에서 브라우저와 자바스크립트 엔진의 역할 구분
브라우저: 타이머 설정, 태스크 큐에 콜백함수 등록
자바스크립트 엔진: 나머지 코드 실행 컨텍스트 생성 및 콜 스택에 푸시
이와 같이 브라우저와 자바스크립트 엔진의 협력으로 비동기 처리를 수행할 수 있다.
참고
