웹 애플리케이션에서 REST API를 사용할 때, 대부분의 경우 인증이 필요합니다. 보안을 위해 인증된 사용자만 API를 호출하도록 하는 것이 중요하며, 이때 인증 토큰을 활용해야 합니다.

이 블로그에서는 TypeScript로 REST API를 호출하고, 이를 위한 인증 토큰을 어떻게 활용하는지 알아보겠습니다.

1. Axios 라이브러리 설치

우선, REST API를 호출하기 위해 Axios 라이브러리를 설치해야 합니다. 아래 명령을 사용하여 npm을 통해 설치할 수 있습니다.

npm install axios

2. REST API 호출 및 인증 토큰 설정

다음은 TypeScript로 Axios를 사용하여 REST API를 호출하고, Bearer 토큰을 설정하는 예제 코드입니다.

import axios, { AxiosRequestConfig } from 'axios';

async function callApiWithToken() {
  const apiUrl = 'https://api.example.com/data';
  const token = '인증토큰값';

  const config: AxiosRequestConfig = {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  };

  try {
    const response = await axios.get(apiUrl, config);
    console.log(response.data);
  } catch (error) {
    console.error('API 호출 중 오류 발생:', error);
  }
}

callApiWithToken();

위 예제에서 callApiWithToken 함수는 API의 엔드포인트 URL과 인증 토큰을 인자로 받아 API를 호출하고, 결과를 콘솔에 출력합니다. 이때 Axios의 AxiosRequestConfig를 사용하여 헤더에 Bearer 토큰을 설정했습니다.

3. 결론

이제 TypeScript로 REST API를 호출하고, 인증 토큰을 설정하는 방법을 알아보았습니다. 인증 토큰은 API 호출 시 서버로부터 인증을 받기 위한 중요한 요소이므로 안전하게 관리해야 합니다.

인증 토큰은 도용되지 않도록 안전한 곳에 저장하고, 보안에 주의하면서 사용해야 합니다. REST API 호출에 필요한 인증 토큰을 올바르게 설정하여 안전하고 신뢰할 수 있는 애플리케이션을 개발할 수 있도록 노력해야 합니다.

4. 참고 자료

• Axios 라이브러리 공식 문서
• TypeScript 핸드북