웹 애플리케이션에서 HTTP 요청을 보내기 위해 Axios는 매우 인기 있는 라이브러리입니다. 그리고 많은 경우에 쿼리 매개변수(query parameters)를 사용하여 서버에 데이터를 전달해야 합니다. 타입스크립트에서 Axios를 사용하여 쿼리 매개변수를 처리하는 방법을 알아보겠습니다.

Axios 설치하기

먼저, Axios를 프로젝트에 설치해야 합니다. 아래 명령을 사용하여 npm을 통해 Axios를 설치할 수 있습니다.

npm install axios

또한 TypeScript를 사용한다면 Axios의 타입 정의 파일을 설치해야 합니다.

npm install @types/axios

쿼리 매개변수와 함께 GET 요청 보내기

아래 예제에서는 Axios를 사용하여 쿼리 매개변수를 포함한 GET 요청을 보내는 방법을 보여줍니다.

import axios, { AxiosResponse } from 'axios';

interface MyData {
  id: number;
  name: string;
}

// 쿼리 매개변수를 객체로 정의
const queryParams = {
  id: 123,
  search: 'example'
};

// GET 요청 보내기
axios.get<MyData>('https://api.example.com/data', {
  params: queryParams
})
  .then((response: AxiosResponse<MyData>) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

위 예제에서 params 속성을 사용하여 쿼리 매개변수를 전달할 수 있습니다. 이렇게 하면 Axios가 요청을 보낼 때 쿼리 매개변수를 URL에 자동으로 추가해 줍니다.

결론

이제 타입스크립트에서 Axios를 사용하여 쿼리 매개변수를 처리하는 방법을 알아보았습니다. Axios를 사용하면 간단하게 HTTP 요청을 보낼 수 있으며, 쿼리 매개변수를 처리하는 데도 편리합니다.

더 많은 정보를 원하시면 Axios 공식 문서를 확인해 보세요.