[JavaScript] 비동기 디자인 패턴(Callback, Promise, async/await)

Callback 디자인 패턴

function delay(message, callback) {
	setTimeout(() => {
    	console.log(message);
        callback(); 
    }, 1000); 
}

console.log("1");
delay("2", () => {
	console.log("3"); 
});
console.log("4"); // 출력결과 1 4 2 3

콜백 패턴은 비동기 작업을 다루는 가장 기본적인 패턴이지만, 중첩된 콜백 함수들이 발생할 수 있어 가독성이나 유지 보수성 측면에서 한계가 있을 수 있습니다.

이를 해결하기 위해 Promise, async/await 등의 패턴이 도입되었습니다.

Promise 패턴

function fetchData() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
            const data = { id: 1, name: "John" };
            if (data) {
            	resolve(data); // 성공 시 데이터 전달
            } 
            else {
            	reject("Data not found"); // 실패 시 오류 메시지 전달
            }
        }, 1000);
	});
}
      
fetchData()
	.then((data) => {
		console.log(data); // 출력 {id: 1, name: 'John'}
	})
	.catch((error) => {
		console.error(error);
	}); 

Promise는 JavaScript에서 비동기 작업을 더 효율적으로 다룰 수 있도록 도와주는 객체입니다.

비동기 작업을 수행하고 해당 작업의 성공 또는 실패 결과를 처리하기 위한 추상화된 방식을 제공합니다.

Promise는 세 가지 상태를 가집니다

Pending (대기): 비동기 작업이 아직 완료되지 않은 상태입니다.
resolved (성공): 비동기 작업이 성공적으로 완료된 상태입니다. 결과 값이 있습니다.
Rejected (실패): 비동기 작업이 실패한 상태입니다. 오류 정보가 있습니다.

async / await 패턴

async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: "John" };
      if (data) {
        resolve(data);
      } else {
        reject("Data not found");
      }
    }, 1000);
  });
}

async function main() {
  try {
    const data = await fetchDataAsync();
    console.log("Data:", data);
  } catch (error) {
    console.error("Error:", error);
  }
}

main();

async는 JavaScript에서 비동기 작업을 보다 쉽게 다룰 수 있도록 도와주는 키워드입니다.

async 함수를 사용하면 코드를 동기적으로 작성하듯이 비동기 작업을 다룰 수 있게 됩니다.

await 키워드 다음에는 Promise가 위치하며, 해당 Promise가 완료될 때까지 함수의 실행을 일시 중지하고 기다립니다.

Promise는 resolve, reject를 사용했지만 async는 Promise와 다르게 성공과 실패를 try catch 문법을 사용하여 에러를 구분합니다.