Fetch와 Ajax의 차이

동기, 비동기란 방식이란?

자바스크립트 비동기 처리

• 콜백 함수 사용:
  • 다른 함수에 매개변수로 넘겨준 함수
• Promise 방식 사용
  • 비동기 작업의 결과를 표현한 객체로 작업의 성공, 실패를 다룸
    • 요청 성공시 → .then() 실행
    • 요청 실패시 → .catch() 실행

Ajax

AJAX (Asynchronous JavaScript and XML)

• 정의: 웹페이지 전체 리로드 없이 서버와 비동기적으로 데이터를 교환할 수 있는 기술
• 특징
  • 서버에 요청을 보내고, 페이지를 새로 고치지 않고도 데이터를 업데이트할 수 있음
  • XMLHttpRequest 객체를 사용하여 서버와 통신
• 장점
  • 범용성: 모든 현대 브라우저에서 지원 가능 (Ajax가 오래된 방식이기 때문)
  • 유연성 : 다양한 데이터 형식 (JSON, XML, HTML, 텍스트 등)을 지원
• 단점
  • 콜백함수 사용 → 복잡하고 가독성이 떨어짐

document.getElementById('fetchDataButton').addEventListener('click', function() {
            // XMLHttpRequest 객체 생성
            var xhr = new XMLHttpRequest();

            // 요청 초기화: GET 방식, URL 설정
            xhr.open('GET', 'http://localhost:3000/api/posts', true);

            // 응답 처리
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) { // 요청이 완료되었을 때 // 
                    if (xhr.status === 200) { // 요청이 성공했을 때
                        // JSON 문자열을 JavaScript 객체로 변환
                        var data = JSON.parse(xhr.responseText);
                        // 결과를 출력
                        document.getElementById('output').textContent = JSON.stringify(data, null, 2);
                    } else {
                        console.error('데이터를 가져오는 데 실패했습니다:', xhr.status);
                    }
                }
            };
            // 요청 전송
            xhr.send();
        });

Fetch

• 정의: JavaScript에서 서버에 네트워크 요청을 보내고 응답을 받아오는 API
• 특징
  • Promise 기반으로 동작하여, 비동기 처리를 더 쉽게 할 수 있습니다.
  • fetch는 기본적으로 JSON 형식의 응답을 처리할 수 있으며, 다양한 HTTP 요청(POST, PUT, DELETE 등)을 지원합니다.
• 장점:
  • 기본적으로 Promise 지원: Async/Await 와 쉽게 통합됨
  • 간결한 구문: Promise 사용하여 비동기 요청을 더 간결하게 작성 가능
• 단점
  • 브라우저 호환성: Fetch는 2015년에 처음 등장했기 때문에 구형 브라우저에서는 지원되지 않을 수도 있음
  • 기본적으로 쿠키를 보내지 않음: 자격 증명이 필요한 요청에 대해 별도의 설정이 필요함

// GET 요청
fetch('http://localhost:3000/api/posts'); 

// POST 요청
fetch('http://localhost:3000/api/posts', {
    method: 'POST', // POST 요청
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
});

community 과제 활용 예시

// postDetail.html
// 게시글 상세 페이지   
// URL의 쿼리 문자열에서 파라미터를 가져옴
const params = new URLSearchParams(window.location.search);

// 'id'라는 이름의 쿼리 파라미터에서 게시글 ID를 가져옴
const postId = params.get('id'); // 게시글 ID

// 게시글 ID가 없는 경우 에러 메시지 출력
if (!postId) {
    console.error('게시글 ID가 없습니다.'); // 콘솔에 에러 메시지 출력
    alert('게시글 ID가 필요합니다.'); // 사용자에게 알림
} else {
   
    async function fetchPost() {  // Post는 게시글을 뜻함, 요청타입 POST아님
        try {
            // 주어진 게시글 ID를 사용하여 API 요청을 보냄      더미서버 port: 3000
            const response = await fetch(`http://localhost:3000/api/posts/${postId}`);
       
           
            if (!response.ok) {
                throw new Error('게시글을 불러오는 데 실패했습니다.'); // 에러 메시지
            }
            
            // 요청한 postId에 대한 JSON 객체를 post 변수에 담음
						const post = await response.json();
            
            // 게시글 정보를 HTML 요소에 출력
            document.getElementById('postTitle').innerText = post.title; 
            document.getElementById('postContent').innerText = post.content; 
            document.getElementById('postUsername').innerText = post.username || "작성자 정보 없음"; 
            document.getElementById('postLike').innerText = post.like;
            document.getElementById('postImage').src = 'http://localhost:3000/photo_4.jpeg'; 
            document.getElementById('postVisitor').innerText = post.visitor; 
            document.getElementById('postComment').innerText = post.comment; 
            
 
            // 수정 버튼의 링크에 게시글 ID 추가
            document.getElementById('editButton').href = `./edit.html?id=${postId}`;
        } catch (error) {
            
            console.error('게시글 가져오기 오류:', error);
            alert('게시글을 불러오는 데 문제가 발생했습니다.'); 
        }
    }  // fetchPost 함수 정의 끝

    // fetchPost 함수 호출하여 게시글 정보를 가져옴
    fetchPost();
}

정리

항목	Fetch	Ajax
개념	AJAX는 JavaScript를 사용하여 비동기적으로 데이터를 요청하고 처리하는 기술.	Fetch는 Promise 기반의 API로, 네트워크 요청을 수행하고 응답을 처리하기 위한 현대적인 방법.
사용법	XMLHttpRequest 객체를 사용하여 요청을 보내고 응답을 처리.	fetch() 함수를 호출하여 요청을 보내고 Promise를 통해 응답을 처리.
응답 처리	콜백 함수를 사용하여 응답을 처리 (가독성이 떨어질 수 있음).	then() 및 catch()를 사용하여 응답과 오류를 처리, 또는 async/await로 사용 가능.
지원하는 형식	JSON, XML, HTML 등 다양한 형식 지원.	기본적으로 JSON, 그러나 다양한 형식으로 처리 가능.
에러 처리	HTTP 오류를 직접 확인해야 함.	response.ok로 간편하게 상태를 확인하고 에러를 처리 가능.
CORS 처리	CORS에 대한 설정이 복잡할 수 있음.	CORS 처리가 간단하고 더 나은 지원을 제공.
브라우저 호환성	오래된 브라우저에서도 잘 동작.	최신 브라우저에 최적화되어 있으며 구형 브라우저는 폴리필 필요.