RxJS 7이 출시되었습니다 🎉

소개



RxJS v7.0.0은 1년 이상의 긴 베타 기간을 거쳐 불과 며칠 전에 출시되었습니다. 주당 ~2,400만 다운로드로 JavaScript에 사용되는 가장 많이 사용되는 반응형 확장 라이브러리입니다.
Npm page

아직 제거되지는 않았지만 나중에 제거될 많은 지원 중단 사항이 있으므로 RxJS 업데이트에 시간을 할애하는 것이 좋습니다!

새로운 기능



이전의 주요 패키지 업데이트만큼 업그레이드된 것은 아니지만 버전 6과 7 사이에는 몇 가지 눈에 띄는 차이점이 있습니다. 자세히 살펴보겠습니다.

더 작은 번들 크기



최종적으로 번들 크기를 줄일 수 있는 가능성이 있는지 확인하기 위해 제작자가 전체 패키지를 살펴보았다는 점은 가치가 있습니다. 내가 보고 읽은 것처럼 앱에는 주요 리팩터링이 없었습니다.



축소 크기가 그다지 눈에 띄지 않을 수도 있지만 모든 kB는 특히 모바일에서 느린 네트워크로 계산됩니다. 차트에서 감소 추세를 볼 수 있습니다. 좋은 방법입니다. :)

번들 크기는 여기Bundlephobia에서 확인할 수 있습니다.

최신 TypeScript 및 더 나은 유형 간섭



RxJS는 최신 TypeScript(2021.05.06 기준)를 사용하며 다양한 유형을 방해하는 실질적인 개선 사항도 있습니다. 약 ~7/8 인수 RxJS가 유형을 처리할 수 없었던 제한이 더 이상 존재하지 않습니다!

이것에 대한 또 다른 예가 있습니다. 이것을 살펴 보겠습니다.

of(new Date(), null, undefined)
  .pipe(filter(Boolean))
  .subscribe();


이제 유형은 Observable<Date> 이지만 RxJS 6에서는 Observable<undefined> 였습니다.

toPromise 지원 중단



누군가에게는 관련이 없을 수도 있지만 많은 프로젝트가 이로 인해 영향을 받을 수 있습니다. toPromise는 RxJS 7에서 더 이상 사용되지 않으며 firstValueFromlastValueFrom라는 두 개의 새로운 연산자가 이를 대체합니다. 많은 코드베이스의 안정성이 크게 향상되었습니다.

이름에서 알 수 있듯이 firstValueFrom는 스트림의 첫 번째 값으로 확인되고 lastValueFrom 관찰 가능한 스트림의 마지막 값으로 반환됩니다. 내보낸 값이 없으면 오류가 발생합니다. 정의되지 않은 상태로 간단하게 해결되는 toPromise와는 다릅니다.

연산자 이름 변경



나는 우리가 "RxJS의 연산자가 더 수다스러운 이름을 가질 수 있기를 바란다"는 팀과 토론을 했던 것을 기억합니다. 발생하여 다음 연산자의 이름이 변경되었습니다.
  • CombineLatest -> CombineLatestWith
  • 병합 -> mergeWith
  • zip -> zipWith
  • concat -> concatWith
  • 레이스 -> 레이스와 함께

  • resetOnSuccess를 사용한 재시도 연산자



    이전에는 재시도 연산자의 매개변수가 성공적인 시도 후에 재설정되지 않았습니다. 이제 이를 나타내는 구성 옵션이 있습니다.

    ...
    retry({ count: 2, resetOnSuccess: true })
    ...
    


    여러 콜백 옵션 제거



    RxJS 7에서는 done, error, complete에 대한 다중 콜백이 tapsubscribe 에서 제거되었습니다. 이제 이러한 구성을 위해 객체를 전달해야 합니다. 단지 두 번 생각하고 확인하도록 하기 위해서입니다.

    자, 대신에

    obs$.pipe(tap(
      data => console.log(data),
      error => console.log(error)
    )).subscribe(
      data => console.log(data),
      error => console.log(error)
    )
    


    이제 다음을 수행해야 합니다.

    source$.pipe(tap(
      data => console.log(data)
    )).subscribe(
      {
        next:  data => console.log(data), 
        error:  err => console.log(err),
      }
    )
    


    더 빠르게



    일부 트윗과 토론에 따르면 개발자는 RxJS 7이 더 빠르다고 주장합니다. 그래도 시간의 흐름을 견뎌야 하지만 그렇게 될 것이라고 생각합니다. :)


    각주

    물론 RxJS에는 몇 가지 다른 업데이트가 있으며 이 패키지를 출시한 개발자 팀에 감사드립니다. 다음 링크에서 업데이트에 대한 자세한 내용을 읽을 수 있습니다.

    Change summary
    Medium article
    inDepth article

    좋은 웹페이지 즐겨찾기