Fetch, Axios

http 클라이언트 라이브러리

• fetch나 axios처럼 HTTP 프로토콜을 사용하여 서버와 통신할 수 있도록 하는 소프트웨어 라이브러리들을 http 클라이언트 라이브러리 라고 함
• 비슷한 역할을 하는 다른 기술들도 있지만 fetch와 axios는 현대적인 개발 환경에서 가장 널리 사용되어지는 방법들임

fetch와 axios

공통점
- 둘 다 HTTP 요청을 보내고 응답을 받는 기능 제공
- GET, POST, PUT, DELETE 등의 HTTP 메서드 제공
- 비동기적으로 작동하며 웹 페이지의 나머지 부분과 독립적으로 데이터를 처리

차이점

• fetch
  - 내장된 브라우저 API로 별도의 설치가 필요 없음
  - JSON 변환을 수동으로 해야 함
• axios
  - 자동으로 JSON 변환
  - 요청 취소, 타임아웃 설정 등의 추가적인 기능
  - 인터셉터를 사용하여 요청/응답을 사전에 처리할 수 있음
  - 브라우저 및 Node.js 환경 모두 지원

fetch의 기본 구조

• 클라이언트 > 서버

// https://api.example.com/data는 요청을 보낼 서버의 URL
fetch('https://api.example.com/data', {
  // HTTP 요청을 POST로 지정
  method: 'POST',
  // 전송하는 데이터의 타입이 JSON 임을 서버에 알려주는 역할
  headers: {
    'Content-Type': 'application/json'
  },
  // body 부분에 데이터를 담음, JSON.stringify는 값을 JSON 문자열로 변환
  body: JSON.stringify({ key: 'value' })
})
// 서버로부터 응답을 처리하는 부분, fetch함수에서 요청한 데이터를 받아올 때 실행
.then(response => /* 응답시 실행 */)
// 오류가 발생했을 경우 실행되는 코드
.catch(error => /* 에러시 실행 */);

• 서버 > 클라이언트

// Node.js + express 서버로 예시
const express = require('express');
const app = express();

// JSON 형식의 요청 본문을 파싱하기 위한 미들웨어
app.use(express.json());

// POST 요청을 '/data' 경로로 처리하는 라우트
app.post('/data', (req, res) => {
  const receivedData = req.body; // 클라이언트로부터 받은 데이터
  console.log('Received data:', receivedData);
  
  // 받은 데이터를 처리하는 로직(ex. 데이터 검증, 데이터 베이스 작업, 비즈니스 로직 수행 등)

  // 클라이언트에게 응답 보내기
  res.json({ message: 'Data received successfully', receivedData });
});

axios의 기본 구조

• 클라이언트 > 서버

import axios from 'axios';

// POST 요청, 서버로 전송할 데이터를 포함
axios.post('https://api.example.com/data', {
  key: 'value',
  anotherKey: 'anotherValue'
})
// 서버로부터 응답을 받고 실행되는 로직
  .then(response => {
    // 성공적인 응답 처리
    console.log(response.data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Error posting data:', error);
  });

• 서버 > 클라이언트

// Node.js + express 서버로 예시
const express = require('express');
const app = express();

app.use(express.json()); // JSON 요청 본문 파싱을 위한 미들웨어

// POST 요청 처리
app.post('/data', (req, res) => {
  const receivedData = req.body; // 클라이언트로부터 받은 데이터
  console.log('Received data:', receivedData);
  
  // 받은 데이터를 처리하는 로직(ex. 데이터 검증, 데이터 베이스 작업, 비즈니스 로직 수행 등)

  // 클라이언트에게 JSON 형태로 응답
  res.json({ message: 'Data received successfully', receivedData });
});

총정리

• fetch나 axios나 형태나 하는 역할은 비슷하지만 약간의 차이를 보임
• axios는 추가적인 기능과 편의성을 제공하고, fetch는 브라우저에 내장된 간단하고 기본적인 요구 사항에 적합한 도구
• 프로젝트의 복잡성, 필요한 기능, 개발 환경 등을 고려하여 적절한 도구를 선