자바스크립트 비동기 처리

자바스크립트에서 비동기 처리는 여러 작업을 효율적으로 처리하기 위한 핵심 개념이다.

동기와 비동기의 차이를 이해하고, 자바스크립트가 싱글 스레드 환경에서 어떻게 비동기 작업을 처리하는지 알아보자.

동기와 비동기

동기란?

동기(Synchronous) 처리는 작업을 순차적으로 하나씩 처리하는 방식이다. 이전 작업이 완료되어야만 다음 작업을 시작할 수 있다.

 

스레드와 멀티 스레드

작업 처리 방식을 이해하기 위해 먼저 스레드 개념을 알아보자.

아래와 같이 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();

스레드

스레드(Thread) 는 프로그램에서 작업을 실행하는 주체다. 하나의 스레드는 한 번에 하나의 작업만 처리할 수 있다.
위 코드의 작업들을 동기적으로 처리한다면, 스레드는

1. workA를 5초동안 처리하고
2. workB를 3초동안 처리한 다음
3. 앞의 두 작업을 모두 처리한 후 workC를 10초동안 처리하게 된다.

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

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

블로킹 방식의 문제점
작업 시간이 길어질수록 전체 처리 시간이 급격히 증가한다.

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

멀티 스레드

멀티 스레드(Multi-thread) 는 여러 개의 스레드를 사용해 작업을 동시에 수행하는 방식이다.

자바스크립트의 한계
자바스크립트는 싱글 스레드(Single-thread) 언어로, 하나의 스레드만 사용한다.
따라서 멀티 스레드 방식으로는 작동할 수 없다.

그렇다면 우리는 이 문제를 어떻게 해결해야 할까?

바로, 비동기 처리로 작업을 수행하면 된다.

 

비동기란?

비동기(Asynchronous) 처리는 작업이 완료되길 기다리지 않고, 다음 작업을 동시에 진행하는 방식이다.

싱글 스레드인 자바스크립트가 여러 작업을 동시에 처리할 수 있는 비결이 바로 비동기 처리다.

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

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

앞서 예시로 들었던 workA, workB, workC를 비동기적으로 처리한다면, 하나의 스레드에서 세 개의 작업을 동시에 처리할 수 있기 때문에 작업처리시간이 10초로 줄어들게 된다.

 

이처럼 하나의 스레드에서 여러개의 작업을 동시에 처리하는 방식을 논 블로킹(Non-blocking) 방식이라고 한다.

논 블로킹 방식의 장점
대기 시간이 긴 작업이 있어도 다른 작업을 동시에 진행할 수 있어 전체 처리 시간이 단축된다.

 

자바스크립트의 비동기 처리

자바스크립트에서 비동기 작업은 주로 setTimeout, Promise, async/await 등을 통해 처리된다.

예제 1: setTimeout으로 비동기 처리하기

setTimeout(() => {
  console.log('3초만 기다려세요');
}, 3000);

const work = (callback) => {
  setTimeout(() => {
    console.log('3초만 기다려요2');
    callback();
  }, 3000);
}

work(() => {
  console.log('종료');
});

setTimeout은 지정된 시간 후에 콜백 함수를 실행한다. 이때 메인 스레드는 대기하지 않고 다음 코드를 계속 실행한다.

 

 

예제 2: 여러 비동기 작업 동시 실행

const workA = () => {
  setTimeout(() => {
    console.log('workA');
  }, 5000)
};

const workB = () => {
  setTimeout(() => {
    console.log('workB');
  }, 3000)
}

const workC = () => {
  setTimeout(() => {
    console.log('workC');
  }, 10000)
}

const workD = () => {
  console.log('workD');
}

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

실행 순서

1. 즉시 실행: workD -> 'workD' 출력
2. 3초 후: workB → 'workB' 출력
3. 5초 후: workA → 'workA' 출력
4. 10초 후: workC → 'workC' 출력