2. jQuery AJAX vs fetch

강성관·2025년 4월 9일

Fetch ajax jquery json

알고 쓰는 웹 기술

목록 보기

2/3

jQuery AJAX vs fetch - 무엇이 다를까?

웹 개발에서 서버와 데이터를 주고받기 위한 비동기 통신 방식으로
jQuery의 $.ajax()와 JavaScript의 fetch()는 자주 비교된다.

두 방법 모두 AJAX(Asynchronous JavaScript and XML) 기반이지만,
사용 방식, 에러 처리, 의존성 등에서 여러 차이가 존재한다.

이번 포스팅에서는 코드적인 문법이 아닌,
비코드 관점에서의 주요 차이점들을 정리해본다.

✅ 요약 비교표

항목	jQuery `$.ajax()`	JavaScript `fetch()`
의존성	jQuery 라이브러리 필요	브라우저 내장 기능 (ES6+)
브라우저 지원	IE 포함 대부분 완벽 지원	IE 미지원 (폴리필 필요)
에러 처리	HTTP 오류 포함 `error` 콜백	HTTP 오류는 `catch`로 안 감, `response.ok`로 체크해야 함
기본 전송 방식	`application/x-www-form-urlencoded` 자동 처리	기본은 `text/plain`, 직접 명시 필요
자동화 수준	데이터 자동 인코딩, 헤더 설정 등 다양	개발자가 모든 것을 명시적으로 처리해야 함
사용 편의성	초보자 친화적, 빠른 개발 가능	코드 간결하지만 예외 처리 구조는 다소 복잡
현대 개발 트렌드	레거시 프로젝트에서 많이 사용	최신 프레임워크(React, Vue 등)와 궁합 좋음

🔍 1. 의존성과 설치 여부

$.ajax()는 jQuery 라이브러리가 필수이다.
fetch()는 브라우저 내장 API로 별도 설치 없이 사용 가능하다.

따라서 요즘은 jQuery 없이 개발하는 경우가 많기 때문에 fetch가 기본 선택지가 된다.

🔍 2. 브라우저 호환성

jQuery는 오래된 브라우저(특히 IE)까지도 잘 지원한다.
fetch는 IE에서는 기본적으로 작동하지 않으며, 필요하면 폴리필(polyfill)을 추가해야 한다.

✅ 레거시 브라우저까지 고려한다면 jQuery
✅ 최신 환경 위주라면 fetch가 자연스럽다

레거시(Legacy)란? 오래되었지만 여전히 사용되고 있는 구식 시스템이나 기술을 의미한다.

🔍 3. 에러 처리 방식

jQuery

$.ajax({
  ...
  error: function(xhr, status, error) {
    console.log("에러 발생:", error);
  }
});

fetch

fetch('/api')
  .then(response => {
    if (!response.ok) throw new Error('HTTP 오류!');
    return response.json();
  })
  .catch(error => {
    console.error('실제 네트워크 오류:', error);
  });

jQuery는 404, 500 같은 HTTP 오류도 error 콜백으로 자동 분기된다.
fetch는 catch는 네트워크 오류만 잡고,
HTTP 오류는 response.ok`로 직접 검사해야 한다.
fetch의 예외 처리 구조는 다소 복잡하다.

🔍 4. 자동화 수준

jQuery는 데이터 객체를 넘기면 자동으로 URL 인코딩, 헤더 설정, 캐시 방지 등도 해준다.
fetch는 데이터를 보낼 때 직접 JSON.stringify(), 헤더 설정을 해야 한다.

// jQuery
data: { name: "홍길동" }

// fetch
fetch('/api/sendMsg', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    sender_no: senderNo,
    room_no: roomNo,
    receiver_no: receiverNo,
    msg_content: msgContent
  })
})
.then(res => res.json())
.then(data => {
  console.log('응답:', data);
});

🔍 5. 개발 스타일과 트렌드

jQuery는 초보자나 빠른 UI 시제품 개발에 적합하며, 기존 코드 유지보수 시 유용하다.
fetch는 React, Vue, Svelte 등 최신 프레임워크와 잘 어울리는 방식이며,
axios 같은 더 강력한 대안으로도 확장 가능하다.

✅ 결론

상황	추천 방식
레거시 프로젝트 유지보수	`jQuery.ajax()`
최신 프레임워크 사용	`fetch()` 또는 `axios`
빠른 프로토타이핑	`jQuery.ajax()`
가볍고 라이브러리 없는 개발	`fetch()`