𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 𝗔𝗻𝗱 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱

온라인으로 피자를 주문하는 상황을 생각해 보세요.

주문을 합니다. 피자가 올 때까지 문 앞에 서서 아무것도 안 하고 기다리지는 않죠. 영상을 보거나, 일을 하거나, 친구와 대화를 나눕니다. 피자가 도착하면 그때 먹습니다.

JavaScript도 똑같은 방식으로 작동합니다.

API 요청, 데이터베이스 호출, 타이머와 같은 작업들은 시간이 걸립니다. 만약 JavaScript가 각 작업이 끝날 때까지 기다린다면, 앱은 멈춰버릴 것입니다. 대신, JavaScript는 결과를 기다리는 동안 다른 코드를 실행합니다.

What is a Promise?

Promise는 미래에 받게 될 값을 위한 자리 표시자(placeholder)입니다.

다음과 같이 실행할 때: const promise = fetch("/users");

데이터가 아직 도착하지 않았습니다. Promise는 이렇게 말합니다: "지금은 결과가 없지만, 준비되면 알려줄게요."

Promise에는 세 가지 상태가 있습니다:

fetch()와 같은 대부분의 현대적인 API는 자동으로 Promise를 반환합니다. 매번 수동으로 만들 필요 없이 그냥 사용하면 됩니다.

What does .then() do?

많은 사람들이 .then()이 데이터를 가져온다고 생각합니다. 하지만 그렇지 않습니다.

.then()은 콜백 함수를 등록합니다. JavaScript에게 "이 Promise가 완료되면 이 특정 함수를 실행해"라고 말하는 것입니다.

음식 배달 앱과 같습니다. 음식을 주문하면 앱이 이렇게 말하는 것과 같죠: "음식이 도착하면 저를 불러주세요." 함수는 그 신호를 기다립니다.

Why use Async/Await?

.then() 호출을 체이닝(chaining)하여 단계별로 데이터를 가져올 수 있습니다. 이 방식도 작동하지만, 체인이 길어지면 읽기가 어렵습니다.

Async/await를 사용하면 코드가 일반적인 단계별 코드처럼 보입니다. 더 깔끔하고 흐름을 따라가기 쉽습니다.

Does await block JavaScript?

이는 흔한 면접 질문입니다. 정답은 "아니오"입니다.

JavaScript가 await 키워드를 만나면, 오직 해당 async 함수만 일시 중지합니다. 애플리케이션의 나머지 부분은 계속 실행됩니다.

Example flow:

  1. 함수 내의 코드를 실행합니다.
  2. await를 만나 해당 함수를 일시 중지합니다.
  3. 스크립트의 나머지 부분을 실행합니다.
  4. 작업이 완료되면 함수를 다시 재개합니다.

Summary:

Source: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm