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

온라인으로 피자를 주문한다고 상상해 보세요.

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

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

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

Promise는 미래에 도착할 값을 나타냅니다.

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

새로운 Promise를 직접 생성하는 코드를 보는 일은 드뭅니다. fetch()와 같은 현대적인 도구들이 이미 Promise를 반환해 주기 때문입니다.

.then()은 무엇을 하나요?

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

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

배달 앱과 비슷합니다. 음식을 주문하면 앱이 이렇게 말하는 것과 같습니다. "음식이 도착하면 나를 불러줘." 함수는 그 결과를 기다립니다.

왜 Async/Await를 사용하나요?

사용자 데이터를 가져온 뒤, 게시물을 가져오고, 그 다음 댓글을 가져오기 위해 .then() 호출을 체이닝(chaining)할 수 있습니다. 작동은 하지만, 체인이 길어지면 읽기가 어렵습니다.

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

await가 JavaScript를 차단(block)하나요?

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

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

실행 흐름 예시:

  1. async 함수 내의 코드를 실행합니다.
  2. await를 만나 해당 함수를 일시 중지합니다.
  3. 애플리케이션의 나머지 부분을 실행합니다.
  4. 작업이 완료되면 async 함수를 다시 재개합니다.

Async/await는 단지 Promise를 더 깔끔하게 작성하는 방법일 뿐입니다. 즉, 문법적 설탕(syntactic sugar)입니다.

핵심 요약:

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