[JAVA SCRIPT] 비동기 통신의 혁명 AJAX란 무엇인가? 실무 해결 방법 7가지와 기술 차이 분석

AJAX

웹 애플리케이션의 사용자 경험(UX)을 결정짓는 가장 중요한 요소 중 하나는 '페이지 새로고침 없는 데이터 갱신'입니다. 이를 가능하게 한 핵심 기술이 바로 AJAX(Asynchronous JavaScript and XML)입니다. 본 가이드에서는 AJAX의 본질부터 최신 비동기 통신 기법과의 차이점, 그리고 실무에서 즉시 활용 가능한 고급 예제 7가지를 상세히 다룹니다.

---

1. AJAX의 정의와 현대적 가치

AJAX는 특정 기술 하나를 지칭하는 것이 아니라, HTML, CSS, JavaScript, DOM, 그리고 가장 중요한 XMLHttpRequest 객체를 결합하여 사용하는 '접근 방식'입니다. 과거에는 서버로부터 새로운 데이터를 받기 위해 페이지 전체를 다시 로드해야 했지만, AJAX의 등장으로 필요한 부분의 데이터만 서버와 주고받아 화면을 부분적으로 갱신할 수 있게 되었습니다.

오늘날에는 XML 대신 JSON(JavaScript Object Notation) 형식을 주로 사용하며, fetch API나 Axios 같은 라이브러리가 AJAX의 개념을 계승하여 더욱 발전된 형태로 사용되고 있습니다.

2. AJAX vs 전통적인 방식 vs Fetch API 차이 비교

기술의 변화 흐름을 이해하기 위해 전형적인 통신 방식과 AJAX, 그리고 최신 표준인 Fetch API를 비교해 보겠습니다.

구분	전통적 동기 방식	XMLHttpRequest (AJAX)	Fetch API (Modern AJAX)
새로고침 유무	페이지 전체 새로고침 발생	새로고침 없이 부분 갱신	새로고침 없이 부분 갱신
비동기 처리	불가능 (블로킹 발생)	가능 (콜백 함수 기반)	가능 (Promise/async-await 기반)
데이터 형식	HTML 위주	XML, JSON, Text 등	JSON, Blob, FormData 등 다양함
복잡도	낮음	높음 (이벤트 리스너 복잡)	낮음 (가독성 우수)

3. 실무 비동기 통신 해결 방법: 필수 Example 7가지

개발자가 실무 프로젝트에서 마주칠 수 있는 상황별 AJAX 및 비동기 처리 구현 예제입니다.

#1. 기본 XMLHttpRequest를 이용한 GET 요청 (레거시 대응)

가장 원초적인 AJAX 방식입니다. 오래된 브라우저 환경을 지원해야 할 때 유용합니다.

function loadDataLegacy(url) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            console.log('Success:', data);
        }
    };
    xhr.send();
}
        

#2. Fetch API를 활용한 JSON 데이터 POST 전송

현대적인 표준 방식으로, 서버에 데이터를 저장하거나 생성할 때 사용합니다.

async function postData(url = '', data = {}) {
    const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    });
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
}
        

#3. Async/Await와 Try-Catch를 이용한 견고한 에러 핸들링

비동기 통신 중 발생할 수 있는 네트워크 오류나 서버 에러를 처리하는 가장 깔끔한 방법입니다.

async function safeFetch(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP Error: ${response.status}`);
        }
        const result = await response.json();
        renderUI(result);
    } catch (error) {
        console.error('통신 실패 상세:', error.message);
        alert('데이터를 가져오는 중 문제가 발생했습니다.');
    }
}
        

#4. AbortController를 이용한 요청 취소 (Search UX 최적화)

사용자가 검색어를 입력할 때, 이전의 불필요한 API 요청을 취소하여 네트워크 자원을 아낍니다.

let controller;
function searchApi(query) {
    if (controller) controller.abort(); // 이전 요청 취소
    controller = new AbortController();

    fetch(`/api/search?q=${query}`, { signal: controller.signal })
        .then(res => res.json())
        .then(data => console.log(data))
        .catch(err => {
            if (err.name === 'AbortError') console.log('Previous request cancelled');
        });
}
        

#5. 다중 API 호출 병렬 처리 (Promise.all)

여러 개의 데이터를 동시에 받아와야 할 때 대기 시간을 최소화하는 방법입니다.

async function fetchMultipleResources() {
    const urls = ['/api/user', '/api/posts', '/api/settings'];
    try {
        const results = await Promise.all(urls.map(url => fetch(url).then(res => res.json())));
        const [user, posts, settings] = results;
        console.log('All data loaded:', user, posts, settings);
    } catch (err) {
        console.error('One or more requests failed');
    }
}
        

#6. FormData를 이용한 이미지 파일 업로드

AJAX를 통해 바이너리 파일(이미지, 문서 등)을 서버로 전송하는 실무 핵심 로직입니다.

async function uploadImage(fileField) {
    const formData = new FormData();
    formData.append('profile_img', fileField.files[0]);

    const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
    });
    return response.json();
}
        

#7. 재시도 로직이 포함된 스마트 페치 (Retry Logic)

일시적인 네트워크 불안정 시 자동으로 최대 3번까지 재시도하는 고급 함수입니다.

async function fetchWithRetry(url, options = {}, retries = 3) {
    try {
        const response = await fetch(url, options);
        if (!response.ok && retries > 0) throw new Error('Retry needed');
        return await response.json();
    } catch (err) {
        if (retries > 0) {
            console.log(`Retrying... (${retries} left)`);
            return fetchWithRetry(url, options, retries - 1);
        }
        throw err;
    }
}
        

4. AJAX 보안 및 주의사항 (CORS와 CSRF)

비동기 통신 시 반드시 고려해야 할 두 가지 보안 이슈가 있습니다.

• CORS (Cross-Origin Resource Sharing): 보안상의 이유로 브라우저는 다른 도메인으로의 AJAX 요청을 제한합니다. 서버 설정에서 허용된 도메인인지 확인이 필요합니다.
• CSRF (Cross-Site Request Forgery): 비동기 요청 시 인증 토큰(CSRF Token)을 헤더에 포함하여 악의적인 사이트에서의 요청을 방지해야 합니다.

5. 결론: 왜 지금도 AJAX인가?

기술의 이름은 변해왔지만(XMLHttpRequest -> Fetch -> Axios), 페이지를 새로고침하지 않고 서버와 통신하는 비동기 철학은 현대 웹 개발의 표준이 되었습니다. SPA(Single Page Application) 라이브러리인 React, Vue, Angular 역시 그 근간은 AJAX 원리에 기반하고 있습니다. 이 기술을 완벽히 이해하는 것은 프론트엔드 개발자로서의 전문성을 증명하는 첫걸음입니다.

내용 출처 및 참고 자료

1. MDN Web Docs - AJAX 소개: developer.mozilla.org/ko/docs/Web/Guide/AJAX
2. Google Developers - 비동기 데이터 통신 가이드
3. W3Schools - JavaScript AJAX References
4. ECMA-262 Standard - ECMAScript Language Specification