인프런 커뮤니티 질문&답변

안녕하세요! 돌로스원숭숭님!

관련하여 원인을 깊이있게 이해하실 수 있도록 섹션23 심화편에서 매크로큐와 마이크로큐라는 주제로 다루게 됩니다!^^

따라서, 깊이있는 내용은 해당 강의를 수강해 주시고, 답변으로는 현재 기초수준에서 간단한 답변만 드려보도록 할게요!

약 3단계정도에 걸쳐 필요사항을 안내드릴게요!^^

1. 아래의 코드에서 resolve는 성공했을 때 성공을 알려주기 위해 필요한 녀석, reject는 실패했을때 실패를 알려주기 위해 필요한 녀석이에요!
   이 둘 중 하나가 실행되어야지 아래의 코드가 끝이 났다고 컴퓨터는 판단하게 됩니다!

 // 안끝남
new Promise((resolve, reject) => {

})

 // 끝남
new Promise((resolve, reject) => {
    resolve()
})

2. 다음으로, .then은 성공했을 때 실행될 녀석, .catch는 실패했을 때 실행될 녀석이에요!

// 성공하면 실행되는 녀석
new Promise(() => {

}).then(() => {
    console.log("나는 성공하면 실행된다")
})

// 실패하면 실행되는 녀석
new Promise(() => {

}).catch(() => {
    console.log("나는 실패하면 실행된다")
})

하지만, 이렇게 .then이 실행되게끔 하기 위해서는 성공을 먼저 알려주셔야겠죠?!
따라서, resolve()로 알려주실 필요가 있어요!

new Promise((resolve, reject) => {
    resolve() // 1. 나 성공했어
}).then(() => {
    console.log("나는 성공하면 실행된다") // 2. 오키 실행할게
})

3. 마지막으로, 함수 안에 함수를 집어넣을 때, 간출인 표현을 사용할 수 있어요!
   둘 다 많이 사용되는 패턴으로 꼭 학습해 두세요!

 // 간출인 표현
setTimeout(resolve, 3000);

// 제대로 풀어쓴 표현
setTimeout(() => { 
   resolve() 
}, 3000)

최종적으로 정리하면 아래와 같습니다!^^

// 첫번째 방식
async function aaa() {   
    console.log(1); // 1. '1'이 출력됩니다.
    console.log(2); // 2. '2'이 출력됩니다.

    // await 가 붙어 있으므로, 이것(new Promise 전체가 한 줄임)이 끝나야만,
    // 다음 줄인 console.log(3)이 실행됩니다.
    await new Promise((resolve, reject) => { 

        setTimeout(() => { 
           resolve() // 3. '나 성공했어!' 알려줍니다.
        }, 3000)
 
    }).then(() => {
        console.log("히히히"); // 4. 그럼 실행한다! => '히히히'가 출력됩니다.
    });   


    console.log(3);  // 5. 다 끝났으므로 '3'이 출력됩니다.
}  

aaa();



// 두번째 방식
async function aaa() {
  console.log(1); // 1. '1'이 출력됩니다.
  console.log(2); // 2. '2'이 출력됩니다.

  // await 가 붙어 있으므로, 이것(new Promise() 전체가 한 줄임)이 끝나야만,
  // 다음 줄인 console.log(3)이 실행됩니다.
  await new Promise((resolve, reject) => {

    setTimeout(() => {}, 3000); // 3. 성공과 실패를 기다립니다.

  }).then(() => {
    console.log("히히히"); // 4. 성공 알림을 받아야 실행되는데 계속 기다립니다.
  });


  console.log(3); // 5. await가 붙은 윗줄이 끝나야 내가 실행되는데 기다립니다.
}

aaa();