[JavaScript] 비동기 처리

JavaScript 비동기 처리 정리

목차

• 1. 동기 vs 비동기
• 2. 비동기 처리 방식의 진화 (Callback, Promise, Async/Await)
• 3. Promise 유틸리티 메서드
• 4. 핵심 정리 및 요약

1. 동기 vs 비동기

동기(Synchronous)

• 코드가 순차적으로 실행되며, 하나의 작업이 완료될 때까지 다음 작업이 대기
• 이전 작업이 끝나야 다음 작업 시작

비동기(Asynchronous)

• 특정 코드의 완료를 기다리지 않고 다음 코드를 즉시 실행
• 블로킹(Blocking) 없음: 실행 흐름이 멈추지 않음
• 실행 순서 보장 안 됨: 코드 작성 순서와 실행 완료 순서가 다를 수 있음

💡 비동기가 필요한 이유

• 사용자 경험 개선: 데이터 로딩 중에도 UI가 응답 가능
• 효율성: 네트워크 요청, 파일 읽기 등 시간이 걸리는 작업 중에도 다른 작업 수행 가능

---

2. 비동기 처리 방식의 진화

2.1 콜백 함수 방식

문제점:

• 콜백 헬(Callback Hell): 중첩된 콜백으로 코드 복잡도 증가
• 에러 처리 어려움: try-catch로 비동기 에러를 잡을 수 없음
• 결과값 반환 불가: 비동기 결과를 외부 변수에 할당하거나 return으로 반환 불가

// 콜백 헬 예시
getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      // 계속 중첩...
    });
  });
});

2.2 Promise (ES6)

Promise란?

• 비동기 작업의 최종 완료 또는 실패를 나타내는 객체
• "미래의 어떤 시점에 결과를 반환하겠다"는 약속

Promise 생성 시 동작: Promise를 생성하면 executor 함수(콜백)가 즉시 실행됨

Promise의 3가지 상태 (State) ⭐

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

const promise = new Promise((resolve, reject) => {
  if (success) {
    resolve(result); // Fulfilled
  } else {
    reject(error);   // Rejected
  }
});

promise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log('완료'));

2.3 async/await (ES8)

• Promise를 동기 코드처럼 작성 가능 (가독성 향상)
• try-catch로 에러 처리 가능

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

---

3. Promise 유틸리티 메서드

Promise.all()

• 여러 Promise를 병렬 실행하고 모두 완료될 때까지 대기
• 결과 순서 보장 (실행 순서와 동일)
• 하나라도 실패하면 즉시 reject 반환

Promise.race()

• 가장 먼저 완료되는 Promise의 결과 반환 (성공/실패 상관없음)

※ 모든 Promise 유틸리티는 동시에 트리거됩니다 (순차 실행 X).

---

4. 핵심 정리

방식	장점	단점
콜백	간단한 비동기 처리	콜백 헬, 에러 처리 어려움
Promise	가독성 및 에러 처리 용이	장황한 체이닝(.then)
async/await	최고의 가독성 (동기적 코드)	Promise 기반 지식 필수

학습 포인트 💡

• Promise의 3가지 상태(Pending, Fulfilled, Rejected) 숙지
• Promise.all과 Promise.race의 차이 명확히 구분
• async/await은 Promise의 syntactic sugar이므로 원리 이해 선행 필요