[코드스테이츠 과제] 비동기 - 타이머 API

코드스테이츠 과제 코드를 공부 목적으로 변형 해서 정리 하였습니다.

---

🍀목적

---

• callback, Promise, async/await 구현 방법을 이해한다.
• Promise 실행 함수가 가지고 있는 두 개의 매개변수 resolve 와 reject를 활용할 수 있다.
• new Promise()를 통해 생성한 Promise 인스턴스가 사용할 수 있는 메서드의 용도를 이해한다.
• Promise의 세 가지 상태는 각각 무엇인지 설명할 수 있다.
• async/await 키워드와 함께 실행되는 함수는 어떤 타입이어야 하는지 이해한다.
• await 키워드를 사용할 경우 어떤 값이 리턴되는지 설명할 수 있다.

🍀질문

---

✅Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve 와 reject 는 각각 무엇을 의미하나요?

 

promise는 세가지 상태를 갖는다.

• 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

const sleep = (pram) => {
  return new Promise((resolve,reject) => {
  });
}

다음코드에서 sleep()을 실행하면 다음 결과가 나온다.

sleep 인자에 아무것도 들어가지 않았으며, resolve,reject에 아무 결과를 출력 하지 않기때문에 pending 대기 상태이다.

또한 promiseResult도 undefined로 아무것도 정의 되어 있지 않다.

const sleep = (pram) => {
  return new Promise((resolve,reject) => {
    if(pram>0){
        resolve("hello");
    }else{
        reject("ERR");
    }
  });
}

다음 코드에 sleep에 5와 아무것도 주지 않은 경우를 비교해보자.

 

5를 넣은 경우는 다음과 같다.

조건절에서 true가 나와 resolve("hello")가 실행 된다.

fulfilled이행상채로 출력은 hello가 된다.

 

넣지 않은 경우는 다음과 같다.

조건절에서 true가 나와 reject("ERR")가 실행 된다.

rejected 거부상태로 출력은 ERR가 된다.

 

resolve은 정상적으로 이행 상태가 되었을 경우 싱행되는 함수이고,

reject는 거부상태가 되었을 경우 실행되는 함수인것 같다.

 

명칭보다는 Promise 인자의 자리가 중요하다 한다.

---

✅resolve, reject함수에는 전달인자를 넘길 수 있습니다. 이때 넘기는 전달인자는 어떻게 사용할 수 있나요?

 

const sleep = (pram) => {
  return new Promise((resolve,reject) => {
  });
}

 다음코드가 있다.

 

sleep().then()을 실행하면 sleep함수가 그대로 나타난다.

const sleep = (pram) => {
  return new Promise((resolve,reject) => {
    if(pram>0){
        resolve("hello");
    }else{
        reject("ERR");
    }
  });
}

코드를 다음과 같이 수정하였다.

sleep().then(pram=>console.log(pram)).catch(pram=>console.log(pram))

다음에서 sleep의 매게 변수만 변경해보았다.

 

i) 아무값도 없는 경우 reject실행

catch에서 sleep의 reject에서 보낸 ERR를 받고 출력한다.

 

ii) 5를 넣은 경우 resolve싱행

then에서 sleep의 resolve에서 보낸 hello를 받고 출력한다.

---

✅new Promise()를 통해 생성한 Promise 인스턴스에는 어떤 메서드가 존재하나요? 각각은 어떤 용도인가요?

 

Promise.all()

const user1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'user1');
});
const user2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 5000, 'user2');
});
const user3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'user3');
});
console.time("promiseAll")
Promise.all([user1, user2, user3]).then((values) => {
  console.log(values);
    console.timeEnd("promiseAll")
});

다음 코드는 setTimeOut으로 서로 다른 시간이 지난후 String을 출력하는 3개의 Promise가 있다.

이들을 배열로 Promise.all에 담았다.

실행 결과는 어떻게 될까?

 

promiseAll로 확인했을때 5초 이후에 실행이 끝난다는것을 알수 있다.

3개의 promise 중 user2가 5초 에 끝나는걸 봐서 promiseAll은 배열 promise요소중 가장 마지막 promise가 끝난 이후 실행이 된다는 것을 알수 있다.

또한 Promise들을 합칠수 있다는 장점이 있다.

 

Promise.race()

const user1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'user1');
});
const user2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 5000, 'user2');
});
const user3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'user3');
});
console.time("promiseRace")
Promise.race([user1, user2, user3]).then((values) => {
    console.log(values);
    console.timeEnd("promiseRace")
});

위에 코드와  동일핱 코드인데, Promise.all만 Promise.race로 바꿨다

실행결과는 다음과 같다.

 

모든 promise 를 보여주던 all과 달리 가장 먼저 실행이 종료된 user3만 보여주고 있다.

 

 

Promise.finally()

java의 try-catch-finally와 같은 방식을 하는 finally가 있다.

성공적으로 실행되는 then

오류로 실행되는 catch

두 상황 상관없이 무조건 실행되는 finally

---

✅await 키워드를 사용할 경우, 어떤 값이 리턴되나요?

 

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("hello");
    }, wait);
  });
};
let returnValue = await sleep(1000);
console.log(returnValue)

await로 promise를 실행하면 promiseResult에 저장되는 값이 저장된다.

그래서 returnValue가 실행되면 sleep의 promiseResult에 resolve로 저장된 hello가 저장된다.

 

 

🦦잡담

---

사실 이 날은 이게 메인이 아닌데 여기에 시간을 많이 투자했다 헤헤

정리하고 보니 생각보다 어려운 내용이었다!!

아고라 스테이츠에 then에 bind를 사용한 이유에 대해 질문을 했는데 답변이 너무 완벽해서 한번에 이해를 해버렸다! 감사합니다

오늘 다들 많이 힘들었나 보다

오픈톡방에 부정적인 말들이 많이 나와서 조금 슬펐다.

다같이 으쌰으쌰했으면 좋겠다.

다같이 남은시간 잘 견뎌요~

🐾참고

---

https://github.com/codestates-seb/agora-states-fe/discussions/368

 

https://velog.io/@rdd9223/JavaScript%EC%9D%98-%ED%8A%B9%EB%B3%84%ED%95%9C-Promise-%EB%A9%94%EC%86%8C%EB%93%9C%EB%93%A4

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise