RESTful API를 호출할 때 요청을 캐시하여 응답을 더 빠르게 받을 수 있습니다. TypeScript에서는 axios 라이브러리를 사용하여 HTTP 요청을 보낼 수 있으며, 이를 통해 요청 캐시를 설정할 수 있습니다.

요청 캐시란?

요청 캐시는 이전에 수행된 요청의 응답을 캐시에 저장하고, 동일한 요청이 발생할 경우 다시 서버에 요청을 보내지 않고 캐시된 응답을 사용하는 것을 말합니다.

TypeScript에서 요청 캐시 설정하기

import axios from 'axios';

const requestConfig = {
  method: 'get',
  url: 'https://api.example.com/data',
  headers: {
    'Cache-Control': 'no-cache' // 요청 시 캐시 사용 금지
  }
};

axios(requestConfig)
  .then((response) => {
    // 응답 처리 로직
  })
  .catch((error) => {
    // 오류 처리 로직
  });

위의 예제에서 Cache-Control 헤더를 사용하여 요청 시 캐시 사용을 금지하도록 설정하였습니다. 이를 통해 서버로부터 매번 새로운 응답을 받을 수 있습니다.

요청 캐시 옵션

axios에서는 다양한 옵션을 제공하며, 구체적인 캐시 옵션은 axios의 create 메서드를 통해 생성된 HTTP 클라이언트 인스턴스의 defaults 객체를 수정하여 설정할 수 있습니다.

import axios from 'axios';

const httpClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  // 다양한 옵션 설정
  cache: {
    maxAge: 15 * 60 * 1000 // 캐시 유지 시간 설정 (15분)
  }
});

위의 예제에서 maxAge 옵션을 사용하여 캐시된 응답을 유지하는 시간을 15분으로 설정하였습니다.

마치며

이러한 방법을 통해 TypeScript에서 REST API 호출 시 요청 캐시를 설정할 수 있습니다. 적절한 캐시 설정을 통해 네트워크 상황에 따른 부하를 줄이고, 더 나은 성능을 경험할 수 있습니다.

더 많은 정보를 원하시거나 axios에 대한 더 자세한 설정 방법을 알고 싶다면 axios 공식 문서를 참고해 보세요.