[typescript] REST API 호출 시 성능 최적화 방법

12 Dec 2023

typescript

웹 애플리케이션을 개발하다 보면 REST API 호출이 많아지고 이에 따라 성능에 영향을 미칠 수 있는데, TypeScript를 이용하여 REST API 호출 시 성능을 최적화하기 위한 몇 가지 방법에 대해 알아보겠습니다.

1. Async/Await을 사용한 비동기 처리

Async/Await은 TypeScript에서 비동기 작업을 보다 쉽게 다룰 수 있게 해주며, REST API 호출 시에도 사용할 수 있습니다. 이를 이용하면 API 호출 중간에 다른 작업을 처리하고 결과를 기다릴 필요가 없어져 성능을 향상시킬 수 있습니다.

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

2. HTTP 요청 최적화

불필요한 HTTP 요청을 최소화하여 네트워크 부하를 줄이는 것이 중요합니다. HTTP 요청을 통합하거나 캐싱을 활용하는 등의 방법을 통해 API 호출을 최적화할 수 있습니다.

// HTTP 요청 통합 예시
const requestData = async () => {
  const [userData, productsData] = await Promise.all([
    fetch('https://api.example.com/user'),
    fetch('https://api.example.com/products')
  ]);
  const userDataJson = await userData.json();
  const productsDataJson = await productsData.json();
  console.log(userDataJson, productsDataJson);
};

3. 라이브러리 활용

Axios와 같은 라이브러리를 사용하여 REST API 호출을 관리할 수 있습니다. 이러한 라이브러리를 사용하면 요청과 응답을 보다 쉽게 다룰 수 있으며, 캐싱이나 재시도 로직을 구현할 때도 도움이 될 수 있습니다.

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

모던한 웹 애플리케이션에서는 성능 최적화가 매우 중요하며, REST API 호출 시에도 이를 고려하여 최상의 경험을 제공할 수 있도록 노력해야 합니다.

이를테면 TypeScript Async/Await, Axios 등의 관련 자료를 참고하면 도움이 될 것입니다.