[TIL - 2022.7.27 비동기,동기]

Jeong Ha Seung·2022년 7월 27일

부트캠프 코드스테이츠 프론트엔드

부트캠프

목록 보기

23/51

오늘 배운 내용

동기,비동기

동기 - 말 그대로 앞에서 한 일이 모두 끝나야 다른 일이 실행되는 방식

비동기 - 예를 들어 커피를 주문하는 경우,

만약 동기적으로 일어난다면?
커피 주문 접수 완료 👉 커피 만든 후 손님 호출 👉 손님에게 전달 이지만
비동기적으로 일어나는 경우에는

커피1 주문 👉 커피2 주문 👉 커피 만들기 시작...

사실 이렇게 말로만 설명해놓으면 쉬운 거(?) 같다...코드 짤 때가 문제지...

비동기의 대표적인 예 - setTimeout

console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

setTimeout 같은 비동기 함수를 쓸 경우에 이 함수를 만나게 되면 콜 스택에 잠시 들어갔다가 다음 코드를 실행하고 마치면 그제서야 실행을 한다.

하지만 두번째 인자로 들어가있는 초(second)도 정확하지는 않다. 이전 코드에 상황에 따라 달라질 수도 있는데 스택에서 미처 빠져나오지 못한 함수가 있으면 설정 시간 함수 이후에도 바로 실행될 수가 없기 때문이다.

Callback Hell

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

말 그대로 지옥이다. 코드도 이상해보일 뿐더러 가독성도 심하게 떨어진다...

Promise

위 같은 코드를 정리하고자(?) Promise 객체가 등장했다.

Promise 객체는 resolve 및 reject를 받을 수 있는데, 이 같은 것들을 executor라고 한다.

resolve - 데이터를 성공적으로 받아왔을 경우
reject - 데이터를 받아오지 못하고 오류가 났을 경우

이 두 개의 함수에 인자를 넣어서 then을 호출하여 리턴값으로 활용할 수 있다.


const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("hello");
    }, wait);
  });
};

sleep(1000)
  .then((param) => {
  console.log(param); //hello
  return "world";
})

Promise의 3가지 상태

Pending

new Promise();

빈 Promise 객체를 선언하면 Pending 상태가 된다.

Fulfilled

new Promise(function(resolve, reject) {
  resolve();
});

resolve 상태가 되면 then을 통해 처리 결과 값을 받을 수 있다.

Rejected

new Promise(function(resolve, reject) {
  reject();
});

reject 상태일 경우 catch로 오류를 잡아낼 수 있다.

그리고 finally 키워드가 있는데 이것은 resolve,reject에 상관없이 마지막에 무조건 실행되게 하는 메소드다.

Promise.all() vs Promise.race() vs Promise.any()

function multiply5(number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let result = number * 5;
      console.log(result);
      resolve(result);
    }, 1000);
  });
}
Promise.all([multiply5(5), multiply5(10), multiply5(20)]).then((result) => {
  console.log("result", result);
});

all 사용시에는 Promise 객체들을 배열에 담아 then 메소드로 결과값을 보낸다.

race

function multiply2(number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let result = number * 2;
      resolve(result);
      console.log("result", result);
    }, 1000 * number);
  });
}
Promise.race([multiply2(3), multiply2(2), multiply2(1)]).then((result) => {
  console.log("final result", result);
});

all과 거의 동일하지만 다른점은 가장 먼저 실행된 객체가 출력이 된다.

Promise.any([
  new Promise((res, rej) => setTimeout(() => rej(1), 1000)),
  new Promise((res) => setTimeout(() => res(3), 2000)),
  new Promise((res) => setTimeout(() => res(2), 3000))
]).then(console.log);