비동기 작업 처리를 위한 Promise와 async/await

---

1. 비동기 작업이란?

비동기 작업(Asynchronous Operation)은 프로그램이나 애플리케이션 내에서 동시에 여러 작업을 수행하거나, 작업이 완료될 때까지 대기하지 않고 다른 작업을 수행하는 방식을 의미합니다. 동기 작업과 비교했을 때, 비동기 작업은 작업의 시작과 끝을 기다리지 않고 중간에 다른 작업을 처리할 수 있도록 해줍니다.

비동기 작업은 주로 시간이 오래 걸리는 작업이나 입출력 작업과 같은 경우에 사용됩니다. 예를 들어, 네트워크 요청, 파일 읽기/쓰기, 데이터베이스 쿼리 실행 등은 대표적인 비동기 작업의 예입니다.

비동기 작업을 수행하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 콜백 함수를 사용하는 것인데, 이는 작업이 완료되면 미리 정의된 콜백 함수가 호출되는 방식입니다. 하지만 콜백 함수만으로는 복잡한 비동기 코드를 관리하기 어려울 수 있습니다. 이에 따라 Promise나 async/await와 같은 기술이 등장하여 비동기 작업을 더 간편하게 처리할 수 있게 되었습니다.

비동기 작업은 프로그램의 응답성과 성능을 향상시키는데 도움을 줄 수 있습니다. 예를 들어, 웹 애플리케이션에서 네트워크 요청을 비동기적으로 처리하면 UI가 블로킹되지 않고 사용자에게 더 나은 경험을 제공할 수 있습니다.

2. Promise와 async/await란?

JavaScript에서 비동기 작업을 처리하는 데 사용되는 기술이다.

이들은 콜백 함수만으로는 다루기 어려웠던 비동기 코드를 더 읽기 쉽고 관리하기 쉽게 만들어준다.

1. Promise: Promise는 비동기 작업의 결과를 다루기 위한 객체입니다. 비동기 작업이 완료되면 결과를 나타내는 값을 resolve(성공) 또는 reject(실패)로 처리하는 방식입니다. Promise 객체는 세 가지 상태를 가질 수 있습니다.

   • 대기 (Pending): 작업이 아직 완료되지 않은 상태
   • 이행 (Resolved / Fulfilled): 작업이 성공적으로 완료된 상태
   • 거부 (Rejected): 작업이 실패한 상태

   ▼ Promise 예시 코드

   const fetchData = () => {
     return new Promise((resolve, reject) => {
       // 비동기 작업 수행
       if (/* 작업 성공 */) {
         resolve('성공 결과');
       } else {
         reject('실패 결과');
       }
     });
   };
   
   fetchData()
     .then(result => console.log(result))
     .catch(error => console.error(error));

2. async/await: async/await는 Promise를 더 쉽게 사용할 수 있게 해주는 문법입니다. async 키워드를 함수 앞에 붙여서 해당 함수가 비동기 함수임을 나타내고, await 키워드를 사용하여 Promise가 resolve될 때까지 기다립니다. 이를 통해 비동기 코드를 동기적인 코드처럼 작성할 수 있습니다.

   ▼ async/await 예시 코드

   const fetchData = async () => {
     try {
       const result = await fetchSomeData();
       console.log(result);
     } catch (error) {
       console.error(error);
     }
   };
   
   fetchData();

Promise와 async/await는 비동기 작업을 처리할 때 가독성을 높이고 에러 처리를 더 쉽게 할 수 있도록 도와주는 중요한 개념입니다.

3. Promise와 async/await의 차이점

Promise와 async/await은 둘다 비동기 작업을 처리하는 방법이다. 어떤 차이점이 있을까?

1. 문법적 차이: Promise는 .then() 및 .catch() 메서드를 사용하여 비동기 작업의 결과를 다루는 반면, async/await는 async 함수 안에서 await 키워드를 사용하여 비동기 작업의 결과를 기다릴 수 있습니다.
2. 가독성: async/await는 코드가 동기적으로 보이게 만들어 가독성을 향상시키고, 코드 블록이 중첩되지 않아도 더 직관적으로 작성할 수 있습니다.
3. 오류 처리: Promise의 경우 .catch()로 오류를 처리하지만, async/await에서는 try와 catch 블록을 사용하여 오류를 처리할 수 있습니다.

4. async/await 함수에서의 try와 catch 문법

async 함수에서의 try와 catch:async 함수 내부에서 try와 catch 블록을 사용하여 비동기 작업 중 발생하는 오류를 처리할 수 있습니다.

• try: try 블록 내부에서 비동기 작업을 실행합니다. 만약 작업이 성공하면 await 키워드 이후의 코드가 실행되고, 작업이 실패하면 catch 블록으로 넘어갑니다.
• catch: catch 블록 내부에서 작업 중 발생한 오류를 처리합니다. 오류가 발생하면 해당 블록이 실행되고, 오류 메시지나 추가적인 처리를 수행할 수 있습니다.