[Axios] Axios의 다양한 기능 살펴보기

중첩된 항목을 지원하는 쿼리 파라미터 직렬화

Axios는 중첩된 항목을 지원하는 쿼리 파라미터 직렬화를 제공합니다. 이를 활용하여 복잡한 데이터 구조를 가진 객체를 쿼리 문자열로 직렬화할 수 있습니다.

import axios from 'axios';

const params = {
  user: {
    name: 'John Doe',
    age: 30
  },
  products: ['apple', 'banana', 'orange']
};

axios.get('/api/data', { params })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });

위의 예시에서 params 객체는 중첩된 항목을 가지고 있습니다. 이 객체를 Axios의 get 메서드에 params 옵션으로 전달하면, Axios는 해당 객체를 쿼리 파라미터로 직렬화하여 GET 요청을 보낼 때 함께 전송합니다.

---

요청 바디를 자동으로 직렬화

Axios는 다양한 요청 바디 포맷을 자동으로 직렬화할 수 있습니다.

1. JSON (application/json)

import axios from 'axios';

const data = {
  name: 'John Doe',
  age: 30
};

axios.post('/api/data', data, {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });

위의 예시에서 data 객체를 POST 요청의 바디로 전달하고, Content-Type 헤더를 'application/json'으로 설정하여 JSON으로 직렬화합니다.

2. Multipart / FormData (multipart/form-data)

import axios from 'axios';

const formData = new FormData();
formData.append('file', file);

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });

위의 예시에서 FormData 객체를 생성하여 파일 업로드를 위한 POST 요청의 바디로 전달하고, Content-Type 헤더를 'multipart/form-data'로 설정합니다.

3. URL 인코딩된 폼 (application/x-www-form-urlencoded)

import axios from 'axios';
import qs from 'qs';

const data = {
  name: 'John Doe',
  age: 30
};

axios.post('/api/data', qs.stringify(data), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });

위의 예시에서 data 객체를 URL 인코딩된 폼으로 직렬화하기 위해 qs.stringify() 함수를 사용하고, Content-Type 헤더를 'application/x-www-form-urlencoded'로 설정합니다.

---

HTML 폼을 JSON으로 게시

Axios를 사용하여 HTML 폼을 JSON으로 게시할 수도 있습니다.

import axios from 'axios';

const form = document.getElementById('myForm');
const formData = new FormData(form);

axios.post('/api/data', Object.fromEntries(formData), {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });

위의 예시에서는 HTML 폼을 FormData 객체로 생성하고, 이를 Object.fromEntries()를 사용하여 JSON으로 변환하여 POST 요청의 바디로 전달합니다. 이때 Content-Type 헤더를 'application/json'으로 설정합니다.

---

응답에서 자동으로 JSON 데이터 처리

Axios는 응답에서 자동으로 JSON 데이터를 처리합니다.

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });

위의 예시에서 response.data를 통해 서버로부터 받은 JSON 데이터에 접근할 수 있습니다. Axios는 응답의 Content-Type이 'application/json'인 경우, 자동으로 JSON 데이터로 파싱하여 제공합니다.

---

진행 상황 및 대역폭 제한

Axios는 브라우저와 노드.js에서 진행 상황을 캡처하고 추가 정보(속도, 남은 시간 등)를 제공합니다. 또한, 노드.js에서 대역폭 제한을 설정할 수도 있습니다.

import axios from 'axios';
import { createReadStream } from 'fs';
import { createWriteStream } from 'fs';

// 노드.js에서 진행 상황 캡처
axios.get('/api/data', {
  onDownloadProgress: progressEvent => {
    const { loaded, total } = progressEvent;
    const percentCompleted = Math.round((loaded * 100) / total);
    console.log(`다운로드 진행률: ${percentCompleted}%`);
  },
  onUploadProgress: progressEvent => {
    const { loaded, total } = progressEvent;
    const percentCompleted = Math.round((loaded * 100) / total);
    console.log(`업로드 진행률: ${percentCompleted}%`);
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });

// 노드.js에서 대역폭 제한 설정
const stream = createReadStream('largefile');
const writeStream = createWriteStream('output');
axios({
  method: 'post',
  url: '/

api/upload',
  data: stream,
  maxContentLength: 200000000, // 대역폭 제한 설정
  onUploadProgress: progressEvent => {
    const { loaded, total } = progressEvent;
    const percentCompleted = Math.round((loaded * 100) / total);
    console.log(`업로드 진행률: ${percentCompleted}%`);
  }
})
  .then(response => {
    writeStream.write(response.data);
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });

위의 예시에서 onDownloadProgress 및 onUploadProgress 콜백을 사용하여 진행 상황을 캡처하고 출력합니다. 또한, 대역폭 제한을 설정하기 위해 maxContentLength 옵션을 사용합니다.

---

호환성과 보안 기능:

Axios는 FormData 및 Blob과 호환됩니다. 이를 통해 파일 업로드와 관련된 작업을 수행할 수 있습니다.

또한, 클라이언트 측에서 XSRF(CSRF)에 대한 보호 기능을 지원합니다. 이를 위해 서버에서 쿠키 또는 헤더에 CSRF 토큰을 포함시켜 요청을 전송하고, Axios는 자동으로 해당 토큰을 인식하여 요청에 포함시킵니다. 이는 웹 애플리케이션의 보안을 강화하는 데 도움이 됩니다.

---