Axios는 Node.js와 브라우저를 위한 Promise 기반의 HTTP 클라이언트입니다. 이 기술을 TypeScript와 함께 사용하여 서버 또는 클라이언트에서 HTTP 요청을 보낼 수 있습니다.

이번 게시물에서는 Axios를 TypeScript 프로젝트에서 어떻게 사용하는지에 대해 알아보겠습니다.

목차

1. Axios 및 TypeScript 설치
2. Axios를 사용하여 GET 요청 보내기
3. Axios를 사용하여 POST 요청 보내기
4. Axios 인터셉터 사용하기

1. Axios 및 TypeScript 설치

먼저 프로젝트에 Axios를 설치해야 합니다. npm을 사용하여 다음 명령어를 실행합니다.

npm install axios

또한 TypeScript에서 Axios를 사용하기 위해 @types/axios 패키지를 설치해야 합니다.

npm install @types/axios

2. Axios를 사용하여 GET 요청 보내기

GET 요청을 보내는 방법은 매우 간단합니다. Axios의 get 함수를 사용하여 원하는 엔드포인트로 요청을 보낼 수 있습니다.

import axios, { AxiosResponse } from 'axios';

async function fetchUserData(): Promise<void> {
  try {
    const response: AxiosResponse = await axios.get('https://api.example.com/users');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
}

3. Axios를 사용하여 POST 요청 보내기

POST 요청을 보내는 과정도 비슷합니다. Axios의 post 함수를 사용하여 데이터를 함께 보낼 수 있습니다.

async function createUser(userData: object): Promise<void> {
  try {
    const response: AxiosResponse = await axios.post('https://api.example.com/users', userData);
    console.log('User created:', response.data);
  } catch (error) {
    console.error('Error creating user:', error);
  }
}

4. Axios 인터셉터 사용하기

Axios 인터셉터를 사용하면 HTTP 요청과 응답을 가로채서 수정할 수 있습니다. 예를 들어, 모든 요청에 헤더를 추가하거나 에러 응답을 처리하는 등의 작업을 할 수 있습니다.

axios.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
});

마무리

이제 Axios를 TypeScript 프로젝트에서 어떻게 사용하는지에 대해 간단히 살펴보았습니다. Axios를 통해 간편하게 HTTP 요청을 보내고 응답을 처리할 수 있어서 많은 개발자들이 선호하는 HTTP 클라이언트 라이브러리 중 하나입니다.

더 많은 정보는 Axios 공식 문서에서 확인할 수 있습니다.