Ajax와 Fetch

💡Ajax 란?

- 자바스크립트에서 웹 페이지를 부분적으로 바꾸는 라이브러리.

- 웹페이지를 새로고침해서 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있기 때문에 '비동기 기법'이라고 할 수 있다. 

Ajax는 왜 비동기 기법인가?

비동기(Asynchronous)란 어떤 작업이 끝날 때까지 기다리지 않고 다음 작업을 실행하는 방식. 즉, 요청을 보낸 후 서버의 응답을 기다리는 동안 웹페이지가 멈추지 않고 다른 작업을 계속할 수 있음.

-> 부분적으로 변경하려는 요청을 한 후, 응답이 올 때까지 웹페이지를 조작할 수 있음

console.log("1. 요청 보내기");

fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then(response => response.json()) 
    .then(data => console.log("3. 응답 받음:", data));

console.log("2. 요청을 보낸 후 다른 작업 수행");


***출력 결과(비동기적 실행)***
1. 요청 보내기
2. 요청을 보낸 후 다른 작업 수행
3. 응답 받음: { userId: 1, id: 1, title: 'delectus aut autem', completed: false }

 

1️⃣ 업로드하려는 부분을 변경하고 싶다고 요청을 보냄

• 사용자가 어떤 입력을 하면, JavaScript가 AJAX 요청(fetch() 등)을 서버로 보냄.
• 이때, 필요한 데이터만 요청하지, HTML 전체를 요청하는 게 아님.

2️⃣ 요청하는 동안 웹페이지는 그대로 유지됨 (비동기 방식)

• AJAX는 비동기(Asynchronous) 방식이므로 서버의 응답을 기다리는 동안 웹페이지가 멈추지 않음.
• 즉, 서버와 통신하는 동안에도 사용자는 웹페이지를 계속 볼 수 있고, 다른 작업도 할 수 있음.
• 만약 AJAX가 아니라 동기 방식이었다면, 서버 응답이 올 때까지 화면이 멈춰버림.

3️⃣ 응답을 받으면, 그때 해당 부분만 업데이트

• 서버에서 응답이 오면, JavaScript가 해당 데이터를 받아서 HTML의 특정 부분을 업데이트함.
• 이때 페이지 전체를 새로고침하지 않고 필요한 부분만 바뀌기 때문에 더 빠르고 부드러운 경험을 제공할 수 있음.

 

💡Fetch 란?

 

- fetch 메서드(fetch())는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 메서드

- Ajax의 구현 방식

 

Fetch API 의 기본구조

fetch("https://jsonplaceholder.typicode.com/todos/1")
   .then(response => response.json()) // JSON 변환
   .then(data => console.log(data))   // 데이터 출력
   .catch(error => console.error("Error:", error));

 

👍 장점:

1️⃣ 코드가 짧고 가독성이 좋음

2️⃣ Promise 기반이라 체이닝(.then())이 가능함

      (Promise 객체: 비동기 작업을 처리하기 위한 JavaScript 객체)

3️⃣ async/await을 사용하면 동기 코드처럼 쉽게 작성 가능

      비동기 코드지만, 위에서 아래로 읽기 쉬운 동기 코드처럼 보임!

 

 

 

참고 블로그

CRUD Operation을 적용  https://velog.io/@gyuhyuk/Fetch-API란