웹 애플리케이션에서 REST API를 호출할 때 중복 요청을 방지하는 것은 중요합니다. 중복 요청이 발생하면 서버에 부하가 걸리고, 응답을 처리하는 데 시간이 소요됩니다. 이를 방지하기 위해 다양한 방법을 사용할 수 있습니다. TypeScript를 기반으로 한 웹 애플리케이션에서 중복 요청을 방지하는 방법을 살펴보겠습니다.

1. 요청 중복 제어

한 번에 하나의 API 요청만을 처리하기 위해, 클라이언트 측에서 중복 요청을 제어할 수 있습니다. 이를 위해서는 요청을 보내기 전에 이전 요청이 완료되었는지 확인하고, 만약 중복 요청이면 요청을 보내지 않도록 제어해야 합니다.

예를 들어, axios와 같은 HTTP 클라이언트 라이브러리를 사용하여 요청을 보낼 때, Cancel Token을 사용하여 중복 요청을 취소시킬 수 있습니다.

아래는 TypeScript에서 axios 라이브러리를 사용하여 중복 요청을 방지하는 예제입니다.

import axios, { CancelToken, isCancel } from 'axios';

let cancelTokenSource = axios.CancelToken.source();

const sendRequest = async () => {
  try {
    if (cancelTokenSource) {
      cancelTokenSource.cancel('Duplicate request detected');
    }

    cancelTokenSource = axios.CancelToken.source();

    const response = await axios.get('/api/data', {
      cancelToken: cancelTokenSource.token
    });
    // 요청 성공 시 처리
  } catch (error) {
    if (isCancel(error)) {
      console.log('Duplicate request detected');
    } else {
      console.error('Error:', error);
    }
  }
};

2. 서버 측에서의 중복 처리

서버 측에서 중복 요청을 처리하는 방법도 있습니다. 클라이언트로부터 중복 요청이 들어오면 서버에서는 첫 번째 요청을 처리하고, 이후 중복된 요청은 무시하도록 설계할 수 있습니다.

마무리

중복 API 요청은 성능 저하와 서버 부하를 야기할 수 있기 때문에, 적절한 방법으로 중복 요청을 방지하는 것이 중요합니다. 클라이언트 측에서의 중복 제어와 서버 측에서의 중복 처리를 효과적으로 조합하여 안정적이고 효율적인 REST API 호출을 보장할 수 있습니다.

이외에도 Redis와 같은 인메모리 캐시나 메시징 큐를 활용한 중복 요청 방지 방법도 존재합니다.

참고자료:

• Axios 문서
• RESTful API Design: Best Practices