자바스크립트 비동기 프로그래밍 마스터하기: 콜백부터 Promise, async/await까지

1. 비동기 프로그래밍이란 무엇일까요?

1.1. 동기 vs 비동기

프로그래밍에는 크게 동기와 비동기 방식이 존재합니다.

• 동기: 코드가 순차적으로 실행되며, 이전 작업이 완료될 때까지 다음 작업을 기다립니다.
• 비동기: 코드가 동시에 여러 작업을 처리하며, 특정 작업이 완료되지 않아도 다음 작업을 실행합니다.

1.2. 비동기 프로그래밍이 왜 중요할까요?

웹 애플리케이션에서는 서버와의 통신, 파일 처리 등 시간이 오래 걸리는 작업들이 존재합니다. 이러한 작업들을 동기적으로 처리하면 웹 페이지가 멈추는 현상이 발생하여 사용자 경험을 저해할 수 있습니다. 비동기 프로그래밍을 사용하면 이러한 문제점을 해결하고, 사용자가 웹 페이지와 끊임없이 상호작용할 수 있도록 만들 수 있습니다.

2. 비동기 프로그래밍의 핵심: 콜백 함수

2.1. 콜백 함수란?

콜백 함수는 다른 함수에 인자로 전달되어 특정 시점에 실행되는 함수입니다. 비동기 작업이 완료되었을 때 실행되어 결과를 처리하는 역할을 합니다.

2.2. 콜백 함수의 구조

function fetchData(callback) {
  setTimeout(() => {
    const data = "서버에서 받은 데이터";
    callback(data);
  }, 2000); // 2초 후에 데이터 반환
}

function processData(data) {
  console.log("처리된 데이터:", data);
}

fetchData(processData); // fetchData를 호출하면서 processData를 콜백 함수로 전달

위 코드에서 fetchData 함수는 2초 후에 "서버에서 받은 데이터"를 반환합니다. 이때 processData 함수가 콜백 함수로 전달되어, 데이터가 준비되면 processData 함수가 실행됩니다.

2.3. 콜백 함수의 활용 예시

• 사용자 입력 처리: 사용자가 버튼을 클릭하는 등의 이벤트를 처리할 때 콜백 함수를 사용합니다.
• AJAX 요청 처리: 서버와 비동기적으로 통신할 때 콜백 함수를 사용하여 서버에서 받은 데이터를 처리합니다.
• 타이머 설정: setTimeout 또는 setInterval 함수를 사용하여 특정 시간 후에 코드를 실행하거나 반복적으로 코드를 실행할 때 콜백 함수를 사용합니다.

3. 콜백 지옥과 그 해결책: Promise

3.1. 콜백 지옥이란?

콜백 함수가 중첩되어 코드가 복잡해지는 현상을 콜백 지옥이라고 합니다. 콜백 지옥은 코드의 가독성을 떨어뜨리고, 에러 처리를 어렵게 만드는 단점이 있습니다.

3.2. Promise란?

Promise는 비동기 작업의 결과를 나타내는 객체입니다. Promise를 사용하면 콜백 함수를 중첩하지 않고 비동기 코드를 깔끔하게 작성할 수 있습니다.

3.3. Promise의 상태

Promise는 세 가지 상태를 가집니다.

• Pending (대기): 비동기 작업이 아직 완료되지 않은 상태
• Fulfilled (성공): 비동기 작업이 성공적으로 완료된 상태
• Rejected (실패): 비동기 작업이 실패한 상태

3.4. Promise 사용법

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "서버에서 받은 데이터";
      resolve(data); // 성공 시 resolve 호출
      // reject("데이터를 가져오는 데 실패했습니다."); // 실패 시 reject 호출
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log("처리된 데이터:", data);
  })
  .catch(error => {
    console.error("에러 발생:", error);
  });

fetchData 함수는 Promise 객체를 반환합니다. then 메서드를 사용하여 Promise가 성공했을 때 실행할 코드를 작성하고, catch 메서드를 사용하여 실패했을 때 실행할 코드를 작성합니다.

4. async/await: 비동기 코드를 동기 코드처럼

4.1. async/await란?

async/await는 Promise를 더욱 쉽게 사용할 수 있도록 해주는 문법입니다. async/await를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 코드의 가독성을 높일 수 있습니다.

4.2. async/await 사용법

async function processData() {
  try {
    const data = await fetchData(); // fetchData()가 Promise를 반환하므로 await 사용 가능
    console.log("처리된 데이터:", data);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

processData();

async 함수 내에서 await 키워드를 사용하면 Promise가 완료될 때까지 기다립니다. try/catch 문을 사용하여 에러를 처리할 수 있습니다.

5. 결론: 비동기 프로그래밍, 이제는 두렵지 않아요!

비동기 프로그래밍은 자바스크립트 개발에 있어서 필수적인 개념입니다. 콜백 함수부터 Promise, async/await까지 다양한 방법을 통해 비동기 코드를 효율적으로 작성할 수 있습니다. 이번 포스트를 통해 비동기 프로그래밍에 대한 이해도를 높이고, 실제 개발에 적극적으로 활용해 보세요!