클라이언트 측에서 API와 상호 작용하고 데이터를 병합하는 것은 웹 애플리케이션 개발 과정에서 흔한 작업입니다. 이를 위해 Axios를 사용하여 데이터를 요청하고 응답을 받는 방법에 대해 배워보겠습니다.

Axios란?

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저 및 Node.js에서 모두 사용할 수 있습니다. Axios는 AJAX 요청을 보내고 응답을 처리하는 간편한 방법을 제공하여 데이터 통신을 용이하게 만들어줍니다.

Axios를 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. 다음 명령을 사용하여 Axios를 프로젝트에 추가해주세요:

npm install axios

또는 yarn을 사용하신다면:

yarn add axios

데이터 병합하기

데이터 병합은 여러 개의 요청을 보내고, 각 응답을 받아서 하나의 데이터로 병합하는 과정입니다. Axios는 여러 개의 요청을 동시에 보내는 기능을 제공합니다.

아래는 Axios를 사용하여 데이터 병합하는 간단한 예시입니다:

const axios = require('axios');

// 병합할 데이터 소스
const url1 = 'https://api.example.com/data1';
const url2 = 'https://api.example.com/data2';

// 데이터 요청 및 응답 처리
const getData = async () => {
  try {
    const response1 = await axios.get(url1);
    const response2 = await axios.get(url2);

    const data1 = response1.data;
    const data2 = response2.data;

    // 데이터 병합 로직
    const mergedData = {
      ...data1,
      ...data2,
    };

    console.log('Merged data:', mergedData);
  } catch (error) {
    console.error('Error:', error.message);
  }
};

getData();

위 코드는 두 개의 API에서 데이터를 받아와 병합하는 예시입니다. 먼저 axios.get() 함수를 사용하여 해당 URL로 요청을 보내고 응답을 받습니다. 각각의 응답은 response1, response2 변수에 저장됩니다.

응답 객체에서 data 프로퍼티를 사용하여 실제 데이터에 접근할 수 있습니다. 이후 ... 연산자를 사용하여 두 데이터를 병합하고 mergedData 변수에 저장합니다.

데이터 병합이 완료되면 콘솔에 병합된 데이터를 출력합니다.

결론

Axios를 사용하여 클라이언트 측에서 데이터 병합을 수행하는 방법에 대해 알아보았습니다. Axios의 편리한 메서드를 이용하면 간단하게 여러 요청을 보낼 수 있고, 응답을 처리하여 데이터를 병합할 수 있습니다.

Axios에 대한 더 자세한 내용은 공식 문서를 참고하시기 바랍니다.

#webdevelopment #axios