자바스크립트 비동기 처리: 콜백, 프로미스, 그리고 async/await

 

자바스크립트 비동기 처리: 콜백, 프로미스, 그리고 async/await

비동기 처리란 무엇인가?

**비동기 처리(Asynchronous Processing)**란, 코드가 실행되는 동안 다른 작업을 기다리지 않고 동시에 처리할 수 있도록 하는 방식입니다.
자바스크립트(JavaScript)는 기본적으로 싱글 스레드(Single Thread) 환경이기 때문에, 비동기 로직이 필수적입니다.

예를 들어, 사용자의 버튼 클릭, 서버에서 데이터 받아오기(AJAX), 파일 읽기, 타이머 설정 등은 시간이 오래 걸릴 수 있으므로 비동기 방식으로 처리해야 UI가 멈추지 않고 부드럽게 동작합니다.

---

콜백 함수 (Callback Function)

콜백 함수란?

콜백 함수는 어떤 함수에 인수로 전달되어 특정 시점에 호출되는 함수입니다. 비동기 작업이 완료되었을 때 실행되도록 예약할 수 있습니다.

예제:

function fetchData(callback) {
  setTimeout(() => {
    console.log("데이터를 가져왔습니다!");
    callback();
  }, 1000);
}

fetchData(() => {
  console.log("콜백 실행 완료!");
});

단점: 콜백 지옥

콜백을 중첩해서 사용하다 보면 다음과 같이 **“콜백 지옥(Callback Hell)”**에 빠지기 쉽습니다.

login(user, () => {
  getProfile(user, () => {
    getPosts(user, () => {
      showFeed();
    });
  });
});

코드가 가독성이 떨어지고 유지보수가 어려워지는 문제가 발생합니다.

---

프로미스(Promise)

프로미스란?

**프로미스(Promise)**는 비동기 작업의 성공(resolve) 또는 실패(reject)를 처리하는 객체입니다. 콜백보다 구조화된 에러 처리와 연결된 체이닝이 가능해 보다 직관적인 코드 작성이 가능합니다.

기본 구조:

const promise = new Promise((resolve, reject) => {
  // 비동기 작업
  if (성공) {
    resolve(결과값);
  } else {
    reject(에러);
  }
});

예제:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터를 성공적으로 불러왔습니다!");
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

장점:

• 가독성 향상
• 체이닝 가능 (.then().then())
• 에러를 .catch()로 관리 가능

---

async/await

async/await란?

async/await는 프로미스를 기반으로 만들어진 비동기 처리 문법의 최신 방식입니다.
async 키워드가 붙은 함수 내부에서 await를 사용하면, 해당 작업이 완료될 때까지 기다렸다가 다음 줄을 실행합니다.

사용 예:

async function loadData() {
  try {
    const data = await fetchData();  // Promise가 반환되어야 함
    console.log(data);
  } catch (err) {
    console.error("에러 발생:", err);
  }
}

특징:

• 마치 동기식 코드처럼 읽기 쉽고 직관적
• try/catch로 에러를 처리할 수 있음
• await는 반드시 async 함수 안에서만 사용 가능

---

세 가지 방식 비교

항목	콜백 함수	프로미스(Promise)	async/await
가독성	낮음 (콜백 지옥 발생)	중간 (체이닝 가능)	높음 (동기식처럼 작성)
에러 처리	try-catch 어려움	.catch() 사용 가능	try-catch 사용 가능
디버깅 편의성	어려움	중간	좋음
코드 길이	길어짐	줄어듦	가장 짧음

---

실전 예제: API 호출 시 async/await 활용하기

async function getUserInfo() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const data = await response.json();
    console.log("유저 정보:", data);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

getUserInfo();

이렇게 작성하면 비동기 요청이 마치 동기 방식처럼 순차적이고 가독성 있게 처리됩니다.

---

결론: 어떤 방식이 가장 좋을까?

• 콜백 함수는 단순한 작업에는 빠르지만 복잡해지면 지옥을 경험할 수 있음
• 프로미스는 체이닝을 통한 작업 순서 제어가 가능함
• async/await는 가장 최신 방식으로, 가독성과 유지보수성이 가장 뛰어남

현재는 대부분의 프로젝트에서 async/await을 표준으로 채택하고 있습니다. 하지만 모든 방식의 구조를 이해하고 있어야 다양한 상황에 유연하게 대응할 수 있습니다.