🔅비동기 프로그래밍: Promise와 async/await

이전 포스팅에서는 자바스크립트의 비동기 방식에서 초기에 사용되는 콜백함수의 개념과 사용법을 알아보았습니다. 하지만 이런 콜백함수는 여러 문제점들과 대체 개념으로 인해 현대에는 콜백함수를 비동기 방식에서 주로 택하여 사용하진 않습니다. 콜백함수의 문제점을 해결해주고, 좀 더 가독성 좋고 사용하기 편리하게 등장한 Promise와 async/await 방식이 존재하기 때문입니다.
그러면 오늘날에 비동기 프로그래밍에서 필수적으로 사용하고 저 역시도 실제로 많이 사용해본 Promise와 async/await에 대해서 알아보겠습니다.

Promise란❓

Promise는 비동기 작업의 결과를 나타내는 객체입니다. 작업이 완료되거나 실패했을 때의 결과를 나타내는 상태를 가지게 되는데, 이것이 어떤 방식인가 아주 기본적인 코드로 살펴본다면

const promise = new Promise((resolve, reject) => {
  const success = true;  // 현재 이 부분이 true라서 비동기 작업은 resolve로 실행
  if (success) {
    resolve("작업 성공");
  } else {
    reject("작업 실패");
  }
});

promise
  .then((result) => {
    console.log(result); // "작업 성공"
  })
  .catch((error) => {
    console.error(error); // "작업 실패"
  });

위 예시에서 볼수있는 것 처럼 Promise를 사용할때는 앞에 new를 붙히고 생성자 함수 Promise()를 사용합니다. 이러한 new Promise()는 비동기 작업의 결과를 나타내는 Promise 객체를 생성하고, 이러한 Promise 객체는 resolve와 reject라는 두 가지 콜백 함수를 매개변수로 받습니다.
이때 resolve는 비동기 작업이 성공적으로 완료되었을 때 호출하여 성공한 결과를 resolve의 인자로 전달하고, reject는 비동기 작업이 실패했을 때 호출하여 실패 이유를 reject의 인자로 전달합니다. 이렇게 구현된 비동기 함수를 then과 catch의 후속 처리 메소드를 통하여 비동기 작업의 실행 결과를 나타낼수 있습니다.
지금의 예제코드에서는 비동기 작업이 성공한다면 작업 성공, 실패한다면 작업 실패라고 실행이 되어 직관적으로 비동기 작업이 실행 되었는지 실패했는지 알수 있게 되어있습니다.
이러한 Promise는 Promise.all()의 방식과 Promise.race()의 메소드 방식으로도 사용하게 되는데

1. Promise.all: 여러 Promise를 객체로 받아서 병렬로 실행하고, 모든 작업이 완료되길 기다리고 완료가 된다면 해당 결과를 반환합니다.

const promise1 = Promise.resolve("작업 1");
const promise2 = Promise.resolve("작업 2");

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // ["작업 1", "작업 2"]
  })
  .catch((error) => {
    console.error("에러 발생:", error);
  });

현재 코드에서는 promise1과 promise2를 병렬로 실행시킨 후 두개의 작업이 모두 완료가 될때 결과를 반환합니다.

2. Promise.race: Promise.race는 Promise.all()과 다르게 여러 Promise 중 가장 먼저 완료된 작업의 결과를 반환합니다.

const promise1 = new Promise((resolve) => setTimeout(resolve, 2000, "작업 1"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 1000, "작업 2"));

Promise.race([slowPromise, fastPromise])
  .then((result) => {
    console.log(result); // "작업 2"
  });

현재 코드에서는 timeout이 더 빠른 promise2 작업에 대한 결과를 반환하게 됩니다.


하지만 이런 Promise에서도 단점이 발생하게 되는데 콜백함수의 떨어지는 가독성으로 인한 대체자로 Promise가 나왔지만 Promise 역시 체인 방식으로 가독성이 떨어질 수 있습니다.

const fetchData1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터 1");
    }, 1000);
  });
};

const fetchData2 = (data) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(data + " + 데이터 2");
    }, 1000);
  });
};

const fetchData3 = (data) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(data + " + 데이터 3");
    }, 1000);
  });
};


fetchData1()
  .then((data1) => {
    console.log(data1);
    return fetchData2(data1); // 첫 번째 데이터를 사용하여 두 번째 데이터를 가져옴
  })
  .then((data2) => {
    console.log(data2);
    return fetchData3(data2); // 두 번째 데이터를 사용하여 세 번째 데이터를 가져옴
  })
  .then((data3) => {
    console.log(data3); 
  })
  .catch((error) => {
    console.error("에러 발생:", error);
  });

현재 이 코드에서는 fetchData1()의 결과로 fetchData2()를 호출하고, fetchData2()의 결과로 fetchData3()을 호출하는 구조로 이런 fetchData가 많아질수록 콜백함수의 비슷한 형태로 코드가 깊어지고 가독성이 떨어지게 됩니다. 또한 만약 중간에 에러가 발생하면 .catch()에서 처리를 할 수는 있지만, 각 비동기 작업이 무엇을 하는지 코드에서 직접 파악하기 어려워서 비동기 흐름 추적이 어려워지게 됩니다.
지금은 예시를 들기위해 fetchData 3개를 사용했지만, 이런 Promise를 반환하는 함수를 비동기로 가져와서 처리해야하는 경우가 많아질수록 Promise의 연속된 사용은 가독성이 저하됩니다.
이런 저하된 가독성을 높힐수 있는 다른 비동기 처리 방식으로 요즘 가장 많이 사용되는 async/await가 존재합니다.

그렇다면, async/await란❓

async/await은 콜백함수의 콜백지옥을 해결하고, Promise의 체인 방식으로 인한 떨어진 가독성을 해결할수 있는 가장 대표적인 비동기 처리 방식인데, async/await는 Promise의 체이닝 문제를 해결하고 동기 코드처럼 읽을 수 있도록 도와주는 비동기 처리 방식입니다. async/await 방식을 사용하면 복잡한 비동기 작업도 좀 더 간단하고 직관적인 코드로 표현할 수 있습니다.

Promise와 async/await의 차이점🌐

특징	Promise	async/await
가독성	체인 방식으로 가독성이 떨어질 수 있음	동기 코드처럼 읽혀 가독성이 높음
에러처리방식	.catch( )를 사용	try-catch로 에러를 처리
구현	복잡한 비동기 로직에서 코드가 중첩되기 쉬움	복잡한 로직도 간결하게 작성 가능

아까 위에서 Promise 체인 방식으로 사용한 코드를 async/await 방식으로 바꿔서 살펴보면

async function fetchData() {  // 함수가 항상 Promise를 반환
  try {
    // await는 항상 async 함수 내부에서만 사용 가능
    const data1 = await fetchData1(); // await: Promise가 처리될 때까지 기다림.
    console.log(data1);

    const data2 = await fetchData2(data1);
    console.log(data2);

    const data3 = await fetchData3(data2);
    console.log(data3);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

fetchData();

이렇게 아까의 Promise 코드 형식보다 간결하고 가독성이 좋은 코드를 완성시킬 수 있습니다.

내가 직접 사용해본 두 방식⭐️

저는 프로젝트에서 비동기 방식을 처리할때 Promise와 async/await를 모두 사용해보면서 직접 실제에서는 어떻게 쓰이는지 동작 방식을 살펴보았습니다.
사실 이 두 방식은 프론트엔드에서 API 데이터 호출을 할때 매우 빈번하게 사용되는데, API 호출은 매우 필수적이고 중요하여 무조건 호출방법을 알고 사용해야하는데 자연스럽게 이런 API 호출에서 제일 많이 사용되는 Promise와 async/await는 중요하고 알아야하는 개념이 되었습니다.
제가 프로젝트에서 사용한 방식은 위도와 경도를 받아와서 사용자의 현재 위치를 가져오는 API 호출을 구현하였는데, 이때 사용한 navigator.geolocation API는 비동기적으로 동작하기 때문에 Promise와 async/await를 사용하여 코드를 작성해야 실제로 위도,경도를 받아올수 있었습니다.

export const getCurrentPosition = () => {
  return new Promise((resolve, reject) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          resolve({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          });
        },
        (error) => reject(error),
      );
    } else {
      reject(new Error("브라우저에서 현 위치를 받아오는 데 실패했습니다."));
    }
  });
};

// 현재 위치를 보내서 위도, 경도로 변환
export const getCoordinates = async () => {
  try {
    const position = await getCurrentPosition();
    const { latitude, longitude } = position;

    return {
      latitude: parseFloat(latitude),
      longitude: parseFloat(longitude),
    };
  } catch (error) {
    console.error("Error fetching coordinates:", error);
    throw error;
  }
};

직접 사용해본 코드 역시 위에서 언급한 Promise와 async/await의 기본 사용법을 지키면서 원하는 데이터를 받아올수 있도록 설정하였는데, getCurrentPosition 함수에서 위치 좌표를 반환하고 getCoordinates 함수에서 getCurrentPosition을 호출해 위치 데이터를 가져오고, 필요한 데이터를 반환할수 있도록 설계하였습니다.
하지만 여기서 의문점이 생길수 있는데, 아까는 Promise는 가독성이 떨어지고 이러한 대체로 async/await이 나왔는데 왜 굳이 두개를 함께 사용했는지 의아할수 있지만 Promise 방식도 함께 사용한 이유는 브라우저의 geolocation.getCurrentPosition은 콜백 기반으로 설계되어 있어서 성공과 에러 처리 로직이 섞여 있었기에 이를 Promise를 사용하여 .then과 .catch를 사용해 Promise를 통한 체계적인 비동기 작업을 처리하기 위함이였고, 프로젝트에서 다른 API 호출과 결합해 데이터를 처리해야 했기 때문에 Promise 체인이 복잡하지 않은 이곳에서는 두 방식을 함께 사용하게 되었습니다.

Promise와 async/await 사용에 대한 나의 생각🔖

저는 Promise와 async/await를 직접 함께 사용하면서 각자의 장단점을 좀 더 자세히 살펴볼 수 있었습니다. 우선 Promise의 장점은 단일 비동기 작업을 처리하거나 간단한 체이닝이 필요한 경우에는 Promise는 여전히 유용하다고 생각이 듭니다. 특히, Promise.all() 과 같은 방식은 여러 작업을 병렬로 실행할 때 효율성 측면에서 유용하다고 생각이 들기에 독립적으로 API 호출을 병렬로 처리해야 한다면 Promise를 사용하는것은 간단하면서 좋은 방식입니다.
이러한 Promise의 방식과 비교해서 async/await의 장점을 살펴본다면 역시 복잡한 비동기 흐름에서는 async/await가 훨씬 유리하다는것을 느꼈습니다. 비동기 방식에서 각각의 작업 간이 서로에게 의존성이 강하다면, 이것을 동기 코드처럼 작성할 수 있기때문에 코드의 가독성이 좋아지고 이로인하여 어디서부터 코드가 진행되는지 흐름을 파악하기에 더 용이했습니다. 또한 에러처리를 try-catch를 통해 한곳으로 묶어서 처리할 수 있기 때문에, 후에 틀린곳을 찾아내거나 유지보수를 해야하는 상황이 생긴다면 async/await이 더 좋은 방식이 될 수 있을 것 이라고 생각합니다.
하지만 결국 async/await는 Promise의 완전한 대체 관계라고 생각하는것보다는 두 방식은 서로 보완 관계라고 보는 것이 더 가깝습니다. 실제로 콜백을 기반으로 한 API를 Promise로 감싸서 사용하거나, 병렬적으로 처리가 필요한 경우 Promise.all과 async/await를 함께 사용하는 등 두 방식을 조합해서 사용한다면 코드의 가독성을 유지함과 동시에 비동기 작업의 효율성 또한 증가 시킬수 있기 때문에 각각의 사용방식과 개념을 잘 알고 비동기 방식에서는 두 방식을 적절하게 잘 사용하면 좋을 것 같습니다!⭕️

이미지 출처: https://sugandsingh5566.medium.com/demystifying-javascript-asynchronous-operations-promises-vs-async-await-e4dfdea043cc
참고: https://umanking.github.io/2023/04/07/promise-all-vs-promise-race
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-async-await