Axios는 많은 웹 애플리케이션에서 HTTP 통신을 쉽게 처리하기 위한 인기 있는 JavaScript 라이브러리입니다. 타입스크립트와 함께 사용할 때, Axios 응답을 타입 안정성있게 처리하는 방법을 알아보겠습니다.

Axios 및 타입스크립트 설치

먼저 프로젝트에 Axios 및 타입스크립트를 설치해야 합니다.

npm install axios
npm install typescript

Axios로 HTTP 요청 보내기

타입스크립트에서 Axios를 사용하여 HTTP GET 요청을 보내는 예제 코드는 다음과 같습니다.

import axios, { AxiosResponse } from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then((response: AxiosResponse) => {
    console.log(response.data);
  })
  .catch((error: any) => {
    console.error('Error fetching data: ', error);
  });

위 예제에서는 Axios의 get 메서드를 사용하여 jsonplaceholder API에서 포스트 데이터를 가져오고 있습니다.

응답 데이터의 타입 정의하기

Axios로 요청한 응답 데이터의 타입을 타입스크립트로 정의하여 타입 안정성을 확보할 수 있습니다. 예를 들어, id, title, body와 같은 필드를 가진 포스트 데이터의 타입을 정의해봅시다.

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

타입 정의된 응답 데이터 사용하기

이제 Axios로 요청한 응답 데이터를 위에서 정의한 타입을 활용하여 타입 안정성을 확보할 수 있습니다.

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then((response: AxiosResponse<Post[]>) => {
    console.log(response.data);
    // 여기서 response.data는 Post[] 타입입니다.
  })
  .catch((error: any) => {
    console.error('Error fetching data: ', error);
  });

위 코드에서 AxiosResponse<Post[]>로 응답 데이터의 타입을 정의했습니다. 이렇게 함으로써 response.data가 Post[] 타입임을 타입스크립트가 보장해줍니다.

마무리

타입스크립트와 Axios를 함께 사용하여 HTTP 응답 데이터를 처리하는 방법을 알아보았습니다. 응답 데이터의 타입을 정의하여 타입 안정성을 확보하고 코드의 가독성을 높일 수 있습니다.

이제 타입스크립트로 Axios 응답 데이터를 안전하게 처리하는 방법에 대해 알게 되었습니다. 코드를 작성하고 테스트해보면서 실무에서 바로 활용할 수 있는 기술을 확보해보시기 바랍니다.