비동기 프로그래밍 (async, await)

 

📌 동기식(Synchronous) VS 비동기식(Asynchronous)

프로그래밍에서 동기란, 작업이 순차적으로 진행되는 방식을 의미합니다. 즉, 이전 작업이 완료되어야만 다음 작업을 수행할 수 있습니다. 반면, 비동기는 특정 작업을 요청한 후 그 작업이 끝날 때까지 기다리지 않고, 다른 작업을 병행하는 방식을 말합니다. 비동기 작업은 완료된 시점에 알림을 받아 그때 처리할 수 있기 때문에, API 호출이나 파일 읽기처럼 시간이 오래 걸리는 작업에서 유용하게 사용됩니다.

 

❗비동기 처리가 필요한 이유?

• 사용자 경험 향상
  • 비동기 처리를 사용하면, API 호출이나 파일 읽기 등의 작업을 기다리는 동안에도 화면이 멈추지 않고 다른 작업을 수행할 수 있습니다. 이는 사용자가 애플리케이션을 끊김 없이 사용할 수 있게 하여 더 나은 사용자 경험을 제공합니다.
• 응답 지연 문제 해결
  • 서버에서 데이터를 받아오는 작업은 종종 네트워크 상황이나 서버 부하에 따라 시간이 오래 걸릴 수 있습니다. 비동기 처리를 통해 이러한 응답 지연이 프로그램의 다른 부분에 영향을 미치지 않도록 할 수 있습니다.
• 멀티태스킹
  • 비동기 처리는 동시에 여러 작업을 수행할 수 있도록 해줍니다. 예를 들어, 데이터를 가져오는 동안 화면에서 다른 UI 요소들이 여전히 반응하게 하거나, 여러 API 호출을 동시에 처리할 수 있게 합니다.

---

💻콜백 함수와 프로미스: 비동기 처리의 시작

🥲콜백 함수

초창기 자바스크립트에서 비동기 작업을 처리하기 위해 주로 사용되던 방식은 콜백 함수였습니다. 콜백 함수는 작업이 완료된 후 실행할 함수를 매개변수로 전달하는 방식입니다. 이런 방식은 단순한 비동기 작업에 적합하지만, 복잡한 비동기 작업이 겹칠 경우 콜백 지옥이라고 불리는 중첩된 코드를 만들어 가독성을 떨어뜨릴 수 있습니다.

function a(callback){ 
   console.log('A 실행!');
   callback();
}

function b(){
   console.log('B 실행!');
}

a(b); 
// 결과: A 실행! B 실행!

 

🛠️프로미스(Promise)

 

콜백 함수의 단점을 보완하기 위해 ES6에서 도입된 프로미스는 비동기 작업의 성공 또는 실패를 관리할 수 있게 해주는 객체입니다. then()과 catch() 메서드를 사용하여 성공과 실패를 처리할 수 있습니다. 프로미스는 콜백 함수보다 구조가 더 깔끔하지만, 여전히 .then() 체인을 많이 사용하면 코드가 길어지고 복잡해질 수 있습니다.

function fetchData() {
    // ...
    return new Promise((resolve, reject) {    // Pending 상태
        if(isSuccess) {
            resolve(data)                         // 성공 상태
        }
        else {
            reject(error)                         // 실패 상태
        }
    })
}

---

👍async/await: 동기처럼 작성하는 비동기 코드

async/await는 ES8에서 도입된 기능으로, 비동기 작업을 마치 동기적인 코드처럼 작성할 수 있게 해줍니다. async/await는 프로미스를 기반으로 동작하지만, .then()을 사용하는 대신 await 키워드를 사용해 비동기 작업이 완료될 때까지 기다릴 수 있습니다.

async function getUserData(userId) {
  try {
    const res = await fetch(`/api`);
    return res;
  } catch (error) {
    console.error(error);
  }
}

 

가독성이 좋아지고, 에러 처리가 간단해집니다 !