HTTP 통신

프론트엔드에서 백엔드 서버와 데이터 통신을 하려면 HTTP 통신이 필요합니다.
그러나 React에는 HTTP 통신 기능이 내장되어 있지 않기 때문에 JavaScript의 fetch, ajax, axios 같은 메소드를 사용해 HTTP 통신을 해야합니다.

HTTP 요청은 CRUD 작업, 즉 서버에 데이터를 생성(Create), 조회(Read), 수정(Update), 삭제(Delete)하기 위해 사용되는데, 서버에게 요청을 보내는 유형은 크게 4 가지로 GET, POST, PUT, DELETE가 사용됩니다.

• GET : 데이터 조회(Read)
• POST : 데이터 등록(Create)
• PUT : 데이터 수정(Update)
• DELETE : 데이터 삭제(Delete)

fetch

fetch는 JavaScript의 내장 함수로 HTTP 요청을 보내는 데 사용합니다. Promise 기반으로 동작하여 비동기 비동기적인 작업을 쉽게 처리할 수 있고, 간결한 문법을 가지고 있습니다 또한 별도의 라이브러리와 프레임워크 없이 사용할 수 있다는 장점이 있습니다.

간단하고 직관적인 API를 가지고 있어 간단한 요청을 보내려면 fetch를 사용하는 것이 좋습니다.

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

fetch 함수는 첫 번째 매개변수로 요청을 보낼 URL을 받습니다. 두 번째 매개변수는 Options로 HTTP method, headers, body 등 요청에 대한 세부 사항을 지정할 수 있습니다.

아래는 fetch의 예시입니다:

fetch(url, {
  method: 'POST', // HTTP 메소드 지정
  headers: {
    'Content-Type': 'application/json',	// HTTP 헤더 지정
  },
  body: JSON.stringify(data),	// HTTP 바디 지정
})
.then(response => response.json()) // 응답을 JSON으로 변환
.then(data => console.log(data)) // 변환된 데이터 출력
.catch((error) => console.error('Error:', error));	// 에러 처리

axios

axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, fetch와 유사하지만 요청 취소 기능, HTTP 요청 중단 기능, 요청과 응답 데이터 변환 기능 등의 추가적인 기능을 제공합니다. 이러한 기능은 복잡한 웹 애플리케이션에서 매우 유용합니다,

또한, axios는 응답 시에 별도의 JSON 변환 과정이 필요 없이 바로 데이터를 사용할 수 있다는 장점이 있습니다. 그러나 axios는 별도의 라이브러리 설치가 필요하다는 단점이 있습니다.

axios.post(url, data) // 요청
.then(response => console.log(response.data)) // 응답 데이터 출력
.catch(error => console.error(error));	// 에러처리

axios({
  method: 'get',
  url: url
}).then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

ajax

ajax는 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 기법입니다. 비동기적으로 통신함으로써 웹페이지 전체를 새로고침 하지 않고 필요한 일부분만 업데이트할 수 있습니다.

그러나 ajax는 코드가 복잡하고, jQuery과 같은 별도의 라이브러리를 사용해야 합니다.

$.ajax({
  url: url, // 요청 URL
  type: 'POST', // HTTP 메소드
  data: JSON.stringify(data), 
  contentType: 'application/json',
  success: function(data) {	// 요청 성공시 실행할 함수
    console.log(data);
  },
  error: function(error) {	// 요청 실패 시 실행할 함수
    console.error('Error:', error);
  }
});

이렇게 fetch, ajax, axios 와 같이 다양한 방법으로 HTTP 통신을 할 수 있습니다. 각 방법마다 특징과 사용법이 다르므로, 상황에 따라 적절한 방법을 선택하면 됩니다.

감사합니다.