비동기 처리

자바스크립트를 사용하는 회사로 이직을 하게 되면서 그 전부터 정리가 안되있던 개념 중 한 가지인 비동기 처리에 대한 부분을 정리하려고 한다.

 

동기 처리부터 알아보자.

'비'동기 처리니까 동기 처리에 대한 부분도 있을 것이다. 이것부터 코드로 먼저 알아보자.

 

function sync() {
    console.log("처리를 시작한다.");
    
    let startTime = new Date().getTime();
    while (new Date().getTime() < startTime + 1000);
    console.log("처리를 완료한다.");
}

console.log("시작");
sync();
console.log("종료");

위의 코드를 실행시켰을 경우에 찍히는 로그는 시작 -> 처리를 시작한다 -> 처리를 완료한다 -> 종료가 된다.

 

비동기 처리

function async(callback) {
    setTimeout(function() {
        console.log("처리 완료한다.");
        callback();
    }, 1000);
    console.log("처리를 시작한다.");
}

console.log("시작");
async(function() {
    console.log("종료");
})

해당 코드의 로그는 시작 -> 처리를 시작한다 -> 처리를 완료한다 -> 종료가 된다. 이걸 이해하기 위해 하나씩 분석해보자.

 

function async(callback) {
    setTimeout(function() {
        console.log("처리 완료한다.");
        callback();
    }, 1000);
    console.log("처리를 시작한다.");
}

console.log("시작"); // 가장 먼저 얘가 시작된다.
async(function() {
    console.log("종료");
})

이건 뭐 당연한 이야기라 주석의 내용만 보고 넘어가겠다.

 

function async(callback) {
    setTimeout(function() {
        console.log("처리 완료한다.");
        callback();
    }, 1000);
    console.log("처리를 시작한다.");
}

console.log("시작");
async(function() {
    console.log("종료"); // async라고 하는 함수에 인자로 function() { ... }의 내용이 들어간다.
})

async 함수에 인자로 console.log("종료")가 있는 함수를 콜백으로 전달한다.

 

function async(callback) {
    setTimeout(function() {
        console.log("처리 완료한다.");
        callback();
    }, 1000); // setTimeout 함수로 인해 1초 뒤에 콜백함수가 실행된다.
    console.log("처리를 시작한다.");
}

console.log("시작");
async(function() {
    console.log("종료"); 
})

setTimeout 함수로 인해 console.log("종료")가 있는 함수는 1초 뒤에 실행될 것이다. 

 

function async(callback) {
    setTimeout(function() {
        console.log("처리 완료한다.");
        callback();
    }, 1000); 
    console.log("처리를 시작한다."); // setTimeout 함수가 완료되기 전에 해당 부분을 출력한다.
}

console.log("시작");
async(function() {
    console.log("종료"); 
})

그렇기에 처리를 시작한다 출력되고 1초 뒤에 처리를 완료한다가 먼저 출력되면서 콜백으로 받았던 함수인 종료를 출력하게 되는 것이다.

 

콜백함수가 뭔데?

콜백함수의 개념은 다른 함수의 인자로 전달되어 나중에 호출되는 함수이다. 좀 더 직관적이기 위해 위의 코드를 변경해보겠다.

 

function async(callback) {
    setTimeout(function() {
        console.log("처리 완료한다.");
        callback();
    }, 1000); 
    console.log("처리를 시작한다.");
}

function endPoint() {
    console.log("종료");
}

console.log("시작");
async(endPoint);

async 함수 인자에 endPoint 함수를 콜백으로 전달했고 이는 먼저 실행하는 것이 아닌 async 함수가 처리가 완료된 후에 콜백 함수를 호출하게 되는 것이다. 즉, async 함수 내의 setTimeout과 처리를 시작한다라고 출력하는 부분이 완료되고 콜백 함수를 호출한다.

 

비동기 처리 방법

찾아본 바로는 위에서 사용한 setTimeout이나 promise, async/await이 있다고 하는데 천천히 더 알아가볼 예정이다. promise나 async/await은 콜백에 콜백을 추가하는 콜백 지옥에서 탈출하려는 방법이라고 하는데 학습이 필요할 것 같다.