JavaScript에서 비동기 처리 (callback promise)

비동기 처리를 마스터하라! Callback과 Promise 완전 정복 가이드

JavaScript는 단일 스레드 기반 언어로서 비동기 처리가 매우 중요합니다. 비동기 처리를 통해 사용자 경험을 향상시키고, 서버와의 데이터 통신이나 시간 소요 작업을 효율적으로 처리할 수 있습니다. 특히 콜백(callback)과 프로미스(Promise)는 JavaScript 비동기 처리의 핵심 기술로, 이를 정확히 이해하는 것은 복잡한 비동기 로직을 작성하는 데 필수적입니다. 본 글에서는 콜백과 프로미스의 개념, 예제, 그리고 둘을 활용하는 실전 코딩 방법에 대해 상세히 설명하며, 비동기 컨트롤 플로우를 이해하는 데 도움을 드릴 것입니다. 이를 통해 여러분은 더욱 깔끔하고 유지보수하기 쉬운 비동기 JavaScript 코드를 작성할 수 있습니다.

목적별로 알아보는 콜백(Function Callback)의 이해와 활용

콜백은 특정 함수에 인수로 전달되는 함수로, 비동기 또는 일부 작업이 완료된 후 호출되는 함수입니다. 이 방식은 JavaScript에서 가장 기본적인 비동기 처리 방법 중 하나로, 예를 들어 파일 읽기, 데이터 요청, 타이머 등 다양한 비동기 작업에 활용됩니다.

콜백의 핵심 개념은 "이벤트가 발생하거나 작업이 끝나면 미리 등록한 함수가 호출된다"는 원리입니다. 이를 통해 비동기 작업의 결과를 처리할 수 있는데, 가장 흔한 예제는 setTimeout으로 딜레이를 준 후 콜백 함수를 호출하는 방식입니다.

예를 들어, 서버로부터 데이터를 받아오는 작업을 수행할 때 콜백을 이용하면, 데이터가 도착하면 바로 후속 처리를 할 수 있어서 유연한 프로그램 구조를 만듭니다. 하지만 콜백 지옥(callback hell) 현상, 즉 중첩된 콜백들이 코드 가독성과 디버깅을 어렵게 만드는 문제가 존재합니다. 따라서 이러한 문제를 해결하기 위해 프로미스가 등장하게 되었습니다.

콜백을 이용한 비동기 처리 예제와 그 한계

아래 코드는 setTimeout을 이용하여 비동기적으로 수행되는 작업을 콜백으로 처리하는 간단한 예제입니다.


function fetchData(callback) {
  setTimeout(function() {
    const data = "서버에서 받은 데이터";
    callback(data);
  }, 1000); // 1초 후 callback 호출
}

fetchData(function(result) {
  console.log("비동기 데이터 수신:", result);
});

이 예제는 fetchData 함수를 호출하면 1초 후 콜백 함수가 실행되어 데이터를 출력합니다. 그러나 여러 작업을 연결할 경우 콜백이 중첩되어 가독성이 떨어지고 유지보수가 어려워집니다. 예를 들어, 여러 비동기 작업을 차례로 수행하려면 각 작업의 콜백 내부에 또 다른 콜백을 넣는 방식으로 점점 복잡해져 '콜백 지옥'이 형성될 수 있습니다.

이런 한계를 극복하기 위해 ES6부터 도입된 프로미스(Promise)가 등장했고, 이를 통해 더 깔끔한 비동기 처리가 가능해졌습니다. 프로미스는 작업이 끝났을 때 결과를 반환하거나, 실패 시 에러를 던지는 객체로, 체이닝(chaining)이 가능하여 복잡한 비동기 로직을 보다 이해하기 쉽게 만듭니다.

Promise(프로미스)란 무엇이고, 왜 사용하는가

Promise는 자바스크립트에서 비동기 처리의 상태를 관리하는 객체입니다. 시작, 진행, 완료 또는 실패 상태를 갖고 있으며, 비동기 작업의 결과를 확실하게 제어할 수 있도록 도와줍니다. 이를 통해 복잡한 비동기 흐름을 더 직관적이고 깔끔하게 코딩할 수 있습니다.

Promise는 생성자 함수로서, 두 가지 인수를 받습니다. `resolve`와 `reject`로 비동기 작업이 성공했을 때와 실패했을 때 각각 호출됩니다. 이후 `.then()`, `.catch()`, `.finally()` 메서드 체이닝을 통해 흐름 제어와 에러 처리를 진행합니다.

예를 들어, 서버에서 데이터를 받아오는 API 호출을 Promise로 래핑하면, `.then()`을 사용하여 성공 시 처리, `.catch()`로 실패 시 에러 처리, `.finally()`로 마무리 작업을 수행할 수 있습니다. 이 방식은 비동기 흐름을 직관적으로 파악할 수 있게 하며, 콜백 피로를 해소할 수 있습니다.

Promise를 활용하는 실전 예제와 활용 기법

아래는 Promise를 이용하여 서버로부터 데이터를 가져오는 예제입니다. fetch API는 기본적으로 Promise를 반환하므로, 이를 이용한 체이닝 방법을 보여줍니다.


function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const success = true; // 또는 false로 테스트 가능
      if (success) {
        resolve("서버 데이터");
      } else {
        reject("Error: 데이터 요청 실패");
      }
    }, 1500);
  });
}

// Promise 체이닝 사용
fetchData()
  .then(function(data) {
    console.log("데이터 받음:", data);
    // 추가 작업 수행 가능
  })
  .catch(function(error) {
    console.error("에러 발생:", error);
  })
  .finally(function() {
    console.log("데이터 요청 완료");
  });

이 예제는 Promise의 체이닝 구조를 보여줍니다. 성공 시 `.then()` 메서드, 실패 시 `.catch()`로 처리하며, 작업 종료 후 무조건 실행되는 `.finally()`도 활용됩니다. 이러한 기법은 비동기 처리에서 발생하는 복잡성을 상당 부분 해소하며, 가독성을 높입니다.

복수의 비동기 작업을 순차적으로 수행하거나 병렬 처리하는 전략도 Promise를 이용하면 효율적입니다. `Promise.all()`, `Promise.race()`, `Promise.allSettled()` 등 다양한 정적 메서드들이 존재하며 효율적인 비동기 제어를 가능하게 합니다.

Async/Await를 활용한 더 깔끔한 비동기 처리 방법

ES2017 버전을 기점으로 도입된 async/await 문법은 Promise 기반 비동기 처리를 더 간단하고 직관적으로 만들어줍니다. async 함수 내에서는 await 키워드를 사용해 Promise의 resolve를 기다릴 수 있으며, 마치 동기식 코드처럼 비동기 흐름을 제어할 수 있습니다.

예를 들어, 이전 Promise 예제를 async/await로 변경하면 코드의 가독성이 훨씬 좋아지고, 일반 동기식 프로그래밍에 가까운 구조를 갖추게 됩니다.


async function getData() {
  try {
    const data = await fetchData();  // fetchData는 Promise를 반환
    console.log("비동기 데이터 수신:", data);
  } catch (error) {
    console.error("에러 발생:", error);
  } finally {
    console.log("작업 종료");
  }
}

getData();

이 구조를 통해 비동기 코드를 작성할 때 콜백 지옥, 체이닝 복잡성, 에러 핸들링 문제를 자연스럽게 해결할 수 있습니다. 또한, 여러 비동기 작업을 동시에 수행하거나 순차적으로 처리하는 것도 쉽고 명확하게 만들 수 있으며, 복잡한 로직의 가독성을 크게 향상시킵니다.

이처럼 Promise와 async/await는 현대 JavaScript 비동기 처리에서 없어서는 안 될 핵심 기술이며, 잘 활용하면 효율적이고 유지보수가 쉬운 프로그램을 만들 수 있습니다.

Q&A: 자주 묻는 비동기 처리 관련 질문들

Q1. 콜백과 프로미스의 가장 큰 차이점은 무엇인가요?

콜백은 단순히 함수를 인수로 넘겨주며, 중첩으로 인해 코드가 복잡해지기 쉬운 반면, 프로미스는 체이닝이 가능하여 코드의 가독성과 유지보수성을 높여줍니다. 또한, 에러 처리가 더 쉽고 직관적입니다.

Q2. async/await는 어느 시점에 도입되었으며, 기존 Promise와 어떤 차이점이 있나요?

async/await는 ES2017(ECMAScript 2017)에서 도입되었으며, Promise를 기반으로 작동합니다. 차이점은, async/await는 비동기 코드를 동기식처럼 작성하게 해주어 가독성을 높이고, 비동기 흐름 제어를 더 쉽게 만들어줍니다.

Q3. Promise를 사용할 때 주의해야 할 점은 무엇인가요?

Promise는 상태가 한 번만 변경되므로, 적절하게 resolve와 reject를 호출하는 것과, 체이닝 시 에러 처리를 반드시 해주는 것이 중요합니다. 또한, 중첩된 Promise 구조는 피하고, `Promise.all()` 또는 `async/await`를 활용하는 것이 좋습니다.

결론: 비동기 JavaScript를 완벽히 이해하는 길

이 글에서는 JavaScript의 비동기 처리 기술인 콜백과 프로미스, 그리고 async/await를 체계적으로 살펴보았습니다. 비동기 처리는 사용자 경험과 성능 향상에 매우 중요한 역할을 하며, 콜백 지옥을 피하고 가독성을 높이기 위해 프로미스와 async/await를 적극 활용하는 것이 좋습니다. 이러한 기술들을 능숙하게 구사하면 복잡한 비동기 로직도 깔끔하게 관리할 수 있으며, 유지보수도 훨씬 수월해집니다. 앞으로 JavaScript 비동기 처리 방식을 선택할 때 본 가이드가 큰 도움이 되기를 바랍니다. 계속해서 연습하며 실전에서 활용하는 것이 가장 빠른 배우는 길입니다. 비동기 처리 기술을 숙달하여 보다 효율적이고 깨끗한 코드를 작성하세요. 이를 통해 개발 생산성을 높이고, 사용자에게 더 나은 서비스와 경험을 제공할 수 있습니다.

#JavaScript #비동기처리 #콜백 #Promise #AsyncAwait #JavaScript기초 #비동기코드 #웹개발

기초 코드 따라하기