211117_개발자 준비하기(46일차) - Async, Await / 이벤트 루프

주형(Jureamer)·2022년 1월 6일

배운 것(끄적끄적)

Async - Await

Async / Await은 비동기적인 작업들을 동기적으로 만들어 줄 수 있다.

단, 남발한다면 로직이 동기적으로 처리될 확률이 높기 때문에 조심해서 다뤄야할 필요는 있다.

그리고 Promise는 return 시에 상태값을 알려주는 반면, async-await을 사용하면 그 값을 온전히 다룰 수 있게 된다.

const getDataFromFilePromise = (filePath) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, "utf-8", (err, data) => {
      if (data) {
        resolve(data);
      } else {
        reject(err);
      }
    });
  });
};

const readAllUsersAsyncAwait = () => {
  const user1Text =  getDataFromFilePromise(user1Path);
  console.log(user1Text); //

  const user2Text =  getDataFromFilePromise(user2Path);
  console.log(user2Text);
};
// ------- promise값을 console.log로 찍을 경우------
// Promise { <pending> }
// Promise { <pending> }

const readAllUsersAsyncAwait = async () => {
  const user1Text = await getDataFromFilePromise(user1Path);
  console.log(user1Text);

  const user2Text = await getDataFromFilePromise(user2Path);
  console.log(user2Text);
};

// ------- await을 사용하여 console.log로 찍을 경우(값이 정상적으로 출력)------
// [1, 2, 3, 4, 5]
// [1, 2, 3, 4, 5, 6, 7]

자바스크립트는 non-blocking으로 작동한다.

엄격하게 비동기적이라는 것은 (비동기+ 논블로킹)을 합쳐서 말한다.

반대로 (동기+블로킹)을 합쳐서 동기적이라고 할 수 있다.

자바스크립트는 대부분의 메소드가 동기적으로 작동이 되지만 non-blocking이다.

만약 자바스크립트가 blocking 언어라고 가정하면 우리는 웹사이트에서 밀려오는 API 호출 등을 감당하느라

로그인 자체도도 쉽지 않을 것이다.

Untitled

Event Loop에 대하여

이벤트 루프는 자바스크립트가 어떻게 동작 하는지 이해할 수 있게 해준다.

자바스크립트를 읽어들이면서 Stack에 쌓는다.
이 때, 비동기적인 역할을 하는 메소드 등(DOM, Ajax, setTimeout, Promise 등)은 WEB API로 들어간다.
Stack의 동기적인 작업은 계속 실행되면서, WEB API 안의 작업들은 timer가 돌고 난 뒤 queue에 쌓인다.
Event Loop은 계속 돌면서 Stack이 비어있는 지 여부를 확인하며, stack이 비어있으면 queue의 작업을 하나씩 stack에 보내준다.
이를 반복한다.

Untitled

이는 setTimeout에 0ms값을 넣고도 뒤에 오는 console.log가 먼저 찍히는 경우를 보고

더욱 이해할 수 있었다.

setTimeout(() => {console.log("Hi")}, 0);
console.log("bye")

// bye   ----> console.log("bye") 실행
// undefined (anonymous)
// Hi    ----> setTimeout(() => {console.log("Hi")}, 0);