[typescript] 타입스크립트에서의 비동기 작업 관련 라이브러리 소개

14 Dec 2023

typescript

타입스크립트는 JavaScript의 정적 타입을 지원하여 안정적이고 확장성 있는 코드를 작성할 수 있도록 도와줍니다. 비동기 작업은 모던 애플리케이션 개발에서 중요한 부분이며, 타입스크립트에서 비동기 작업을 보다 쉽게 다룰 수 있는 라이브러리들이 있습니다. 이번 글에서는 주요한 타입스크립트 비동기 작업 관련 라이브러리를 살펴보겠습니다.

Promise 기반 라이브러리: axios

axios는 HTTP 클라이언트 라이브러리로, Promise를 기반으로 한다. 이 덕분에 타입스크립트에서 비동기 HTTP 요청을 손쉽게 다룰 수 있다. 또한, axios는 타입 정의 파일을 지원하여 타입 안정성을 유지하면서 HTTP 요청을 보내는 것이 가능하다.

예시:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

비동기 플로우 관리 라이브러리: RxJS

RxJS는 함수형 반응형 프로그래밍을 위한 라이브러리로, 비동기 작업을 더욱 단순하고 직관적으로 다룰 수 있도록 도와준다. Observable을 사용하여 데이터 스트림을 다룰 수 있고, 타입 안정성을 유지하면서 복잡한 비동기 작업을 관리할 수 있다.

예시:

import { from } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const dataStream = from(someAsyncDataSource);

dataStream.pipe(
  filter(data => data.valid),
  map(data => data.value)
).subscribe(
  value => console.log(value),
  error => console.error(error),
  () => console.log('Completed')
);

상태 관리 라이브러리: Redux Toolkit

Redux Toolkit은 Redux를 보다 쉽게 사용할 수 있도록 도와주는 공식 지원 라이브러리다. 비동기 작업을 포함한 상태 관리를 위한 많은 편의 기능을 제공하므로, 타입스크립트와 함께 사용할 때 안정적이고 확장성 있는 상태 관리를 구현하는 데 매우 유용하다.

예시:

import { createAsyncThunk, configureStore, createSlice } from '@reduxjs/toolkit';

const fetchData = createAsyncThunk('data/fetch', async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
});

const dataSlice = createSlice({
  name: 'data',
  initialState: { value: null },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchData.fulfilled, (state, action) => {
      state.value = action.payload;
    });
  }
});

const store = configureStore({
  reducer: {
    data: dataSlice.reducer
  }
});

이상으로, 타입스크립트에서의 비동기 작업을 다루기 위한 주요 라이브러리들을 살펴보았다. 각 라이브러리는 타입스크립트와 함께 사용할 때 안정적이고 확장성 있는 비동기 작업 처리를 지원하기 위한 다양한 기능을 제공한다.

참고 자료

axios: https://github.com/axios/axios
RxJS: https://rxjs.dev/
Redux Toolkit: https://redux-toolkit.js.org/

목차

Promise 기반 라이브러리: axios

비동기 플로우 관리 라이브러리: RxJS

상태 관리 라이브러리: Redux Toolkit

참고 자료