수정하기 - switchMap을 사용하여 파일 업로드 요청을 처리하는 방법은?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

switchMap은 <a href='https://sangseek.com/sangseeks/RxJS/ko'>RxJS</a>에서 사용하는 연산자로, 주로 Observable 내에서 새로운 Observable을 생성하고 이전에 실행 중이던 Observable을 취소(cancelling)할 때 유용합니다. 파일 업로드 요청과 같은 비동기 작업을 다룰 때 switchMap을 사용하면 사용자가 빠르게 연속해서 파일을 업로드하거나 업로드를 취소하는 경우 이전 업로드 요청을 취소하고 최신 업로드 요청만 수행할 수 있습니다.           switchMap을 사용하여 파일 업로드 요청 처리하기    1.   이벤트 스트림 생성       먼저, 파일 선택 이벤트(예: `<input type="file">`에서 파일이 선택되는 이벤트)를 RxJS의 Observable로 만듭니다. 예를 들어, `fromEvent`를 사용해 파일 선택 이벤트를 감지합니다.    2.   switchMap 적용하기       파일 선택 이벤트가 발생하면, 선택된 파일을 서버로 업로드하는 HTTP 요청 Observable을 생성합니다. 이 때 switchMap을 사용해, 이전 업로드 요청이 진행 중이라면 이를 취소하고 새 요청으로 대체할 수 있도록 합니다.    3.   업로드 요청 구현       업로드 요청은 Angular의 HttpClient 등에서 반환하는 Observable로 구현됩니다. 단일 파일 업로드라면 폼 데이터(FormData)에 파일을 첨부해 POST 요청을 보내는 형식이 일반적입니다.    4.   결과 처리 및 에러 핸들링       업로드 요청이 성공하면 성공 결과를 처리하며, 실패하면 에러 처리를 수행합니다. switchMap 내부 또는 외부에 `catchError`를 추가해서 에러가 발생해도 스트림이 중단되지 않도록 할 수 있습니다.    ---           상세 코드 예시 (Angular + RxJS 기준)    ```typescript  import { Component, ElementRef, ViewChild } from '@angular/core';  import { fromEvent, Observable } from 'rxjs';  import { switchMap, catchError } from 'rxjs/operators';  import { HttpClient } from '@angular/common/http';    @Component({    selector: 'app-file-upload',    template: `      <input   fileInput type="file" />      <div *ngIf="uploadResult">{{ uploadResult }}</div>    `  })  export class FileUploadComponent {    @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;    uploadResult: string | null = null;      constructor(private http: HttpClient) {}      ngAfterViewInit() {      const fileInput$ = fromEvent(this.fileInput.nativeElement, 'change');        fileInput$.pipe(        // switchMap은 새로운 파일이 선택되면 이전 업로드 진행 중이라도 취소하고 새 업로드 시작        switchMap((event: Event) => {          const input = event.target as HTMLInputElement;          if (!input.files || input.files.length === 0) {            return new Observable<never>(observer => observer.complete());          }          const file = input.files[0];          // FormData에 파일 첨부          const formData = new FormData();          formData.append('file', file);            // 파일 업로드 HTTP 요청, POST 방식 예시          return this.http.post('/api/upload', formData).pipe(            catchError(error => {              // 에러 발생 시 처리 로직 추가              this.uploadResult = '업로드 실패: ' + error.message;              // 빈 Observable 반환하여 스트림 종료 방지              return new Observable(observer => observer.complete());            })          );        })      ).subscribe(response => {        // 업로드 성공 시 처리 로직        this.uploadResult = '업로드 성공!';        console.log('Upload response:', response);      });    }  }  ```           작동원리 정리    - 사용자가 파일을 선택하면 `fromEvent`가 이벤트를 감지해 Observable 스트림을 발생시킵니다.  - `switchMap`은 새로운 파일이 선택되면 이전 업로드 Observable을 취소(cancel)하고 새로운 업로드 Observable로 전환합니다.  - 이를 통해 네트워크 낭비를 줄이고, 사용자가 빠르게 파일을 바꿔 올려도 마지막 파일만 서버에 업로드됩니다.  - 에러가 발생해도 스트림은 끊기지 않으며 사용자는 에러 메시지를 확인할 수 있습니다.    ---           요약    -   switchMap  은 이전 업로드를 취소하고 최신 업로드만 유지하도록 만듭니다.  - 파일 선택 이벤트를 RxJS Observable로 만들고 switchMap 내에서 파일 업로드 HTTP 요청을 반환합니다.  - 업로드 중복이나 네트워크 낭비를 방지할 수 있으며, UI 반응성도 좋아집니다.    switchMap을 활용한 파일 업로드는 최종 사용자 경험 개선과 코드 간결성, 오류 관리 등에서 매우 유용합니다.