15장: 자바스크립트와 비동기 프로그래밍(콜백, 프로미스, async/await)

alpha2025-04-30 01:32

자바스크립트의 비동기 프로그래밍 시작하기

웹 개발에서 자바스크립트를 활용하는 순간, 동기식 코드와 비동기식 코드의 차이를 자연스레 마주하게 됩니다. 일상 속에서도 우리는 비동기적인 상황을 자주 경험합니다. 예를 들어, 음식을 주문하고 기다리는 동안 다른 일을 할 수 있는 것처럼, 자바스크립트 역시 시간이 오래 걸리는 작업을 처리하면서도 프로그램의 나머지 코드는 그대로 흘러가게 만들 수 있습니다.

자바스크립트는 기본적으로 '싱글 스레드' 방식으로 작동합니다. 즉, 한 번에 한 가지 작업만 처리할 수 있다는 뜻입니다. 하지만 문제는 네트워크 요청이나 파일 읽기처럼 시간이 오래 걸릴 수 있는 작업들을 순차적으로만 처리하면, 나머지 코드 실행이 줄줄이 멈춰버린다는 데 있습니다. 이런 비효율을 극복하기 위해 자바스크립트 세계에선 '비동기 프로그래밍'이라는 대안이 등장했습니다.

비동기 프로그래밍이란, 결과를 기다리는 동안 코드 실행을 멈추지 않고 다음 작업을 이어나가는 방식을 의미합니다. 덕분에 웹페이지는 느리거나 무거운 작업 중에도 버튼 클릭, 스크롤 등 다른 사용자 동작에 곧바로 반응할 수 있습니다. 자바스크립트에서는 크게 세 가지 패턴을 활용해 비동기를 다룹니다: 콜백(Callback), 프로미스(Promise), 그리고 async/await입니다.

콜백 함수의 기본 원리

콜백 함수는 말 그대로, 작업이 끝난 뒤 "나를 다시 불러줘!"라고 함수에 등록하는 방식입니다. 예를 들어, 서버에서 데이터를 가져오는 동안 화면이 멈추지 않도록 다음 작업(콜백)을 미리 준비해두고 기다립니다.

setTimeout(function() {
  console.log('2초 후 이 메시지가 출력됩니다!');
}, 2000);
console.log('이 메시지가 먼저 인쇄됩니다.');

위 예시처럼 setTimeout 등에 함수를 넘기면, 시간이 지난 뒤 콜백이 실행되어 결과를 처리합니다. 하지만 콜백이 중첩될수록 코드는 복잡하게 얽히고, 예외 처리가 어려워진다는 단점이 드러납니다. 이를 흔히 콜백 지옥(callback hell)이라고 부릅니다.

프로미스: 예측 가능한 비동기의 등장

콜백 방식이 복잡해질 때 프로미스(Promise)가 빛을 발합니다. 프로미스는 "언젠가 완료될 작업"을 약속해 주는 객체입니다. 아래처럼 프로미스를 만들면, 작업이 끝난 뒤 성공(resolve) 또는 실패(reject) 결과를 차례대로 관리할 수 있습니다.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('작업 성공!');
  }, 2000);
});

myPromise.then(result => {
  console.log(result);
}).catch(error => {
  console.log(error);
});

이런 구조 덕분에 작업 흐름을 단계별로 명확하게 제어할 수 있으며, 예외 처리가 매우 간편해집니다. 복잡한 비동기 로직도 프로미스로 연결하면 읽기 쉬운 코드가 됩니다.

async/await: 비동기의 새로운 문법

프로미스를 한층 더 직관적으로 다루는 방법이 바로 async/await입니다. async 키워드를 함수 앞에 붙이고, 함수 내부에서 await을 사용하면 마치 동기식 코드처럼 비동기 작업을 순서대로 쓸 수 있습니다.

async function fetchData() {
  try {
    const response = await myPromise; // 위의 프로미스 객체
    console.log(response);
  } catch (error) {
    console.log('에러 발생:', error);
  }
}
fetchData();

이 방식은 복잡한 then, catch 체인을 시각적으로 깔끔하게 정리해 줍니다. 예외 처리도 try...catch 문으로 자연스럽게 통합할 수 있어, 실제 개발에서 가장 널리 쓰이고 있습니다.

첫 비동기 코드를 직접 써보자

비동기 프로그래밍은 처음에는 낯설지만, 작은 예제에서부터 하나씩 따라가다 보면 그 원리가 보이기 시작합니다. 콜백, 프로미스, async/await 각각의 문법을 천천히 실습하고, 한 가지 상황을 여러 방식으로 바꿔 써보세요. 코드의 실행 순서와 결과를 반드시 콘솔에서 직접 확인하며, 비동기 흐름에 익숙해지는 것이 중요합니다.

결국 자바스크립트의 비동기는 웹의 반응성과 유연함을 만들어내는 핵심입니다. 작동 원리와 패턴을 차근차근 익히며, 여러분의 웹페이지와 프로그램에도 활력을 더해보세요.