JavaScript 비동기 처리와 콜백 함수

자바스크립트 엔진은 싱글 스레드 (Single Thread) 입니다. 그래서 동시에 두 가지 작업을 할 수 없습니다.

그렇기 때문에 여러 작업이 동시에 요청이 될 때 이 전 작업이 마무리 될 때까지 기다려야 하는 상황이 발생합니다.

그래서 자바스크립트 엔진은 비동기 처리가 가능하도록 설계되어있습니다.

 

 

 

비동기 (Asynchronous)란?

 

자바스크립트의 비동기 처리란 특정 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다.

 

비동기 처리를 검색하다 보면 이벤트 루프, 콜스택 콜백 큐 등등 가상으로 내 머릿 속에 그려서 이 비동기 처리 작업을 연상해야 하는데 눈으로 직접 보이지 않다보니 이해가 어렵습니다.

 

이 비동기 처리를 눈으로 쉽게 확인할 수 있는 사이트는 여기를 클릭하시면 조금이나마 도움이 되실거라고 생각합니다.

저 또한 이 사이트를 통해서 비동기 처리를 이해할 수 있게 되었으니까요!!

 

 

비동기 처리의 예제

아래의 예제는 setTimeout()을 사용하여 비동기 처리를 확인하는 예제입니다.

console.log("first");

setTimeout(function(){
  console.log("async");
}, 1000);

console.log("second");

 

setTimeout()메서드는 요청한 즉시 결과를 얻는 것이 아니기 때문에 비동기적 처리의 대표적인 예입니다.

비동기 처리에 대한 이해가 없는 상태에서 위 코드를 보면 아마 다음과 같은 결과 값이 나올 거라고 생각할 겁니다.

 

• "first" 출력
• 1초 후에 "async" 출력
• "second" 출력

하지만 비동기 처리에 대한 이해를 가지고 보면 결과 값은 다음과 같다는 것을 알 수 있습니다.

• "first" 출력
• "second" 출력
• 1초 후에 "async" 출력

setTimeout() 메서드는 비동기 방식으로 실행되기 때문에 1초를 기다렸다가 다음 코드를 수행하는 것이 아니라 일단 setTimeout()을 실행하고 나서 다음 코드인 console.log("second")로 넘어가 출력한 후에 1초가 지나면 "async"를 출력합니다.

 

 

 

 

정리하기

 

비동기 처리를 이해하기 위해 일상생활에서 예를 들어 보자면 카페에서 커피를 주문할 때, 앞사람이 주문을 하고 주문한 커피를 만들어 제공한 후, 그제서야 다음 사람의 주문을 받는다면 동기적 처리입니다. 

이렇게 동기적 처리가 된다면 다음 사람은 주문도 하지 못한 채로 먼저 온 사람의 커피가 나오기 전까지 계속해서 기다려야만 하는 문제가 생깁니다. 

하지만 비동기적 처리로 이루어 진다면 모든 사람의 주문을 한꺼번에 받고 커피가 완성되는 대로 사람들에게 커피를 제공한다면 비동기적 처리가 될 것이고, 다음 사람이 주문도 못하고 기다리게 되는 문제가 해결될 것입니다.

 

하지만 비동기 처리에는 콜백 지옥이라는 문제가 발생합니다.

예를 들어 서버에서 데이터를 받아와 화면에 표시하기까지 인코딩, 사용자 인증 등등을 처리해야 하는 경우가 있는데 이 모든 과정을 비동기로 처리해야 한다고 하면 콜백 안에 콜백을 계속해서 무는 형식으로 코딩을 하게 됩니다.

이러한 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어려워질 것입니다.

 

이러한 문제를 해결하는 방법 중 하나인 Promise나 Async/Await을 이용하면 콜백 지옥을 해결할 수도 있고 좀 더 편하게 구현할 수 있게 됩니다.

 

 

 

바로가기: 자바스크립트 비동기 처리를 위한 Promise