Axios는 HTTP 요청을 보내고 받는 데 사용되는 강력하고 간편한 JavaScript 라이브러리입니다. 이 블로그에서는 타입스크립트 환경에서 Axios를 사용하여 다양한 형식의 데이터를 인코딩하고 디코딩하는 방법에 대해 알아보겠습니다.

Axios 사용하기

먼저, 타입스크립트 프로젝트에 Axios를 설치하고 사용하는 방법에 대해 알아보겠습니다. 프로젝트 폴더에서 아래 명령어를 실행하여 Axios를 설치합니다.

npm install axios

다음으로, Axios를 import하여 사용할 수 있습니다.

import axios from 'axios';

데이터 인코딩 및 디코딩

JSON 데이터 다루기

Axios를 사용하여 JSON 데이터를 보내거나 받을 때, 다음과 같이 Content-Type을 지정하여 데이터를 인코딩하고 디코딩할 수 있습니다.

JSON 데이터 보내기

const data = { name: 'John', age: 30 };
const response = await axios.post('/api/user', data, {
  headers: {
    'Content-Type': 'application/json'
  }
});

JSON 데이터 받기

const response = await axios.get('/api/user', {
  headers: {
    'Accept': 'application/json'
  }
});
const jsonData = response.data;

FormData 다루기

FormData는 특수한 형태의 데이터 객체로, 파일 업로드나 기타 이진 데이터를 전송할 때 사용됩니다. Axios를 사용하여 FormData를 보내거나 받을 때, 다음과 같이 Content-Type을 지정하여 데이터를 인코딩하고 디코딩할 수 있습니다.

FormData 보내기

const formData = new FormData();
formData.append('file', file);
const response = await axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

FormData 받기

const response = await axios.get('/api/user', {
  headers: {
    'Accept': 'multipart/form-data'
  }
});
const formData = new FormData();
formData.append('file', response.data);

결론

Axios를 사용하여 타입스크립트에서 다양한 형식의 데이터를 인코딩하고 디코딩하는 방법에 대해 살펴보았습니다. 이를 통해 웹 애플리케이션에서 서버와의 효율적인 데이터 통신을 구현할 수 있습니다.

더 많은 정보를 원하시면 Axios 공식 문서를 참고하시기 바랍니다.