비동기 처리

woodstock·2023년 12월 10일

JavaScript

웹 프론트엔드를 위한 자바스크립트 첫 걸음

목록 보기

4/22

동기와 비동기

동기란?

하나의 작업이 실행되는 동안은 다른 작업을 동시에 진행하지 않는 방식으로, 다시말해 앞의 작업이 종료된 이후 다음 작업을 진행할 수 있는 순차적인 방식을 말한다.

스레드와 멀티스레드

아래와 같이 workA, workB, workC 3가지 함수가 실행 후 종료되기 까지 걸리는 시간이 각각 5초, 3초, 10초 라고 가정해보자.

const workA = ()=>{ //5초
    console.log("workA");
}
const workB = ()=>{ //3초
    console.log("workB");
}
const workC = ()=>{ //10초
    console.log("workC");
}

workA();
workB();
workC();

스레드

프로그램에서 이러한 작업들을 처리하는 주체를 스레드라고 부른다.
위 코드의 작업들을 동기적으로 처리한다면, 스레드는
1. workA를 5초동안 처리하고
2. workB를 3초동안 처리한 다음
3. 앞의 두 작업을 모두 처리한 후 workC를 10초동안 처리하게 된다.

따라서, 동기적으로 해당 작업을 처리하게 되면 순서대로 모든 작업들을 하나씩 처리하기 때문에 처리 될 때까지의 시간은 총 18초가 된다.

이렇게 하나의 스레드에서 여러 작업을 동시에 처리하지 못하고, 하나의 작업이 종료된 이후에 다른 작업을 처리할 수 있는 방식을 블로킹 방식이라고 한다.

기본적으로 자바스크립트는 작업을 동기적으로 처리하지만, 실제로 자바스크립트의 모든 작업들을 동기적으로 처리하게 된다면 작업시간이 매우 길어지기 때문에 성능상의 문제가 생기게 된다.

멀티 스레드

여러 개의 스레드에서 작업을 동시에 수행하게 하는 방식을 말한다.

하지만 자바스크립트는 싱글 스레드 방식으로, 하나의 스레드만으로 동작하기 때문에 멀티 스레드 방식으로는 작동할 수 없다.

그렇다면, 우리는 이 문제를 어떻게 해결해야 할까?
바로, 비동기처리로 작업을 수행하면 된다.

비동기란?

비동기 처리는 어떠한 작업이 종료되길 기다리지 않고, 그 다음 작업도 동시에 진행하는 방식을 말한다.
즉, 여러 작업들을 동시에 진행하는 방식이다.

const workA = ()=>{ //5초
    console.log("workA");
}
const workB = ()=>{ //3초
    console.log("workB");
}
const workC = ()=>{ //10초
    console.log("workC");
}

workA();
workB();
workC();