[typescript] 타입스크립트에서 Axios를 사용한 테스트와 목업(mock) 데이터 처리하기

22 Dec 2023

typescript

Axios는 HTTP 클라이언트 라이브러리로, 서버와의 데이터 통신을 간편하게 처리할 수 있도록 도와줍니다. 타입스크립트에서 Axios를 사용하여 API 요청을 테스트하고 목업(mock) 데이터를 처리하는 방법을 알아보겠습니다.

Axios 설치하기

먼저, Axios를 프로젝트에 설치해야 합니다. 아래의 명령어를 사용하여 Axios를 설치합니다.

npm install axios

또는

yarn add axios

Axios를 사용한 API 요청 처리하기

Axios를 사용하여 API를 요청하고 응답을 처리하는 방법은 다음과 같습니다.

GET 요청 예시

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

POST 요청 예시

import axios from 'axios';

async function postData() {
  try {
    const response = await axios.post('https://api.example.com/data', { key: 'value' });
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

postData();

Axios를 사용한 API 테스트하기

API 요청을 테스트할 때, Axios의 axios-mock-adapter를 사용하여 목업 데이터를 처리하고 모의(mock) 서버를 구성할 수 있습니다.

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);

mock.onGet('/data').reply(200, { key: 'mocked data' });

async function testAPI() {
  try {
    const response = await axios.get('/data');
    console.log(response.data); // { key: 'mocked data' }
  } catch (error) {
    console.error(error);
  }
}

testAPI();

위 코드에서 axios-mock-adapter를 사용하여 GET 요청에 대한 목업 응답을 정의하고, 실제로 Axios를 사용하여 API를 테스트할 때 목업 응답을 받아올 수 있습니다.

이러한 방법으로 Axios를 사용하여 API 요청을 테스트하고 목업 데이터를 처리할 수 있습니다.

참고 자료

위 코드와 설명은 TypeScript와 Axios의 기본 원리를 보다 쉽게 이해하고 실제 프로젝트에 적용하기 위해 작성되었습니다.