[typescript] REST API 호출 시 요청 데이터 직렬화 방법

12 Dec 2023

typescript

많은 경우에 REST API를 호출할 때 요청 데이터를 직렬화(serialize)하여 전송해야 합니다. 이는 클라이언트와 서버 사이에 데이터를 효율적으로 전송하기 위한 중요한 단계입니다. 이 포스트에서는 TypeScript에서 REST API를 호출할 때 요청 데이터를 직렬화하는 다양한 방법을 살펴보겠습니다.

JSON.stringify() 사용

JavaScript나 TypeScript에서 가장 일반적으로 사용되는 방법은 JSON.stringify() 함수를 사용하는 것입니다. 이 함수를 사용하여 객체를 JSON 문자열로 변환한 후 HTTP 요청의 본문에 포함할 수 있습니다.

const data = { name: 'John', age: 30 };
const serializedData = JSON.stringify(data);
// 이제 serializedData를 HTTP 요청의 본문에 포함하여 API를 호출할 수 있습니다

axios 라이브러리 활용

axios와 같은 HTTP 클라이언트 라이브러리를 사용하는 경우, 해당 라이브러리가 제공하는 기능을 사용하여 데이터를 직렬화할 수 있습니다.

import axios from 'axios';

const data = { name: 'John', age: 30 };
axios.post('/api/endpoint', data);
// axios는 내부적으로 데이터를 직렬화하여 요청을 보냅니다

FormData 객체 활용

파일 업로드나 멀티파트(multipart) 요청을 보내야 하는 경우에는 FormData 객체를 사용하여 데이터를 직렬화할 수 있습니다.

const formData = new FormData();
formData.append('name', 'John');
formData.append('age', '30');
// formData를 HTTP 요청에 포함하여 API를 호출할 수 있습니다

요약

REST API를 호출할 때 요청 데이터를 직렬화하는 방법은 다양합니다. JSON.stringify()를 사용하거나 axios와 같은 라이브러리를 활용하거나 필요에 따라 FormData 객체를 사용하는 등의 방법이 있습니다. 상황과 요구사항에 맞게 적절한 방법을 선택하여 API 요청을 보내는 것이 중요합니다.

이러한 직렬화 과정을 통해 클라이언트와 서버 간의 데이터 교환을 원활하게 할 수 있으며, TypeScript를 사용하여 각각의 방법을 쉽게 구현할 수 있습니다.

참고 자료

이상으로 TypeScript에서 REST API를 호출할 때 요청 데이터를 직렬화하는 방법에 대해 알아보았습니다. 감사합니다!