JavaScript 비동기 처리

🚀 자바스크립트 비동기 처리: Callback, Promise, async/await

자바스크립트는 싱글 스레드 언어입니다. 하지만 비동기 처리를 통해 웹 페이지가 멈추지 않고 네트워크 요청, 타이머, 파일 읽기 등을 처리할 수 있습니다.

이번 강의에서는 자바스크립트의 비동기 처리 방식인 콜백 함수(Callback), 프로미스(Promise), 그리고 async/await의 개념과 사용법을 소개합니다.

🪝 1. 콜백 함수 (Callback)

콜백 함수는 다른 함수에 인자로 전달되어 특정 작업이 끝난 후 실행되는 함수입니다.

function greet(name, callback) {
  console.log("안녕하세요, " + name + "님!");
  callback();
}

function finish() {
  console.log("방문해주셔서 감사합니다.");
}

greet("홍길동", finish);
// 출력:
// 안녕하세요, 홍길동님!
// 방문해주셔서 감사합니다.

⚠️ 콜백 지옥(callback hell)은 중첩이 심해지며 가독성이 떨어지는 단점이 있습니다.

💎 2. 프로미스 (Promise)

Promise는 비동기 작업의 성공(resolve) 또는 실패(reject)를 나타내는 객체입니다.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve("데이터 가져오기 성공!");
      } else {
        reject("실패했습니다.");
      }
    }, 1000);
  });
};

fetchData()
  .then(result => console.log(result))
  .catch(error => console.error(error));

✔. then()은 성공,. catch()는 실패 시 실행됩니다.

✨ 3. async/await (ES2017+)

async/await은 Promise를 동기 코드처럼 읽기 쉽게 작성할 수 있게 해 줍니다.

async function getData() {
  try {
    const result = await fetchData();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

getData();

💡 await는 Promise가 처리될 때까지 기다리며, try/catch로 에러를 처리합니다.

📌 정리:
• Callback: 함수 안에 또 다른 함수 호출
• Promise: then/catch로 비동기 결과 처리
• async/await: 가독성 향상, try/catch로 오류 처리

🧪 실전 예제: 가상의 API 호출

function fakeAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ message: "서버 응답 완료!" });
    }, 1500);
  });
}

async function showAPIResult() {
  const data = await fakeAPI();
  console.log(data.message);
}

showAPIResult(); // "서버 응답 완료!"

✅ 마무리

• 콜백 함수는 간단한 비동기 처리에 유용하지만 중첩 문제 있음
• Promise는 then/catch 패턴으로 구조화된 비동기 처리 제공
• async/await는 가장 현대적이고 가독성 높은 방법

비동기 처리는 자바스크립트에서 가장 중요한 개념 중 하나입니다. 오늘 배운 내용을 기반으로 API 통신, 파일 업로드, 타이머 등 다양한 비동기 작업에 활용해 보세요!