웹 애플리케이션을 개발하다 보면 REST API를 호출할 때 인증이나 기타 목적으로 헤더를 변경해야 하는 경우가 있습니다. 이때, 타입스크립트로 개발된 프로젝트에서는 어떻게 헤더를 변경할 수 있을까요? 이번 포스트에서는 타입스크립트를 사용하여 REST API 호출 시 헤더를 변경하는 방법을 알아보겠습니다.
XMLHttpRequest를 이용한 REST API 호출
XMLHttpRequest는 서버와 상호작용하여 데이터를 전송하는데 사용됩니다. 이를 이용하여 REST API를 호출하고 헤더를 변경할 수 있습니다.
아래는 XMLHttpRequest를 이용하여 REST API를 호출하고 헤더를 변경하는 간단한 예제입니다.
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.setRequestHeader('Authorization', 'Bearer token');
xhr.send();
위 예제에서 setRequestHeader 메서드를 사용하여 Authorization 헤더를 변경하고 있습니다.
fetch API를 이용한 REST API 호출
fetch API는 네트워크 요청을 처리하기 위한 새로운 인터페이스입니다. 이를 이용하여 REST API를 호출하고 헤더를 변경할 수 있습니다.
아래는 fetch API를 이용하여 REST API를 호출하고 헤더를 변경하는 예제입니다.
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Authorization': 'Bearer token'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
위 예제에서 headers 객체를 사용하여 Authorization 헤더를 변경하고 있습니다.
Axios를 이용한 REST API 호출
Axios는 HTTP 클라이언트 라이브러리로, 간단하게 REST API를 호출하고 헤더를 변경할 수 있습니다.
아래는 Axios를 이용하여 REST API를 호출하고 헤더를 변경하는 예제입니다.
import axios from 'axios';
axios.get('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer token'
}
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));
위 예제에서 headers 객체를 사용하여 Authorization 헤더를 변경하고 있습니다.
결론
이번 포스트에서는 타입스크립트를 이용하여 REST API 호출 시 헤더를 변경하는 방법에 대해 알아보았습니다. XMLHttpRequest, fetch API, Axios 등을 이용하여 간단히 헤더를 변경할 수 있으며, 각각의 방법에 따라 편의성과 선호도에 따라 선택하여 사용할 수 있습니다.
REST API 호출 시 헤더를 변경할 때는 보안 등을 고려하여 안전한 방법으로 인증 정보를 전달하는 것이 중요합니다.
이상으로 타입스크립트에서 REST API 호출 시 헤더를 변경하는 방법에 대해 알아보았습니다. 감사합니다.