RxJS와 반응

RxJS는 소프트웨어 개발에서 반응식 프로그래밍의 범례를 실현하는 완벽한 도구다.일반적으로 소프트웨어 개발이 오류를 우아하게 처리하는 것은 응용 프로그램의 완전성을 확보하고 최상의 사용자 체험을 확보하는 기본 요소이다.
본고에서 우리는 RxJS를 사용하여 오류를 처리하는 방법을 소개한 다음에 RxJS를 사용하여 간단하지만 성능이 좋은 응용 프로그램을 구축하는 방법을 소개할 것이다.

오류 처리
우리가 잘못을 대하는 일반적인 방법은 통상적으로 큰 소리로 "아니야! 뭐가 문제야?"라고 외치는 것이다.그러나 이것은 모든 응용 프로그램에서 흔히 볼 수 있다.사용자 경험을 중단하지 않고 오류를 효과적으로 관리하고 정확한 오류 로그를 제공하여 오류의 원인을 전면적으로 진단하는 것이 그 어느 때보다 중요하다.
RxJS는 우리에게 이 일을 잘 완성할 수 있는 도구를 제공했다.RxJS의 몇 가지 기본적인 오류 처리 방법을 보여 드리겠습니다.

기본 오류 처리.subscribe()을 검측하고 대응하는 방법은 흐름 속에서 발생하는 오류를 관찰할 수 있는 가장 기본적인 방법을 제공한다.

obs$.subscribe(
    value => console.log("Received Value: ", value),
    error => console.error("Received Error: ", error)
)

여기서 우리는 두 개의 서로 다른 논리 부분을 설정할 수 있는데 하나는 관찰 대상이 내는 비 오류를 처리하는 데 사용되고 다른 하나는 관찰 대상이 내는 오류를 우아하게 처리하는 데 사용된다.
이 기능을 사용하여 사용자에게 오류가 발생했음을 알리는 알림 또는 경고를 표시할 수 있습니다.

obs$.subscribe(
    value => console.log("Received Value: ", value),
    error => showErrorAlert(error)
)

이것은 우리가 사용자에 대한 방해를 최대한 줄이고, 그들에게 즉각적인 피드백을 제공하며, 그들이 추측하지 못하게 하는 것이 아니라, 실제적으로 응당한 역할을 발휘하지 못했다는 것을 알려줄 수 있다.

유용한 오류 작성
그러나 때때로 우리는 자신이 잘못을 던지려고 하는 상황을 만날 수 있다.예를 들어, 우리가 받은 일부 데이터가 정확하지 않거나, 일부 검증 검사가 실패했다.
RxJS는 우리가 이 점을 할 수 있도록 운영자를 제공했다.예를 들어, 우리는 API에서 값을 받았지만, 잃어버린 데이터를 만났기 때문에 프로그램의 다른 방면이 정상적으로 실행되지 못할 것이다.

obs$
  .pipe(
    mergeMap((value) =>
      !value.id ? throwError("Data does not have an ID") : of(value)
    )
  )
  .subscribe(
    (value) => console.log(value),
    (error) => console.error("error", error)
  );

만약 우리가 ID를 포함하지 않는 관찰 대상이 하나의 값을 받아들인다면, 우리는 우아하게 처리할 수 있는 오류를 던질 것이다.
주: throwError을 사용하면 더 이상 측정할 수 있는 배출을 받지 않습니다.

고급 오류 처리
우리는 사용자에게 너무 많은 방해를 초래하는 것을 방지하기 위해 오류를 반응적으로 처리할 수 있다는 것을 이미 알고 있다.
그러나 오류가 발생하거나 재시도될 때 여러 작업을 수행하려면 어떻게 해야 합니까?
RxJS는 retry() 연산자를 사용하여 오류의 관측 값을 매우 간단하게 다시 시험할 수 있게 한다.
따라서 RxJS에서 더 깨끗한 오류 처리 설정을 만들기 위해 우리는 오류 관리 솔루션을 설정할 수 있다. 이 솔루션은 관찰 대상으로부터의 모든 오류를 수신하고 이 오류를 다시 시도하여 성공적으로 발사하고 실패하면 우아하게 오류를 처리할 수 있다.

obs$
  .pipe(
    mergeMap((value) =>
      !value.id ? throwError("Data does not have an ID") : of(value)
    ),
    retry(2),
    catchError((error) => {
        // Handle error gracefully here
      console.error("Error: ", error);
      return EMPTY;
    })
  )
  .subscribe(
    (value) => console.log(value),
    () => console.log("completed")
  );

일단 우리가 오류에 도달하면, EMPTY의 가시광선을 보내면 가시광선을 완성할 것이다.상기 오차 발사의 출력은 다음과 같다.

Error: Data does not have an ID
completed 

프런트엔드 개발에서의 사용
RxJS는 자바스크립트를 실행하는 모든 곳에서 사용할 수 있습니다.그러나, 나는 그것이 주로 각 부호기에 쓰인다고 생각한다.Angular에서 RxJS를 올바르게 사용하면 어플리케이션의 성능을 크게 향상시키고 Container-Presentational Component Pattern을 유지 관리할 수 있습니다.
Angular의 아주 간단한 Todo 프로그램을 살펴보고 RxJS를 어떻게 효과적으로 사용하는지 봅시다.

기본 업무 활용
우리는 이 응용 프로그램에 두 개의 구성 요소가 있을 것이다. 그것이 바로 AppComponent과 ToDoComponent이다.먼저 ToDoComponent을 살펴보겠습니다.

import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  Output
} from "@angular/core";

export interface Todo {
  id: number;
  title: string;
}

@Component({
  selector: "todo",
  template: `
    <li>
      {{ item.title }} - <button (click)="delete.emit(item.id)">Delete</button>
    </li>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ToDoComponent {
  @Input() item: Todo;
  @Output() delete = new EventEmitter<number>();
}

아주 간단하죠?item 입력을 받고 삭제 단추를 눌렀을 때 이벤트를 출력합니다.정확한 HTML을 보여주는 것 외에 그 자체가 진정한 논리를 실행하지 않는다.
주의해야 할 것은 changeDetection: ChangeDetectionStrategy.OnPush이다.이것은 각도 변화 검사 시스템에 Input이 변할 때만 이 구성 요소를 다시 렌더링하려고 시도해야 한다는 것을 알려 줍니다.
이렇게 하면 각도 응용 프로그램의 성능을 크게 향상시킬 수 있을 뿐만 아니라, 데이터만 렌더링해야 하기 때문에, 구성 요소만 렌더링하는 데 시종일관 적용해야 한다.
이제 AppComponent을 살펴보겠습니다.

import { Component } from "@angular/core";
import { BehaviorSubject } from "rxjs";
import { Todo } from "./todo.component";

@Component({
  selector: "my-app",
  template: `
    <div>
      <h1>
        ToDo List
      </h1>
      <div style="width: 50%;">
        <ul>
          <todo
            *ngFor="let item of (items$ | async); trackBy: trackById"
            [item]="item"
            (delete)="deleteItem($event)"
          >
          </todo>
        </ul>
        <input #todoTitle placeholder="Add item" /><br />
        <button (click)="addItem(todoTitle.value, todoTitle)">Add</button>
      </div>
    </div>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  private items: Todo[] = [{ id: 1, title: "Learn RxJS" }];
  items$ = new BehaviorSubject<Todo[]>(this.items);

  addItem(title: string, inputEl: HTMLInputElement) {
    const item = {
      id: this.items[this.items.length - 1].id + 1,
      title,
      completed: false
    };
    this.items = [...this.items, item];
    this.items$.next(this.items);

    inputEl.value = "";
  }

  deleteItem(idToRemove: number) {
    this.items = this.items.filter(({ id }) => id !== idToRemove);
    this.items$.next(this.items);
  }

  trackById(index: number, item: Todo) {
    return item.id;
  }
}

이것은 용기 구성 요소입니다. 구성 요소 상태 업데이트와 관련된 논리를 처리하고, 부작용을 처리하거나 분배하기 때문입니다.
관심 분야를 살펴보겠습니다.

private items: Todo[] = [{ id: 1, title: "Learn RxJS" }];
items$ = new BehaviorSubject<Todo[]>(this.items);

우리는 우리의 업무 내용을 저장하기 위해 기본적인 로컬 상점을 만들었다.그러나 이 작업은 상태 관리 시스템 또는 API를 통해 수행할 수 있습니다.
그리고 Observable를 설정하면 구독 중인 모든 사람에게 업무 목록의 값을 전송합니다.
이제 코드를 볼 수 있습니다. items$을 어디서 구독했는지 알고 싶습니다.
Angular는 우리에게 이 문제를 처리하기 위해 매우 편리한 Pipe을 제공했다.템플릿에 표시되는 내용은 다음과 같습니다.

*ngFor="let item of (items$ | async); trackBy: trackById"

특히 (items$ | async)으로 관찰 대상에서 보낸 최신 값을 가져와 템플릿에 제공합니다.하지만 그 역할은 이뿐만이 아니다.구독을 관리할 것입니다. 이 용기 구성 요소를 삭제하면 구독을 자동으로 취소합니다. 의외의 결과를 방지하기 위해서입니다.
Angular에서 순수 파이프를 사용하면 또 다른 성능 이점이 있습니다.파이프의 입력이 변할 때만 파이프에서 코드를 다시 실행할 수 있습니다.우리의 예에서, 이것은 item$이 async 파이프의 코드를 다시 실행하기 위해 새로운 관찰 대상으로 바뀌어야 한다는 것을 의미한다.우리는 item$을 영원히 바꿀 필요가 없다. 왜냐하면 우리의 가치관은 관찰할 수 있는 데이터 흐름을 통해 전달되기 때문이다.

결론
오류를 효과적으로 처리하는 방법과 RxJS를 실제 응용 프로그램에 적용함으로써 응용 프로그램의 전체 성능을 향상시키는 방법을 알고 싶습니다.RxJS를 효과적으로 사용하면 가져올 수 있는 힘을 보실 수 있습니다!
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, 웹 구성 요소, GraphQL, Node, Bazel 또는 Polymer에 대한 전문가 아키텍처 지침, 교육 또는 컨설팅은 thisdotlabs.com을 참조하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용성과 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 thisdot.co을 참조하십시오.