웹 애플리케이션에서 REST API를 호출할 때 서버와 클라이언트 간의 시간대가 다를 경우 문제가 발생할 수 있습니다. 특히, 타입스크립트를 사용하여 효율적으로 REST API를 호출하려면 이러한 시간대 문제를 고려해야 합니다. 이 글에서는 타입스크립트 프로젝트에서 REST API를 호출하는 동안 올바른 시간대를 설정하는 방법에 대해 알아보겠습니다.

시간대 설정 방법

Axios를 사용하는 경우

만약 Axios를 사용하여 REST API를 호출한다면, axios.create를 사용하여 커스텀 인스턴스를 만들고 다음과 같이 baseURL 및 timezone 설정을 포함할 수 있습니다.

import axios, { AxiosInstance } from 'axios';

const baseURL = 'https://api.example.com';
const instance: AxiosInstance = axios.create({
  baseURL,
  headers: {
    common: {
      'timezone': new Date().getTimezoneOffset().toString(), // 현재 시간대 설정
    },
  },
});

이것으로 타입스크립트로 된 애플리케이션에서 REST API를 호출하면서 올바른 시간대를 설정할 수 있습니다. 내부적으로 Axios는 헤더를 설정하여 REST API 호출을 보내게 됩니다.

Fetch API를 사용하는 경우

Fetch API를 사용하여 REST API를 호출하는 경우에는 fetch 메소드 옵션에 headers를 추가하여 시간대를 설정할 수 있습니다.

const baseURL = 'https://api.example.com';
const headers = new Headers();
headers.append('timezone', new Date().getTimezoneOffset().toString());

fetch(baseURL, {
  headers,
});

이렇게 함으로써 현재 시간대를 REST API 호출 시에 포함시킬 수 있습니다.

결론

이제 타입스크립트로 개발된 애플리케이션에서 REST API를 호출하는 동안 올바른 시간대를 설정하는 방법에 대해 알아보았습니다. 이를 통해 서버와 클라이언트 간의 시간대 차이로 발생하는 문제를 방지하고, 효율적으로 REST API를 활용할 수 있습니다.

참고 문헌:

• Axios 공식 문서
• MDN web docs - Fetch API