[JavaScript] Ajax와 Fetch에 대해서 말씀하세요

# 질의 응답 상황

[면접관]

지원자님 FrontEnd 경력이 있으신데, Ajax와 Fetch에 대해서 간략하게 설명해주세요.

 

[막개발자] 

[Ajax] Ajax는 JavaScript를 사용한 비동기 통신 방식으로 클라이언트(Client)와 서버(Server) 간에 XML 데이터를 주고받는 기술입니다. 여기서 말하는 비동기 통신이란, 클라이언트가 서버에 요청을 한 후, Response가 올 때까지 멈추어 있는 것이 아니라, 그 프로그램은 계속 돌아간다는 의미입니다. Ajax를 사용하여 비동기 통신을 통해 웹페이지를 Reload하지 않고 데이터를 주고받을 수 있습니다. [Fetch] Fetch는 비동기 서버 통신 방식인 Ajax의 최신 기술로 Promise 방식을 기반으로 동작하는 것이 특징입니다. Return이 Promise 객체라, then 키워드를 통해 fetch로 서버에 요청 후에 동작해야 될 내용을 정해줄 수 있습니다.

 

 

# 상세 설명

1. AJAX (Asynchronous JavaScript and XML)

AJAX는 웹 애플리케이션이 비동기적으로 서버와 데이터를 교환할 수 있게 해주는 기술입니다. AJAX를 사용하면 페이지 전체를 다시 로드하지 않고도 데이터를 가져오거나 보낼 수 있습니다.

특징

• 비동기 처리: 요청과 응답이 별도의 작업으로 처리되어, 페이지의 다른 작업을 방해하지 않습니다.
• 브라우저 지원: 대부분의 현대적인 브라우저에서 지원.
• XMLHttpRequest 객체 사용: 서버와 데이터를 교환하기 위한 핵심 객체입니다.
• 다양한 데이터 형식 지원: XML, JSON, HTML, 텍스트 등 다양한 형식으로 데이터를 주고받을 수 있습니다.

주요 목적

• 사용자 경험(UX) 향상
• 페이지 리로드 없이 동적인 데이터 업데이트

AJAX 사용 예제
AJAX는 XMLHttpRequest 객체를 이용하여 구현됩니다.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true); // 비동기 GET 요청
xhr.onload = function () {
    if (xhr.status === 200) {
        console.log("Response:", xhr.responseText); // 성공적으로 응답 받음
    } else {
        console.error("Error:", xhr.statusText);
    }
};
xhr.onerror = function () {
    console.error("Request failed");
};
xhr.send(); // 요청 전송

AJAX의 단점

• 코드 복잡성: 콜백 지옥(CallBack Hell) 문제로 인해 코드 관리가 어려움.
• JSON 파싱 필요: 데이터를 JSON으로 처리할 때, 추가적인 작업이 필요.
• 모던 API에 비해 불편: fetch 및 axios와 같은 최신 API와 비교하여 가독성이 떨어짐.

2. Fetch API

Fetch API는 AJAX의 대안으로 등장한 현대적인 API입니다. 서버와의 데이터 교환을 단순화하고, 프로미스(Promise) 기반으로 비동기 요청을 처리합니다.

특징

• Promise 기반: AJAX와 달리 프로미스를 사용하여 더 직관적이고 깔끔한 비동기 코드를 작성 가능.
• 모던 브라우저에서 기본 지원: 최신 웹 표준에 포함된 API로, 대부분의 최신 브라우저에서 사용 가능.
• JSON 기본 지원: 서버에서 JSON 데이터를 받아오는 작업이 간편함.
• Request와 Response 객체 사용: 요청과 응답을 객체로 다루기 때문에 구조화된 코드 작성 가능.

Fetch 사용 예제
다음은 Fetch API를 사용하여 서버에서 데이터를 가져오는 코드입니다.

fetch("https://api.example.com/data")
    .then(response => {
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        return response.json(); // JSON 형식으로 응답을 파싱
    })
    .then(data => {
        console.log("Data:", data);
    })
    .catch(error => {
        console.error("Fetch error:", error);
    });

Fetch의 장점

• 문법 간결: 프로미스를 사용하여 코드가 깔끔하고 읽기 쉬움.
• JSON 기본 지원: response.json() 메서드를 통해 JSON 데이터 파싱이 간단.
• 체이닝 가능: 프로미스 체이닝을 활용한 비동기 코드 작성 용이.
• 모던 브라우저 최적화: 최신 브라우저에서 더 빠르게 동작.

Fetch의 단점

• 에러 처리 부족: 네트워크 에러만 잡아내며, HTTP 상태 코드(예: 404, 500)는 명시적으로 처리해야 함.
• CORS 문제: 다른 도메인의 리소스에 접근할 때 CORS(Cross-Origin Resource Sharing) 설정이 필요.

AJAX와 Fetch 비교

 

특징	AJAX	Fetch
지원 브라우저	오래된 브라우저에서도 사용 가능	최신 브라우저에서 기본 지원
비동기 처리 방식	콜백 기반 (XMLHttpRequest 객체)	Promise 기반
JSON 파싱	수동으로 JSON 파싱 (JSON.parse)	자동 제공 (response.json())
가독성	콜백 중첩으로 코드가 복잡해질 수 있음	체이닝 및 async/await으로 가독성이 높음
에러 처리	네트워크 및 HTTP 상태 코드 처리 가능	네트워크 에러만 처리 가능 (HTTP 상태 코드는 추가 처리 필요)
코드 복잡성	복잡하고 가독성이 낮음	더 간결하고 직관적
CORS 처리	제한적	추가 설정 필요

추천 사용 시점

• AJAX: 레거시 프로젝트나 구형 브라우저 지원이 필요한 경우. 과거 코드와의 호환성 유지가 필요한 경우.
• Fetch: 모던 웹 애플리케이션. 더 직관적이고 간단한 비동기 코드를 작성하려는 경우. 최신 브라우저를 주로 사용하는 환경.

결론

AJAX와 Fetch는 각각 비동기 데이터 처리를 위한 도구로, AJAX는 오래된 방법론이지만 여전히 유효하며, Fetch는 간결하고 현대적인 대안입니다. Fetch는 최신 프로젝트에서 주로 사용되며, 프로미스 기반의 코드 작성 방식을 통해 가독성과 유지보수성을 높입니다.