지난 글에서 우리는 단일 콜 스택 내에서 시간이 오래 걸리는 함수 호출(서버에서 데이터를 받아오는 행위)이 있을 때 어떤 현상이 발생할 수 있는지 확인해 보았습니다.
다시 한번 짚어보자면, 브라우저는 콜 스택에 실행할 함수가 있을 동안은 아무것도 할 수 없습니다. 이것을 Freeze 또는 Blocking된 상태라고도 했습니다.
이 상태에서 브라우저는 렌더링 및 다른 코드 수행도 할 수 없는데 이런 상황의 문제는 콜 스택이 빌 때까지 사용자들에게 프로그램의 UI가 더이상 효율적이거나 즐거운 경험을 줄 수 없다는 것입니다.
문제는 오랜 시간 동안 콜 스택 내의 태스크가 해결되지 않으면 브라우저가 어떠한 조치를 취하게 되는데 브라우저 자체 내에서 에러를 던지고 해당 페이지를 닫기를 요청할 수도 있습니다.
이것은 사용자 경험을 완전히 망가뜨리며 절대 있어서는 안됩니다.
그렇다면 우리는 이것을 어떻게 해결해야 하는가? 이 부분에 대해서 이번 글에서 다뤄보겠습니다.
만약 자바스크립트 엔진의 콜 스택이 단시간에 처리할 수 없을 정도의 작업을 처리해야 한다면 다음과 같은 방법을 시도해 볼 수 있습니다.
먼저, 자바스크립트가 많은 시간을 요구하는 코드를 만나게 된다면 일단 그 코드 중 하나만 '지금' 실행되고 나머지는 '나중에' 실행됩니다.
이것을 비동기 처리 라고 정의하며 '지금' 완료할 수 없는 작업은 비동기적으로 수행이 됩니다.
아래의 코드를 보면서 이해해 봅시다.
// ajax(..) is some arbitrary Ajax function given by a library
var response = ajax('https://example.com/api');
console.log(response);
// `response` won't have the response
비동기 처리의 대표적인 예로 ajax가 있습니다.
ajax는 비동기적으로 처리되기 때문에 콘솔로 response를 출력해봐도 아직 response값이 없다고 브라우저는 생각합니다. 아마도 이러한 상황을 많이 접해봤을지도 모릅니다. 왜 response가 존재하지 않을까요?
비동기 처리를 하게 된다면 ajax('https://example.com/api');코드를 보고서 브라우저는 일단 이 코드는 실행했다고 가정하고 건너뛰게 됩니다. 따라서 response값은 아직 없다고 인식하게 되는 것입니다.
비동기 처리에서 그 결과를 반환하기를 기다린다면 가장 많이 사용하는 예로 콜백함수가 있습니다.
ajax('https://example.com/api', function(response) {
console.log(response); // `response` is now available
});
지난 번 글에서 이벤트 루프를 보았다면 이 코드가 어떻게 작동할 지 이미 예측했을 수도 있습니다.
자바스크립트 엔진은 ajax()함수를 콜 스택에 넣게 되고(하나만 실행) ajax함수의 콜백함수를 Web APIs에 넘겨주고 ajax()함수를 콜 스택에서 제거합니다.
(콜백함수는 비동기 처리에서 가장 많이 쓰이는 패턴으로 아래에서 무엇인지 설명하겠습니다. 위 코드에선 function(resoponse){...}를 콜백함수라고 합니다.)
Web APIs는 https://example.com/api에서 데이터를 응답받은 후 콜백함수를 태스크 큐에 넣습니다. 이후 콜 스택이 비어있는 것을 확인하면 콜백함수를 콜 스택으로 밀어넣게 되고 콜백함수가 실행되는 것입니다.(나중에 나머지 실행)
따라서 위 코드는 response값이 존재하기 때문에 브라우저 콘솔 창에 출력이 됩니다.
이것이 비동기 처리 방식 입니다. 자바스크립트가 단일 스레드에 단일 콜 스택인데 어떻게 여러 작업이 동시에 실행되도록 보일 수 있는지, 자바스크립트에서 오래 걸리는 작업은 어떻게 처리하는지를 비동기 처리를 통해 알 수 있었습니다.
그림으로 요약해보면 아래와 같습니다.
참고 -> 이벤트 루프와 비동기 프로그래밍의 부상