Axios는 Node.js 및 브라우저에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리입니다. 이번 포스트에서는 TypeScript와 Axios를 사용하여 인터셉터를 통해 HTTP 요청과 응답을 로깅하는 방법을 알아보겠습니다.

Axios 및 TypeScript로 프로젝트 설정

우선, 프로젝트에 Axios를 설치하고 TypeScript로 설정해야 합니다. 아래 명령을 사용하여 Axios와 TypeScript를 설치합니다.

npm install axios
npm install -D @types/axios

프로젝트의 tsconfig.json 파일에는 "target": "es6" 및 "experimentalDecorators": true 설정을 추가해야 합니다.

Axios 인터셉터 작성

이제 Axios를 사용하여 인터셉터를 작성할 차례입니다. 아래는 인터셉터를 사용하여 수행할 간단한 작업에 대한 예제입니다.

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

// 요청 인터셉터
axios.interceptors.request.use((config: AxiosRequestConfig) => {
  // 요청 로깅
  console.log('Request Log:', config);
  return config;
});

// 응답 인터셉터
axios.interceptors.response.use((response: AxiosResponse) => {
  // 응답 로깅
  console.log('Response Log:', response);
  return response;
});

위 코드에서 axios.interceptors.request.use 및 axios.interceptors.response.use를 사용하여 각각 요청과 응답에 대한 인터셉터를 정의합니다.

테스트 및 결과 확인

이제 해당 인터셉터가 작동하는지 확인해봅시다. 아래는 Axios를 사용하여 GET 요청을 수행하는 간단한 예제 코드입니다.

axios.get('https://api.example.com/data')
  .then((response) => {
    console.log('Data:', response.data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

위 코드를 실행하면, 요청과 응답이 콘솔에 로깅되는 것을 확인할 수 있습니다.

이렇게 Axios를 사용하여 인터셉터를 통해 HTTP 요청과 응답을 로깅하는 방법에 대해 알아보았습니다. 이 기술을 사용하면 개발자는 네트워크 통신을 쉽게 디버깅하고 모니터링할 수 있습니다.

참고문헌: Axios 공식 문서

이상, TypeScript를 사용하여 Axios 인터셉터를 통해 요청과 응답을 로깅하는 포스트였습니다. 만약 추가적인 질문이 있으시다면 언제든지 물어보세요.