[typescript] 타입스크립트에서의 비동기 프로그래밍 패턴

14 Dec 2023

typescript

타입스크립트는 자바스크립트의 상위 집합 언어로, 비동기 프로그래밍을 사용하여 웹 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다. 이를 위해서는 Promise, async/await, 그리고 RxJS와 같은 도구들을 사용하여 비동기적인 작업을 효율적이고 안전하게 다룰 수 있습니다.

1. Promise

Promise는 비동기적인 작업을 처리하기 위한 표준화된 방법을 제공합니다. 비동기 작업이 완료되었을 때 또는 실패했을 때 어떻게 처리할지를 명시적으로 정의할 수 있습니다.

예시:

function fetchData(): Promise<Data> {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (success) {
      resolve(data);
    } else {
      reject(error);
    }
  });
}

fetchData()
  .then((data) => {
    // 데이터 처리
  })
  .catch((error) => {
    // 에러 처리
  })

2. Async/Await

Async/Await는 Promise를 기반으로 하는 비동기 프로그래밍의 새로운 패턴입니다. 비동기 코드를 동기적으로 작성할 수 있도록 도와줍니다.

예시:

async function fetchData(): Promise<Data> {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    throw new Error('Failed to fetch data');
  }
}

(async () => {
  try {
    const data = await fetchData();
    // 데이터 처리
  } catch (error) {
    // 에러 처리
  }
})();

3. RxJS

RxJS는 Reactive Extensions for JavaScript의 약자로, 비동기 데이터 스트림을 다루기 위한 라이브러리입니다. 옵저버블과 연산자를 통해 복잡한 비동기 상황을 다룰 수 있습니다.

예시:

import { Observable } from 'rxjs';

const dataStream = new Observable((observer) => {
  // 비동기 데이터 스트림 처리
  if (success) {
    observer.next(data);
    observer.complete();
  } else {
    observer.error(error);
  }
});

const subscription = dataStream.subscribe(
  (data) => {
    // 데이터 처리
  },
  (error) => {
    // 에러 처리
  }
);

결론

타입스크립트에서는 Promise, async/await, 그리고 RxJS를 활용하여 비동기 프로그래밍을 다룰 수 있습니다. 적절한 패턴과 도구를 사용하여 안정적이고 효율적인 비동기 코드를 작성할 수 있으며, 이는 웹 애플리케이션의 성능 향상에 도움이 될 것입니다.

참고 문헌: