[JavaScript 심화 시리즈] 4일차: JavaScript 비동기 프로그래밍: 콜백, 프로미스, async/await 이해하기

4. 비동기 프로그래밍: 콜백, 프로미스, async/await

비동기 프로그래밍이란?

비동기 프로그래밍은 작업이 완료될 때까지 기다리지 않고, 다른 작업을 계속해서 수행할 수 있도록 하는 프로그래밍 방식입니다. JavaScript는 싱글 스레드 언어이기 때문에 비동기 프로그래밍을 통해 사용자 경험을 향상시킬 수 있습니다.

콜백 함수

콜백 함수는 비동기 작업이 완료된 후 호출되는 함수입니다. 이는 비동기 작업을 처리하는 기본적인 방법입니다.

1. 콜백 함수 예제

function fetchData(callback) {
  setTimeout(function() {
    let data = "서버에서 가져온 데이터";
    callback(data);
  }, 1000);
}

function displayData(data) {
  console.log(data);
}

fetchData(displayData);
// 1초 후 출력: 서버에서 가져온 데이터

2. 콜백 지옥

콜백 함수를 중첩하여 사용하면 코드가 복잡해지는 문제를 콜백 지옥(callback hell)이라고 합니다.

function first(callback) {
  setTimeout(function() {
    console.log("첫 번째 작업 완료");
    callback();
  }, 1000);
}

function second(callback) {
  setTimeout(function() {
    console.log("두 번째 작업 완료");
    callback();
  }, 1000);
}

function third(callback) {
  setTimeout(function() {
    console.log("세 번째 작업 완료");
    callback();
  }, 1000);
}

first(function() {
  second(function() {
    third(function() {
      console.log("모든 작업 완료");
    });
  });
});
// 1초 후 출력: 첫 번째 작업 완료
// 2초 후 출력: 두 번째 작업 완료
// 3초 후 출력: 세 번째 작업 완료
// 3초 후 출력: 모든 작업 완료

프로미스 (Promises)

프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. 콜백 지옥 문제를 해결하기 위해 도입되었습니다.

1. 프로미스 생성

let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    let success = true;
    if (success) {
      resolve("작업 성공");
    } else {
      reject("작업 실패");
    }
  }, 1000);
});

2. 프로미스 사용

promise.then(function(result) {
  console.log(result);  // 출력: 작업 성공
}).catch(function(error) {
  console.log(error);
});

3. 프로미스 체이닝

프로미스를 체인 형태로 연결하여 순차적으로 작업을 처리할 수 있습니다.

function first() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      console.log("첫 번째 작업 완료");
      resolve();
    }, 1000);
  });
}

function second() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      console.log("두 번째 작업 완료");
      resolve();
    }, 1000);
  });
}

function third() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      console.log("세 번째 작업 완료");
      resolve();
    }, 1000);
  });
}

first().then(second).then(third).then(function() {
  console.log("모든 작업 완료");
});
// 1초 후 출력: 첫 번째 작업 완료
// 2초 후 출력: 두 번째 작업 완료
// 3초 후 출력: 세 번째 작업 완료
// 3초 후 출력: 모든 작업 완료

async/await

async와 await는 프로미스를 더 간결하게 사용할 수 있도록 도와주는 문법입니다.

1. async/await 예제

function fetchData() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve("서버에서 가져온 데이터");
    }, 1000);
  });
}

async function displayData() {
  let data = await fetchData();
  console.log(data);
}

displayData();
// 1초 후 출력: 서버에서 가져온 데이터

2. try...catch를 사용한 에러 처리

async와 await 문법에서는 try...catch를 사용하여 에러를 처리할 수 있습니다.

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      let success = false;
      if (success) {
        resolve("서버에서 가져온 데이터");
      } else {
        reject("데이터 가져오기 실패");
      }
    }, 1000);
  });
}

async function displayData() {
  try {
    let data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

displayData();
// 1초 후 출력: 데이터 가져오기 실패

결론

비동기 프로그래밍은 JavaScript에서 중요한 개념입니다. 콜백, 프로미스, async/await을 이해하고 활용하면 비동기 작업을 효율적으로 관리할 수 있습니다.

다음 글에서는 모듈과 패키지 관리에 대해 알아보겠습니다.

다음 글에서 만나요!