JavaScript async & await 사용법

동기 코드

먼저 동기 코드를 살펴봅시다. 동기 코드는 순서대로 실행됩니다. 한 줄이 끝나면 다음 줄이 실행되는 식이죠.

console.log("First");
console.log("Second");

이 코드는 "First"를 출력하고, 바로 다음에 "Second"를 출력합니다.

비동기 코드

이제 비동기 코드를 살펴봅시다.

console.log("First");
setTimeout(() => console.log("Second"), 1000);

 

이 코드는 "First"를 출력하고, "Second"는 1초 후에 출력합니다.

 

 

async 함수

JavaScript에서는 비동기 작업을 수행하는 함수를 정의할 때 async 키워드를 사용할 수 있습니다. async 함수 내부에서는 await 키워드를 사용할 수 있어요.

async function myFunction() {
// ...
}

 

await 키워드

await는 async 함수 내부에서만 사용할 수 있으며, Promise가 해결될 때까지 기다립니다. 다시 말해, await 뒤에 오는 작업이 완료될 때까지 코드의 실행을 멈춥니다.

Promise와 setTimeout

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.

setTimeout은 특정 시간이 지난 후에 함수를 호출하는 데 사용됩니다.

await new Promise((resolve) => setTimeout(resolve, 1000));

 

이 부분은 1초 후에 Promise를 해결(resolve)하는 코드입니다. await가 Promise가 해결될 때까지 기다리므로, 여기서는 1초 동안 코드의 실행을 일시 중단합니다.

async와 await을 사용한 비동기 코드

async와 await을 사용하면 비동기 코드를 마치 동기 코드처럼 작성할 수 있습니다.

async function myFunction() {
  console.log("First");
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log("Second");
}

myFunction();

이 코드도 "First"를 출력하고, "Second"는 1초 후에 출력합니다.

await 키워드는 Promise가 끝날 때까지 기다린다는 것을 기억해 주세요. 위의 코드에서는 setTimeout으로 1초를 기다리는 Promise를 만들었기 때문에, "First"와 "Second" 사이에 1초의 지연이 발생합니다.

resolve는 Promise 내에서 사용되는 함수로, Promise가 성공적으로 완료되었음을 알리는 역할을 합니다. resolve 함수가 호출되면, Promise는 완료된 상태가 되며 (fulfilled 상태), then 메서드나 await 키워드와 함께 사용할 수 있게 됩니다.

여기에 간단한 예제가 있어요:

let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);
});

myPromise.then((value) => {
  console.log(value); // 'Success!'를 출력
});

이 코드에서 resolve('Success!')가 호출되면, Promise는 완료된 상태가 되고, then 메서드 안의 콜백 함수가 실행됩니다. 인자로 넘긴 'Success!' 문자열이 콜백 함수로 전달되어, console.log(value);에서 출력됩니다.

이와 유사하게 async와 await을 사용할 때도 resolve 함수가 Promise의 완료를 알리는 역할을 합니다.

async function myFunction() {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log("Later");
}

myFunction();

// 1초 후 "Later"가 출력됩니다.
이 경우에도 resolve 함수가 호출되면, await 키워드가 Promise가 완료될 때까지 기다리던 대기 상태에서 벗어나 다음 코드로 진행합니다.