동기 & 비동기

동기 방식

자바스크립트는 코드가 작성된 순서대로 작업을 처리함

이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다림

먼저 작성돈 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다.

-> 동기 방식의 처리

 

동기적 처리 방식의 문제점

동기적 처리의 단점은 하나의 작업이 너무 오래 걸리게 될 시,

모든 작업이 오래 걸리는 하나의 작업이 종료되기 전까지 모두 멈추기 때문에, 전반적인 흐름이 느려진다.

 

웹사이트에서 버튼 하나하나마다 30초씩 걸리게 된다.

-> 동기 처리 방식의 문제점

 

멀티 쓰레드

코드를 실행하는 일꾼 Thread를 여러 개 사용하는 방식인 'MultiThread' 방식으로 작동시키면 이런 식으로 분할 작업 가능

오래 걸리는 일이 있어도 다른 일꾼 Thread에게 지시하면 되므로 괜찮음

 

그러나 자바스크립트는 싱글 쓰레드로 동작함

즉 이런 방식으로 일꾼을 여러 개 사용하는 방법 사용이 불가함

 

이런 걸 보완하기 위해 비동기 작업이 나왔다.

비동기 작업

싱글 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하기 위해 여러 개의 작업을 동시에 실행시킴

즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행함

-> 비동기 작업

 

작업이 어떻게 끝났는지 확인 하려면 아래와 같이 확인이 가능

콜백함수를 붙이면 된다. 결과 값이나 끝난 후 확인 가능

비동기 처리

setTimout() 함수는 대표적인 비동기처리 함수이다.

function taskAa() {
  setTimeout(() => {
    console.log('A Task End')
  }, 2000);
}

taskAa();
console.log('코드 끝')
// 코드 끝 __console_feed_remaining__0 
// A Task End __console_feed_remaining__0

위와 같이 코드 끝부터 실행이 된다.

 

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

taskAa(3, 4,(res) => {
  console.log("A TASK RESULT : ", res);
}); // A TASK RESULT :  7 __console_feed_remaining__0 
console.log('코드 끝');
// 코드 끝 __console_feed_remaining__0

코드 끝 실행이 되고, 3초 뒤에 res가 실행이 된다.

 

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

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

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

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

console.log('코드 끝');
// 코드 끝 __console_feed_remaining__0

위 코드에서는 코드 끝 실행 후 task B 그리고 task A 순서대로 실행이 된다.

 

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

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

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

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

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

taskC(14 ,(res) => {
  console.log("C TASK RESULT : ", res);
}); // C TASK RESULT :  -14__console_feed_remaining__0 

console.log('코드 끝');
// 코드 끝 __console_feed_remaining__0

코드 끝 > b > a > c 순서 실행

 

자바스크립트 엔진은 어떻게 구분해서 실행하는지 

Heap : 변수나 상수들의 사용하는 메모리들을 저장하는 곳

Call Stack : 우리가 작성한 코드에 따라 호출 스택을 쌓는 곳

 

실행순서

위와 같은 순서대로 실행이 되면서

종료되는 것은 위에서부터 차례대로 종료가 된다

one() -> two() -> three() -> Main Context 이러한 순서로 종료가 된다.

 

asyncAdd() 실행을 마쳐서 콜스택에서 없어짐 -> 3초 기다린 후 setTimeout 실행 ->  Callback Queue로 이동 (cd()) -> 그리고 사라짐 -> 그리고 MainContext로 하고 없어짐

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

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

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

taskA(4, 5, (a_res) => {
  console.log("A Result : ", a_res); // A Result :  9__console_feed_remaining__0 
  taskB(a_res,(b_res) => {
    console.log("B Result : ", b_res); // B Result :  18__console_feed_remaining__0 
    taskC(b_res, (c_res) => {
      console.log("C Result : ", c_res); // C Result :  -18__console_feed_remaining__0 
    });
  });
});

console.log('코드 끝');
// 코드 끝 __console_feed_remaining__0

코드 끝 -> a -> b -> c 순서로 실행

 

위와 코드는 흔히 콜백지옥이라고 한다. Callback Hell

이를 보완하기 위해 Promise 가 나옴