3-7. 동기 & 비동기 (순서대로 실행하는 것과 그렇지 않은 것 들)

<자바스크립트의 싱글 스레드 작업 수행 방식>

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

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

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

--> 동기 방식의 처리

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

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

웹사이트에서 버튼 하나하나마다 30초씩 속 터진다.

 

멀티 쓰레드

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

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

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

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

싱글 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하기 위해

여러개의 작업을 동시에 실행시킴

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

--> 비동기 작업

 

Practice

동기방식

동기 방식

비동기방식 - 2초 후에 A작업끝이 출력 됨

비동기 방식 - 먼저해야하는것을 기다리지 않고, 바로 실행시켜버리는 것

비동기 처리의 결과값을 전달하려면, 콜백방식을 사용해서 전달하면 된다.

콜백함수를 사용해서 코드를 넘겨서 출력할 수 있다.

 

JS의 엔진이 구동하는 방법

Call Stack - 가장 마지막에 들어온 것이 가장 먼저 제거 됨

<동기방식>

js코드의 실행이 실행되면, 가장 최상인 Main Conext가 먼저 들어온다.

> Main Conext

    - Call Stack에 들어오는 순간 (프로그램 실행의 순간)

    - Call Stack에서 나가는 순간 (프로그램 종료의 순간)

> 먼저 실행 되는곳, console.log(three());

> 그래서 three라는 함수가 call stack에 추가되게 된다.(결과값을 받아 console에 찍어낼 수 있기 때문)

> two함수 호출하여 실행시키기

> one실행 종료 > 제거됨

> two()실행 종료 > 제거 됨

> three()실행 종료 > 제거 됨

> 반환값은 3을 출력하고, 3까지 제거

> 프로그램 종료(so main context를 제거)

 

Thread - 코드를 직접 실행, Call Stack하나만을 담당(작동방식에 따라 실행)

JS는 Call Stack이 하나밖에 없기때문에 JS는 single thread로 작동한다고 하는 것임

 

<비동기방식>

JS는 비동기화를 위해 Web APIs로 setTimeout()을 넘긴다.(여기서 3초 기다림)

그래서 Call Stack에 계속 머무르지 않기 때문에 asyncAdd()를 끝낼 수 있고,

Call back Queue로 cb()함수가 옮겨지게 된다.

이렇게 하고 Call Stack으로 옮겨가게 된다.

Event Loop가 Call Stack에 다른 함수가 남아있는지 살피고, 없음을 알고 cb()를 넘겨주고 실행시킨다.

그렇게 모두 수행하고 Call Stack에서 제거된다.

마지막으로 Main Context까지 제거되고, 비동기 작업을 포함한 자바스크립트엔진이 마무리 됨

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(4, 5, (a_res) => {
  console.log("A RESULT : ", a_res);
  taskB(a_res, (b_res) => {
    console.log("B RESULT : ", b_res);
    taskC(b_res, (c_res) => {
      console.log("C RESULT : ", c_res);
    });
  });
});

console.log("코드 끝");

콜백 지옥

이를 해결하기 위해서는 Promise가 있다.