JS : 비동기 처리 & 콜백 공부 I

동기/비동기

자바스크립트는 한 번에 한 이벤트만 처리할 수 있는 single-threaded 언어로, 기본적으로 위에서 아래로 코드가 실행됩니다. 이를 동기적 (Synchronous) 이라고 하는데, 해당 방식에서는 먼저 선언된 코드가 실행되기 전에는 이후에 선언된 코드가 실행되지 않고 기다립니다. 이 때문에 많은 양의 데이터를 서버 쪽에서 불러오는 경우에 문제가 발생할 수 있습니다.

 

// 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가 api에서 데이터를 받아오기 전에 console.log가 수행되므로, response가 undefined로 출력되게 됩니다. ajax 함수가 실행되는 그 시점에는 response 변수에 할당될 반환값이 아직 없기 때문입니다.

이를 해결하기 위해, 비동기 (Asynchronous) 처리 방식이 고안되었습니다. 비동기 방식은 특정 코드가 실행이 끝날 때까지 기다리지 않고, 나머지 코드를 먼저 실행하는 것을 뜻합니다.

 

일반적인 웹사이트를 처음 들어갔을 때를 생각하면 이해가 쉬울 것 같습니다. 비동기 처리가 아닌 동기 처리로 웹페이지를 로딩할 경우, 이미지 요소를 불러오고, 아이콘 요소를 불러오고, 카테고리를 불러오고.. 웹 사이트를 로딩하는 것에 많은 시간이 소요될 것입니다.

 

비동기 처리 방법

자바스크립트에서 비동기 처리 방식을 구현하는 것은 많은 방법이 있습니다. 1) 콜백 함수를 통한 해결, 2) Promise 를 통한 해결, 3) ES8에 새로 도입된 Async/await을 통한 해결이 있는데, 순서대로 알아보겠습니다.

 

콜백 함수

콜백 (Call back)은, 말그대로 특정 함수를 실행하면서, 해당 함수가 완료되었을 경우에 콜백 함수를 실행하라고 선언하는 것을 뜻합니다.

function getData(callbackFunc) {
	$.get('https://domain.com/categories/1', function(response) {
    	callbackFunc(response);
    }
}

getData(function(data){
	console.log(data);
});

위 코드를 살펴보면, getData 함수의 인자로 콜백 함수를 전달했고, api를 받아오는 함수가 실행 후 response 결과값을 받아올 시, callbackFunc를 실행하는 순서로 진행됩니다. 

 

콜백 방식의 단점

함수에 이어지는 콜백 함수가 많지 않다면 문제가 되지 않겠지만, 웹서비스를 구축할 때 사용자 로그인 (유저 데이터 받아오기 -> 사용자 인증 -> 화면에 유저 정보 표기)과 같이 복잡한 비즈니스 로직을 구현해야할 경우가 있습니다. 이 때 콜백 내부에 다른 콜백, 그 콜백 내에 또다른 콜백을 선언할 경우, 가독성이 떨어지며 추후 로직을 변경하기도 어렵습니다. 이러한 현상을 콜백 지옥이라고 합니다.

 

Promise와 Async

각각의 함수를 분리시켜서 콜백 지옥을 해결할 수도 있겠지만, Promise와 Async/await 방식을 사용하면 더욱 간편하게 비동기 처리 방식을 구현할 수 있습니다.