콜백함수, Promise, Async/await / Ajax, Fetch, Axios

콜백함수

• 함수에 매개변수로 전달되는 함수
• 주로 비동기 작업의 결과를 처리할 때 사용

function fetchData(callback) {
  setTimeout(() => {
    const data = '데이터 도착';
    callback(data);
  }, 1000);
}

fetchData((result) => {
  console.log(result); // "데이터 도착"
});

단점

• 콜백 함수 안에 콜백 함수가 들어가 콜백 지옥에 빠질 수 있음
• 복잡함, 가독성 떨어짐

 

Promise

• 비동기 작업의 성공과 실패를 작업하는 객체
• 콜백 지옥을 해결하기 위해 나옴
• then, catch, finally 를 사용해 결과를 처리

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('데이터 도착');
    }, 1000);
  });
};

fetchData()
  .then((result) => console.log(result)); // 데이터 도착
  .catch((error) => console.error(error));

장점

• 콜백 지옥 방지
• 에러처리 깔끔

 

Async/await

• async 함수 내에서 await 키워드 사용하면 promise의 결과를 동기식처럼 기다릴 수 있음

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve('데이터 도착'), 1000);
  });
};

async function getData() {
  const result = await fetchData();
  console.log(result); // 데이터 도착
}

getData();

장점

• promise 쓸 때 보다 코드가 더 간결해짐
• try-catch로 에러 처리 직관적으로 가능

 

Ajax

• 브라우저에서 서버와 데이터를 비동기적으로 주고받는 기술
• 예전에는 XMLHttpRequest 객체를 사용했지만, 요즘은 fetch 나 axios 로 대체됨.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data");
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

단점

• 문법이 복잡하고 불편함
• 최신 방식(fetch, axios) 에 비해 가독성, 유지보수성 떨어짐

 

Fetch API

• XMLHttpRequest 를 대체하는 최신 브라우저 내장 API
• promise 기반으로 사용

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

특징

• 기본적으로 JSON 처리에 적합
• async/await 와 함께 자주 사용됨

 

Axios

• promise 기반의 외부 HTTP 클라이언트 라이브러리
• fetch 보다 기능이 많고 편의성 높음

import axios from 'axios';

axios.get("https://api.example.com/data")
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

장점

• 자동 JSON 변환
• 요청/응답 인터셉터
• 타입아웃 설정, 에러 처리 강화

 

 

전체 과정

API 서버 → fetch / axios 로 요청 → Promise 반환 → then() / async/await 로 결과 처리

 

 

 

정리

• 콜백 함수는 비동기 처리에서 결과를 전달하기 위해 자주 사용되는 방식으로, 함수의 인자로 전달되어 나중에 실행
• Promise는 비동기 작업의 결과를 표현하는 객체로, 콜백 지옥을 피하고 체이닝이 가능한 then, catch 문법을 제공
• Async/await는 Promise를 기반으로 비동기 코드를 더 간결하고 동기식처럼 작성할 수 있도록 도와주는 문법
• AJAX는 웹 페이지를 새로고침하지 않고 서버와 데이터를 주고받는 방식이며, 과거엔 주로 XMLHttpRequest를 통해 구현됐지만 현재는 fetch나 axios 같은 현대적 방식으로 대체
• Fetch API는 XMLHttpRequest를 대체하는 최신 브라우저 내장 api로 promise 기반으로 사용
• Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 비동기 통신을 더 쉽게 처리할 수 있으며 자동 JSON 파싱, 인터셉터 등 다양한 편의 기능을 제공