[typescript] 비동기 작업 중의 프로그레스 바 표시 방법

14 Dec 2023

typescript

비동기 작업을 수행할 때 사용자에게 진행 상황을 시각적으로 표시하는 것은 매우 중요합니다. 이를 통해 사용자는 작업이 얼마나 진행되었는지를 알 수 있고, 그 과정에서의 지연이나 에러 등을 인지할 수 있습니다.

이 포스트에서는 TypeScript로 비동기 작업 중에 프로그레스 바를 표시하는 여러 가지 방법을 살펴보겠습니다.

1. Axios와 진행률 표시

Axios를 이용하여 API 호출을 할 때, axios interceptor를 활용하여 진행률을 표시할 수 있습니다. Axios interceptor를 사용하면 요청과 응답의 중간에 코드를 실행할 수 있습니다. 이를 이용하여 프로그레스 바를 표시하고 감추는 로직을 추가할 수 있습니다.

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

// 요청 전에 실행되는 코드
axios.interceptors.request.use((config: AxiosRequestConfig) => {
    // 프로그레스 바 표시 로직 추가
    return config;
});

// 응답 후에 실행되는 코드
axios.interceptors.response.use((response: AxiosResponse) => {
    // 프로그레스 바 감추는 로직 추가
    return response;
});

2. RxJS를 이용한 진행률 표시

RxJS를 사용하여 프로그레스 바를 표시하는 방법도 있습니다. ajax 또는 fetch 등을 사용하여 비동기 요청을 보낼 때, RxJS의 Observable을 이용하여 진행률을 표시할 수 있습니다.

import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';

ajax('/api/data')
    .pipe(
        map(response => {
            // 프로그레스 바 표시 로직 추가
            return response;
        })
    )
    .subscribe(response => {
        // 프로그레스 바 감추는 로직 추가
        console.log(response);
    });

3. 직접 상태 관리하여 표시

마지막으로, 직접 상태를 관리하여 프로그레스 바를 표시하는 방법도 있습니다. 상태 관리 라이브러리를 사용하지 않고, 간단한 JavaScript로도 상태를 관리하여 진행률을 표시할 수 있습니다.

let loading = true;

// 비동기 작업 시작 시
loading = true;

// 비동기 작업 종료 시
loading = false;

마치며

이 포스트에서는 TypeScript를 사용하여 비동기 작업 중에 프로그레스 바를 표시하는 방법에 대해 살펴보았습니다. Axios interceptor, RxJS, 그리고 직접 상태를 관리하는 방법 등 다양한 방법을 사용하여 프로그레스 바를 표시할 수 있습니다. 각 상황에 맞게 적절한 방법을 선택하여 사용하면 됩니다.

참고 문헌:

Axios interceptor: https://github.com/axios/axios#interceptors
RxJS: https://rxjs-dev.firebaseapp.com/api/ajax/ajax