▶️ 데이터 통신이란
웹 애플리케이션의 클라이언트(브라우저)와 서버 간에 데이터를 주고받는 과정을 의미한다. 이때 데이터를 주고 받기 위해 사용되는 프로토콜이 HTTP이다. 이 HTTP를 통해 데이터 통신을 하는 방법은 AJAX, Fetch API, Axios 등이 있다.
▶️ HTTP
HTTP는 HyperText Transfer Protocol의 약자로 웹 브라우저와 웹 서버 간에 데이터를 주고받기 위해 사용하는 프로토콜이다.
인터넷에서 웹사이트를 방문할 때 웹 페이지, 이미지, 동영상 등의 대부분의 정보를 HTTP를 통해 가져올 수 있다.
▪️ HTTP의 구조
-
요청(Request)
클라이언트가 서버에 보내는 메시지로, 서버에 특정 작업을 요청하는 내용이 포함되어 있다. -
응답(Response)
서버가 클라이언트의 요청에 대해 보내는 메시지로, 요청받은 작업의 내용을 포함하고 있다.
▪️ HTTP 메서드
클라이언트와 서버 간의 통신에서 특정 작업을 지정하기 위해 사용되는 방법이다. 메서드의 종류는 아래의 9가지가 있다.
① 📌GET : 서버에서 데이터를 가져올 때 사용
② 📌POST : 서버에 데이터를 전송할 때 사용
③ 📌PUT : 서버의 기존 리소스를 생성하거나 업데이트할 때 사용
④ 📌PATCH : 리소스의 일부를 수정할 때 사용
⑤ 📌DELETE : 서버에서 특정 리소스를 삭제할 때 사용
⑥ HEAD : GET 요청과 동일하지만, 응답 본문을 제외한 헤더만 반환
⑦ OPTIONS : 서버가 지원하는 메서드 확인
⑧ CONNECT : 클라이언트와 대상 서버 간에 네트워크 터널을 설정
⑨ TRACE : 클라이언트가 서버로 보낸 요청을 그대로 반환하여 요청의 내용을 확인하고 디버깅하는 데 사용
▶️ 데이터 통신 방법
▪️ AJAX
초기의 비동기 데이터 통신 방식으로 웹 페이지를 다시 로드하지 않고 서버와 비동기적으로 데이터를 주고받을 수 있게 하는 기술이다.
주로 XMLHttpRequest 객체를 사용하여 구현되며, JSON 형식의 데이터를 주고받는다.
onreadystatechange 또는 onerror 이벤트를 사용하여 에러 처리를 한다.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();▪️ Fetch API
최신 웹 API로, AJAX의 대안으로 등장한 통신 방법이다. Promise 기반으로 비동기 통신을 더 간단하게 처리하며 콜백이 중첩되어 발생하는 콜백 지옥을 방지한다.
Fetch는 응답 객체를 반환하기 때문에, 조건문을 통해 HTTP 상태 코드를 수동으로 체크한 후 catch 블록으로 네트워크 에러를 처리한다.
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));▪️ Axios
Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경 모두에서 사용할 수 있다. Fetch API보다 더 많은 기능과 유연성을 제공한다. 또한 Axios는 응답 객체와 오류를 자동으로 처리한다.
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('Axios error:', error)); * 참고 :
https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
https://inpa.tistory.com/entry/HTTP
https://joseph0926.tistory.com/31
https://ji-musclecode.tistory.com/65
