[TIL] 비동기 프로그래밍

🧐 Thread란?

간단하게 말해서 cpu에 8Core 16Thread라고 적혀 있으면 8개의 코어가 각각 2개의 스레드를 가지고 있어 16개의 스레드를 사용할 수 있다. 즉, 가장 작은 단위의 working unite이고, 동시에 작업 할 수 있는 것이 16개라는 뜻이다. 

 

자바스크립트는 Single Thread다! 

자바스크립트는 어느 한 순간에 동시에 단 하나의 작업만 실행 할 수 있다. 그러면 보기에는 굉장히 비효율적이게 생각 할 수 도 있다. 

이러한 단점을 Async Programing으로 극복할 수 있다.

 

🧐 동기 프로그래밍

function longWork() {
  const now = new Date();

  const millisecond = now.getTime();
  const afterTwoSeconds = millisecond + 2 * 1000;

  while (new Date().getTime() < afterTwoSeconds) {}
  console.log("완료"); // 2
}
console.log("Hello"); // 1
longWork();
console.log("World"); // 3

new Date()를 통해 현재 날짜를 가져 오고, millisecond 변수에 시간을 가져오는 값을 할당해준다. 밀리세컨드로 표현되는 값에 2초를 주기 위해 2 * 1000을 해주고 afterTwoSeconds에 할당해준다.

while이 실행되는 시간이 afterTwoSeconds보다 작은지를 확인하고 false가 되면 afterTwoSeconds가 실행된 2초뒤가 될것이다.

코드를 실행해보면 Hello가 출력됐다가 2초동안 while문이 실행되었다가 World가 출력된다.

 

Thread에서는 Hello라는 콘솔을 실행하고 2초동안 longWork()를 계속 실행하면서 Thread를 계속 막고 있다. 2초가 지난 후에 콜스택에서 사라지고난 다음에 World를 실행한다.  이러한 문제를 해결하기 위해 코드를 비동기적으로 바꿔보자

🧐 비동기 프로그래밍

function longWork() {
  setTimeout(() => {
    console.log("완료"); // 3
  }, 2000);
}
console.log("Hello"); // 1
longWork();
console.log("World"); // 2

setTimeout이라는 비동기 함수를 이용해 콘솔을 찍어보면 Hello World 가 바로 출력 되고 2초 후에 완료가 출력되는것을 볼 수 있다.

이처럼 비동기 프로그래밍을 이용하면 싱글스레드로 자바스크립트를 런타임하더라고 효율적으로 작업할 수 있다.

 

🧐 CallBack Hell

function waitAndRun() {
  setTimeout(() => {
    console.log("1번 콜백 끝");
    setTimeout(() => {
      console.log("2번 콜백 끝");
      setTimeout(() => {
        console.log("3번 콜백 끝");
      }, 2000);
    }, 2000);
  }, 2000);
}
waitAndRun();

콜백함수는 비동기를 위한 방법 중에 하나이다. 

waitAndRung함수안에 setTimeout을 통해 2초후에 1번콜백 끝을 출력하고 또 2초후에 2번, 2초후에 3번을 출력하게 된다. 하지만 이처럼 코드를 작성하면 가동성이 너무 불편하기 때문에 사용을 지양한다.

🧐 Promise

const getPromise = (second) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("완료");
    }, second * 1000);
  });
getPromise(1)
  .then((res) => {
    console.log("---first then---"); // 1
    console.log(res); // 2

    return getPromise(1);
  })
  .then((res) => {
    console.log("---second then---"); // 3
    console.log(res); // 4

    return getPromise(2);
  })
  .then((res) => {
    console.log("---third then---"); // 5
    console.log(res);  // 6
  });

 

getPromise 변수에 new키워드로 Promise를 실행하는데 resolve와 reject라는 2개의 파라미터를 받는다. resolve의 완료가 .then의 res로 들어가게 된다.

이처럼 조금은 복잡해 보여도 가독성 측면에서는 확실히 좋아졌다.

🧐 Async / Await

const getPromise = (seconds) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("완료");
    }, seconds * 1000);
  });

async function runner() {
  const result1 = await getPromise(1);
  console.log(result1);
  const result2 = await getPromise(2);
  console.log(result2);
  const result3 = await getPromise(1);
  console.log(result3);
}
runner();

promise도 콜백함수를 실행하는 것보다는 편하긴 했지만 여전히 불편함이 있다.

async / await를 이용해보자. 

함수 앞에 async를 붙여주고 resolve에서 반환하는 값을 result1이라는 변수에 할당하여 받아준다.

result1은 1초 후에 완료를 출력하고 result2는 2초 후에 완료를 출력하게 된다.