JS 이벤트 처리 - 8(Ajax Fetch)

학습 목표

1. AJAX에 대해 알아 보자

2. Fetch API란?

3. Fetch API 사용해보기

 

1. AJAX에 대해 알아 보자

JAX (Asynchronous JavaScript and XML) AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술입니다 전통적인 방식의 문제점: 웹 페이지에서 데이터를 서버로 전송하면 새로운 페이지를 로드해야 했음. 이로 인해 화면이 깜빡이거나, 데이터 양이 많을 경우 웹 사이트가 느려지는 문제가 발생함. AJAX의 장점: 웹 페이지의 특정 부분만을 동적으로 업데이트하여 전체 페이지 리로드 없이 데이터를 갱신. 사용자 경험이 향상되며, 서버 부하 감소로 웹 애플리케이션의 성능 개선 가능. 기술적 세부 사항: 원래 XMLHttpRequest 객체를 이용하여 서버와 비동기 통신. 최근에는 더 간편한 fetch API가 많이 사용됨.

 

2. Fetch API란?

Fetch API란? 웹 브라우저에서 제공하는 인터페이스로, 네트워크 요청을 쉽게 수행할 수 있게 해주는 기술입니다. 전통적으로 웹에서 비동기적으로 서버와 데이터를 주고받을 때 주로 사용되던 기술은 XMLHttpRequest(XHR)였습니다. XHR은 웹 개발 초기부터 사용되었으며, AJAX(Asynchronous JavaScript and XML)의 핵심 구성 요소로서 많은 웹 애플리케이션에서 사용되었습니다. 그러나 XHR에는 복잡한 인터페이스, 불편한 오류 처리, 비표준화, Promise 미지원 등 한계점이 있어서 이를 대체 하기 위해 Fetch API 가 도입 되었습니다.

 

3. Fetch API 사용해보기

 

출력

 

 

POST 사용 방법

fetch('<https://api.example.com/data>', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

PUT 사용 방법

fetch('<https://api.example.com/data/1>', {  // 예를 들어, ID가 1인 데이터를 업데이트하고자 할 때의 URL
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'updatedValue1',
    key2: 'updatedValue2'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

 

 

※  DELETE 사용 방법도 추가

fetch('https://api.example.com/data/1', {  // 예를 들어, ID가 1인 데이터를 삭제하고자 할 때의 URL   method: 'DELETE',   headers: {     'Content-Type': 'application/json'   } }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));