동기 & 비동기

DOYOUNG·2023년 7월 6일

javascript

목록 보기

15/17

자바스크립트 동기와 비동기

1. 동기 방식의 처리

function taskA() {
  console.log("TASK A");
}

function taskB() {
  console.log("TASK B");
}

function taskC() {
  console.log("TASK C");
}

taskA();
taskB();
taskC();

자바스크립트는 코드가 작성된 순서대로 작업을 처리한다. 이전 작업이 진행중일때는 다음 작업을 수행하지 않고 기다린다.
먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행하는 방식을 동기 방식의 처리라고 한다.
또한, 자바스크립트는 싱글 스레드 작업 수행 방식으로 처리되는데, 하나의 작업이 수행되고 있을 때 다른 작업을 동시에 수행할 수 없는 것을
블로킹 방식이라고 한다.

📌 동기적 처리의 단점

동기적 처리의 단점은 하나의 작업이 너무 오래 걸리게 될 시, 모든 작업이 오래걸리는 하나의 작업이 종료되기 전까지 올스탑 되기 때문에
전반적인 흐름이 느려진다는 점이다. 멀티 스레드 방식을 작동시키면 되지만 자바스크립트는 싱글 스레드 방식으로 작동하기 때문에 불가능하다.

2. 비동기 방식의 처리

싱글 스레드 방식을 이용하면서, 동기적 처리 작업의 단점을 극복하기 위하여 여러개의 작업을 동시에 실행시키는 것을 비동기 방식의 처리라고 한다. 이것은 즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행하는 것이다.
하나의 작업이 스레드를 점유하지 않고 다른 작업을 하지 못하도록 블로킹하지 않는 방식을 논블로킹 방식 이라고 한다.

📌 콜백함수를 이용한 비동기 방식의 처리 01

function taskA() {
  setTimeout(() => {
    console.log("A TASK END");
  }, 2000);
}

taskA();
console.log("코드 끝");

위 코드를 출력해보면 아래에 있는 "코드 끝"이 먼저 실행된 후에 "A TASK END"가 실행된다.
지시한 순서와 달리 위의 taskA()를 기다리지 않고 다음 작업을 바로 수행하는 것을 비동기 방식이라고 한다.

📌 콜백함수를 이용한 비동기 방식의 처리 02

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000);
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000);
}

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskA(3, 4, (res) => {
  console.log("A TASK RESULT : ", res);
});

taskB(7, (res) => {
  console.log("B TASK RESULT : ", res);
});

taskB(14, (res) => {
  console.log("C TASK RESULT : ", res);
});

console.log("코드 끝");

위의 코드에는 세가지의 비동기 처리를 수행하는 함수 taskA, taskB, taskC 가 있다. 동기 방식으로 처리되었다면 taskA - taskB - taskC 순서대로 출력되어야 하지만, 위의 함수들은 각각 콜백함수를 전달하여 비동기 처리의 결과값이 setTimeout의 시간 순서대로 출력된다.