JavaScript 비동기 프로그래밍 마스터하기 – 초보자도 쉽게 따라하는 완벽 가이드

도입 – 학습 목표 및 필요성

JavaScript 비동기 프로그래밍 마스터하기는 현대 웹 개발에서 필수적인 기술입니다. API 호출, 파일 읽기, 타이머 처리 등 시간이 걸리는 작업을 효율적으로 처리하려면 비동기 프로그래밍을 반드시 이해해야 합니다. 동기 방식으로 코드를 작성하면 한 작업이 완료될 때까지 다른 작업이 블로킹되어 사용자 경험이 저하됩니다. 이 튜토리얼에서는 콜백부터 Promise, async/await까지 모든 비동기 패턴을 실전 예제와 함께 완벽하게 다룹니다. 초보자도 쉽게 따라할 수 있도록 단계별로 구성했으며, 실무에서 바로 적용 가능한 고급 테크닉까지 포함했습니다.

기본 개념 설명

JavaScript는 싱글 스레드 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 비동기 프로그래밍을 통해 여러 작업을 동시에 처리하는 것처럼 보이게 할 수 있습니다. 이는 이벤트 루프와 콜백 큐 메커니즘을 통해 작동합니다.

동기(Synchronous) 코드는 순차적으로 실행되며, 한 작업이 끝나야 다음 작업이 시작됩니다. 반면 비동기(Asynchronous) 코드는 시간이 걸리는 작업을 백그라운드로 보내고 메인 스레드는 다른 작업을 계속 수행합니다.

JavaScript에서 비동기를 처리하는 주요 방법은 세 가지입니다:

• 콜백(Callback): 작업 완료 후 실행될 함수를 인자로 전달
• Promise: 미래에 완료될 작업을 나타내는 객체
• async/await: Promise를 더 읽기 쉽게 작성하는 문법

각 방법은 장단점이 있으며, 상황에 따라 적절한 패턴을 선택해야 합니다. 콜백은 간단하지만 중첩되면 “콜백 지옥”이 발생하고, Promise는 체이닝이 가능하며, async/await는 동기 코드처럼 읽기 쉽습니다.

단계별 구현 가이드

1단계: 콜백 함수 이해하기

콜백은 가장 기본적인 비동기 패턴입니다. 함수를 다른 함수의 인자로 전달하여, 작업이 완료된 후 실행되도록 합니다.

콜백의 문제점: 여러 비동기 작업을 순차적으로 처리하면 중첩이 깊어져 “콜백 지옥(Callback Hell)”이 발생합니다. 코드 가독성이 떨어지고 에러 처리가 어려워집니다.

2단계: Promise로 개선하기

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 세 가지 상태를 가집니다:

• Pending(대기): 초기 상태, 아직 완료되지 않음
• Fulfilled(이행): 작업이 성공적으로 완료됨
• Rejected(거부): 작업이 실패함

Promise는 .then(), .catch(), .finally() 메서드로 체이닝하여 사용합니다. 이를 통해 콜백 지옥을 피하고 에러 처리를 일관되게 할 수 있습니다.

3단계: async/await 마스터하기

async/await는 ES2017에 도입된 문법으로, Promise를 더 직관적으로 작성할 수 있게 합니다. async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환합니다. await 키워드는 Promise가 처리될 때까지 함수 실행을 일시 중지합니다.

주요 장점:

• 동기 코드처럼 읽기 쉬움
• try/catch로 에러 처리 가능
• 디버깅이 용이함
• 조건문과 반복문 사용이 자연스러움

4단계: 병렬 처리와 순차 처리

여러 비동기 작업을 처리할 때는 순차 실행과 병렬 실행을 구분해야 합니다:

• 순차 실행: await를 여러 번 사용하면 각 작업이 순서대로 실행됩니다
• 병렬 실행: Promise.all()을 사용하면 여러 작업을 동시에 시작하고 모두 완료될 때까지 기다립니다

Promise.all()은 모든 Promise가 성공해야 하며, 하나라도 실패하면 전체가 실패합니다. Promise.allSettled()는 모든 결과를 반환하며, Promise.race()는 가장 먼저 완료된 결과를 반환합니다.

실제 코드 예제와 설명

예제 1: API 데이터 가져오기 (기본)

// async/await를 사용한 API 호출
async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log('사용자 데이터:', data);
    return data;
  } catch (error) {
    console.error('데이터 가져오기 실패:', error);
    throw error;
  }
}

// 함수 호출
fetchUserData(123);

예제 2: 여러 API 병렬 호출

async function fetchMultipleUsers(userIds) {
  try {
    // 모든 요청을 동시에 시작
    const promises = userIds.map(id => 
      fetch(`https://api.example.com/users/${id}`)
        .then(res => res.json())
    );
    
    // 모든 요청이 완료될 때까지 대기
    const users = await Promise.all(promises);
    console.log('모든 사용자 데이터:', users);
    return users;
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

fetchMultipleUsers([1, 2, 3, 4, 5]);

예제 3: 재시도 로직이 있는 고급 패턴

async function fetchWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url);
      if (response.ok) {
        return await response.json();
      }
    } catch (error) {
      console.log(`시도 ${i + 1} 실패`);
      if (i === maxRetries - 1) throw error;
      
      // 지수 백오프: 1초, 2초, 4초 대기
      await new Promise(resolve => 
        setTimeout(resolve, Math.pow(2, i) * 1000)
      );
    }
  }
}

fetchWithRetry('https://api.example.com/data');

예제 4: 타임아웃 처리

function fetchWithTimeout(url, timeout = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('요청 시간 초과')), timeout)
    )
  ]);
}

async function getData() {
  try {
    const response = await fetchWithTimeout('https://api.example.com/slow', 3000);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('타임아웃 또는 에러:', error.message);
  }
}

고급 활용 방법

1. Promise 체이닝 최적화

복잡한 비동기 플로우에서는 중간 결과를 다음 단계로 전달해야 합니다. async/await를 사용하면 변수에 저장하여 쉽게 관리할 수 있습니다.

2. 에러 핸들링 전략

전역 에러 핸들러를 설정하거나, 각 비동기 작업마다 적절한 에러 처리를 구현해야 합니다. try/catch 블록을 적절히 배치하고, 사용자에게 의미 있는 에러 메시지를 제공하세요.

3. 동시성 제어

너무 많은 요청을 동시에 보내면 서버에 부담을 줄 수 있습니다. Promise 풀(pool)을 구현하여 동시 실행 개수를 제한할 수 있습니다:

async function limitConcurrency(tasks, limit) {
  const results = [];
  const executing = [];
  
  for (const task of tasks) {
    const promise = task().then(result => {
      executing.splice(executing.indexOf(promise), 1);
      return result;
    });
    
    results.push(promise);
    executing.push(promise);
    
    if (executing.length >= limit) {
      await Promise.race(executing);
    }
  }
  
  return Promise.all(results);
}

4. AbortController로 요청 취소

사용자가 페이지를 떠나거나 새 검색을 시작하면 이전 요청을 취소해야 합니다. AbortController를 사용하면 fetch 요청을 중단할 수 있습니다.

마무리 및 추가 학습 자료

JavaScript 비동기 프로그래밍 마스터하기를 통해 콜백, Promise, async/await의 핵심 개념과 실전 활용법을 배웠습니다. 비동기 프로그래밍은 연습이 중요하므로, 실제 프로젝트에서 API 호출, 파일 처리, 타이머 등을 구현하며 익숙해지세요.

추천 학습 자료:

• MDN Web Docs – Promise와 async/await 공식 문서
• JavaScript.info – 비동기 프로그래밍 심화 가이드
• Node.js 공식 문서 – 서버 사이드 비동기 처리
• 실전 프로젝트: REST API 클라이언트 만들기

지금 바로 JavaScript 비동기 프로그래밍 마스터하기를 실습하며 여러분의 개발 실력을 한 단계 업그레이드하세요!