RxJS 또는 Reactive Extension For Javascript 각도를 깊이 연구하기 전에 우리는 RxJS가 무엇인지 알아야 한다.RxJs는 기능이 강한 자바스크립트 라이브러리로 Observables 개념을 사용하는 반응식 프로그래밍에 사용된다.이것은 웹 개발에서 가장 핫한 라이브러리 중 하나로 강력한 기능성 방법을 제공하여 사건을 처리하고 집적점을 점점 더 많은 프레임워크, 라이브러리, 실용 프로그램에 집적한다. Rx를 배우는 사례는 이렇게 매력적이지 않다.

그 문건에 의하면

Think of RxJS as Lodash for events.

ReactiveX 또는 RxJS는 내부에서 Observer Pattern 와 함께 작업합니다. 그 중 한 개체 (우리는 Subject라고 부른다) 는 의존 관계를 유지하고 상태가 변할 때 알림을 보냅니다.

RxJS를 선택해야 하는 이유

RxJS는 함수식 프로그래밍의 기본 원리를 따르기 때문에 사건에 각종 유형Pure Function을 제공한다.이것은 단지 당신의 코드가 쉽게 틀리지 않는다는 것을 의미할 뿐입니다.일반적으로 우리는 코드가 증가할 때, 이 함수들이 코드를 흐트러뜨릴 수 있는 불순한 함수를 만들 것이다.

시냇물

RxJS는 모든 활동에서 응용 프로그램으로 사용할 수 있습니다Streams.흐름은 기본적으로 Observables의 정의이며, 우리는 그 뒤에서 토론한다.흐름 API는 블록 형식으로 데이터 시퀀스를 얻을 수 있습니다. 우리는 보통 API에서 작은 블록 데이터의 빅데이터를 얻습니다.RxJS 흐름 자체에는 많은 하위 API가 포함되어 있기 때문에 웹 API와 관련된 일상적인 작업 (예를 들어 마우스 이벤트, 키보드 이벤트 또는 백엔드 서비스에서 직접 온 데이터) 을 더욱 쉽게 할 수 있다.
이제 RxJS 비동기식 이벤트 관리에 기반한 기본 개념을 살펴보겠습니다.

관찰 가능 값

위에서 논의한 바와 같이 관측 가능한 값은 흐름의 정의나 성명이며, 그 수단은 우리가 수시로 끊임없이 얻는 미래 사건이나 값의 집합이다.거의 모든 것에서 관찰 대상을 만들 수 있지만, RxJS에서 가장 흔히 볼 수 있는 용례는 이벤트입니다.관찰 가능한 객체를 만드는 가장 간단한 방법은 RxJS에서 제공하는 내장 함수를 사용하는 것입니다.Angular는 기본적으로 멋진 라이브러리를 제공하기 때문에 명시적으로 설치할 필요가 없습니다.
코드 세션을 살펴보겠습니다.
참고: ng-run.com 에서 온라인으로 코드 세그먼트를 시도하여 이러한 코드 세그먼트에만 각도 항목을 만들 필요가 없습니다.

import { Component, VERSION, OnInit } from '@angular/core';
import { interval, fromEvent } from "rxjs";      // <----------- importing rxjs lib 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    const interval$ = interval(2000);  //<-- interval func. same as setinterval in vanilla javascript
    interval$.subscribe(val => console.log(val)) // subscribed to listen our stream of numbers
  }
}

이 코드를 실행하면 F-12 키를 누르면 크롬 디버깅 도구를 열고 컨트롤러 옵션 카드를 검사합니다.2초 지연되면 숫자가 표시됩니다.
상량 변수 interval$ 를 만들었습니다. 왜 변수 이름 $ 을 추가했는지 알고 싶을 수도 있습니다.이것은 단지 관찰할 수 있는 표준일 뿐, 이 변수가 관찰할 수 있다는 것을 의미한다.
다음 간단한 코드 예제를 살펴보겠습니다.

import { Component, VERSION, OnInit } from '@angular/core';
import { interval, fromEvent } from "rxjs";      // <----------- importing rxjs lib 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    const clickEvt$ = fromEvent(document, 'click');
    clickEvt$.subscribe(evt => console.log(evt))
  }
}

이 코드를 실행하면 브라우저 문서의 모든 위치를 누르면 컨트롤러에서 볼 수 있습니다 mouse click event. 클릭할 때마다 이벤트 흐름을 만들어서 정탐하기 때문입니다.

구독

구독은 모든 것을 시작하는 기초이다.이것은 Observable의 실행이라고 할 수 있습니다. 여기서 이벤트를 구독하고 필요에 따라 데이터를 비추거나 변환할 수 있습니다.구독을 만들려면subscribe 방법을 호출하여 함수(또는 대상)를 제공할 수 있습니다. - 관찰자라고도 합니다.구독은 어떤 매개 변수도 필요 없고 구독 처리/종료를 책임지는 중요한 방법이 있다.구독은 RxJS의 이전 릴리즈에서 "일회성"으로 불렸습니다.

import { Component, OnInit } from '@angular/core';
import { fromEvent } from "rxjs";
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  ngOnInit() {
    const clickEvt$ = fromEvent(document, 'click');
    clickEvt$.subscribe(evt => console.log(evt))
  }
}

위의 코드 세그먼트에서, 우리는 문서의 임의의 위치에 클릭 이벤트 탐지기를 설정한 다음, 문서를 클릭할 때마다subscribe 방법을 전달하고, 정리 논리 (예를 들어 이벤트 삭제) 를 포함하는 Unsubscribe 대상을 되돌려줍니다.
주의해야 할 것은 모든 구독자가 자신의 실행 상하문을 만들 것이다. 이것은 두 번째 호출 unsubscribe() 방법이 새로운 이벤트 탐지기를 만들 것이라는 것을 의미한다.

import { Component, OnInit } from '@angular/core';
import { fromEvent } from "rxjs";
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  ngOnInit() {
    const clickEvt$ = fromEvent(document, 'click');
    const keyUpEvt$ = fromEvent(document, 'keyup');
    clickEvt$.subscribe(evt => console.log(evt));
    keyUpEvt$.subscribe(evt => console.log(evt));
  }
}

구독은 관찰자와 관찰자 사이에 일대일, 일방적인 대화를 만들어 단방이라고도 부른다.주의해야 할 것은 우리가 관찰자에게 데이터를 보내는 관찰원을 토론할 때 이것은 추측을 바탕으로 하는 모델이다.원본 코드는 구독자가 데이터에 대해 무엇을 하는지 모르거나 무관심하며, 단지 그것을 끝까지 미루는 것일 뿐이다.

조작원

계산이 없으면 RxJS는 관측할 수 있는 것이 기초일지라도 완전하지 않다.연산자는 RxJS의 일부 순수한 함수로, 변환된 값을 되돌려 주는 관찰 가능한 원본의 데이터를 처리한다.많은 RxJS 조작부호는 일반적인 자바스크립트 함수와 유사하다. 예를 들어 그룹화 subscribe 에 사용된다.다음은 Rxjs 코드의 내용입니다.

import { Component, OnInit } from '@angular/core';
import { fromEvent, of } from "rxjs";
import { map } from "rxjs/operators";
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  ngOnInit() {
   const transformedData = of(1,2,3,4,5,6)
      .pipe(map((val: any) => val * 5))
      .subscribe(data => console.log(data));
  }
}

구독에서 이 모든 숫자가 map 에 곱하는 것을 볼 수 있습니다. 컨트롤러 5 를 사용하면 특정한 관찰 가능한 값을 표시합니다.
RxJS를 배우기 시작하면 처음에는 많은 연산자가 있을 수 있습니다.우리는 분명히 이 모든 연산자를 포함하지 않지만, 응용 프로그램에서 사용할 수 있는 가장 일반적인 연산자에 대한 상세한 정보를 제공할 것입니다.
가장 흔히 볼 수 있는 것부터 시작하자.

관리하다

파이프 함수는 관찰할 수 있는 데이터 원본에서 조작부호를 통해 생성된 조립선이다.이것은 파이프 함수에 포함된 관찰 체인에 여러 개의 연산자를 사용하는 데 사용된다.우리는 transformedData 함수에서 여러 개의 연산자를 실현하여 가독성을 높일 수 있다.

import { Component, OnInit } from '@angular/core';
import { fromEvent, of } from "rxjs";
import { map } from "rxjs/operators";
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  ngOnInit() {
   const transformedData = of(1,2,3,4,5,6)
      .pipe(map((val: any) => val * 5))
      .subscribe(data => console.log(data));
  }
}

... 에 속하다

또 다른 가장 흔하고 간단한 RxJS 연산자는 pipe 함수입니다.그것은 단지 데이터 원본에서 순서대로 모든 값을 보내고 완전한 통지를 보낼 뿐이다.

rxjs 공식 사이트의 공식 대리석 이미지Of 연산자의 코드 세그먼트

import { Component, OnInit } from '@angular/core';
import { of } from "rxjs";
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  ngOnInit() {
    const person = { name: 'John Doe', age: 22 };  //<-- simple object
    const personObs = of(person);                  //<-- convert object into stream
    personObs.subscribe(data => console.log(data)) //<-- execute observable
  }
}

RxJS는 6가지 유형의 연산자를 기반으로 합니다.
1) 연산자 생성
2) 조합 연산자
3) 오류 처리 연산자
4) 필터링 연산자
5) 멀티캐스트 사업자
6) 변환 연산자

연산자 생성

생성 연산자는 위의 예와 같이 관찰 가능한 함수를 다른 데이터 형식에서 생성하거나 관찰 가능한 함수로 변환하는 데 사용할 수 있습니다.유니버설 용례에서 특정 용례까지 당신은 자유롭고, 격려를 받으며 방향을 바꿀 수 있습니다 everything into a stream.생성된 연산자에는 여러 가지other operators가 포함됩니다.
다음은 RxJS Ajax 모듈을 사용한 간단한 생성 연산자 예입니다.

import { Component, VERSION, OnInit } from '@angular/core';
import { ajax } from 'rxjs/ajax';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.full;
  githubUsers = `https://api.github.com/users`;
  users = ajax({ url: this.githubUsers, method: "GET" })
  ngOnInit() {
    const subscribe = this.users.subscribe(
      res => console.log(res.response),
      err => console.error(err)
    );
  }
}

조합 연산자

조합 산자도 연결 산자라고 하는데 여러 관찰 값의 데이터 연결을 허용한다.발사 값은 이 연산자 간의 주요 변화이다.조합 연산자에는 많은 것들이 포함되어 있습니다 other operators.
이것은 가장 흔히 볼 수 있는 조합 연산자의 예이다.

import { Component, VERSION, OnInit } from '@angular/core';
import { fromEvent, interval } from 'rxjs';
import { map, combineAll, take } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.full;
  ngOnInit() {
    const clicks = fromEvent(document, 'click');
    const higherOrder = clicks.pipe(
      map(
        ev => interval(Math.random() * 2000).pipe(take(3))
      ), take(2)
    );
    const result = higherOrder.pipe(combineAll())

    result.subscribe(data => console.log(data));
  }
}

이 예에서 우리는 Of 및 clicks 개의 관찰 가능한 항목을 조합한 결과를 구독 higherOrder 개의 관찰 가능한 항목을 통해 컨트롤러에 표시합니다.

오류 처리 연산자

잘못은 발전의 불행한 부작용이다.이 연산자들은 우아하게 오류를 처리하고 오류가 발생했을 때 논리를 다시 시도할 수 있는 효과적인 방법을 제공한다.일부 other operators are 는 오류 처리 문자에 포함되어 있습니다.
다음은 result 처리 연산자의 예입니다. 새로운 관찰 가능한 대상을 되돌리거나 오류를 던져 처리할 관찰 가능한 대상의 오류를 포착합니다.

import { Component, VERSION, OnInit } from '@angular/core';
import { of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.full;
  ngOnInit() {
    of(1, 2, 3, 4, 5).pipe(
      map(num => {
        if (num == 4) throw 'Four!'
        return num
      }),
      catchError(err => of('I', 'II', 'III', 'IV', 'V')),
    )
      .subscribe(data => console.log(data))
  }
}

필터링 연산자

필터 산자는 관찰할 수 있는 원본의 값을 받아들이거나 줄이고 흐름의 값을 처리하는 누적된 기술을 제공한다.이 연산자는 catchError와 유사하며, 발사값을true로 생성합니다.
이것은 RxJS에서 가장 간단한 연산자 예입니다.

import { Component, VERSION, OnInit } from '@angular/core';
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.full;
  ngOnInit() {
    const source = from([
      { name: 'Joe', age: 31 },
      { name: 'Bob', age: 25 }
    ]);

    //filter out people with age under 30
    const example = source.pipe(filter(person => person.age >= 30));
    //output: "Over 30: Joe"
    const subscribe = example.subscribe(val => console.log(`Over 30: ${val.name}`))
  }
}

멀티캐스트 사업자

RxJS에서는 관찰 값이 차갑고 기본적으로 단독 방송입니다.이런 운영자들은 관찰할 수 있는 핫이슈나 멀티캐스트를 만들어 여러 구독자 간에 부작용을 공유할 수 있다.
표준 테마가 있는 Array.prototype.filter 연산자 예,

import { Component, VERSION, OnInit } from '@angular/core';
import { Subject, interval, ConnectableObservable } from 'rxjs';
import { take, tap, multicast, mapTo } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.full;
  ngOnInit() {
    //emit every 2 seconds, take 5
    const source = interval(2000).pipe(take(5));

    const example = source.pipe(
      //since we are multicasting below, side effects will be     executed once
      tap(() => console.log('Side Effect #1')),
      mapTo('Result!')
    );

    //subscribe subject to source upon connect()
    const multi = example.pipe(multicast(() => new Subject())) as ConnectableObservable<number>;
    /*
      subscribers will share source
      output:
      "Side Effect #1"
      "Result!"
      "Result!"
      ...
    */
    const subscriberOne = multi.subscribe(val => console.log(val));
    const subscriberTwo = multi.subscribe(val => console.log(val));
    //subscribe subject to source
    multi.connect()
  }
}

위의 예에서 우리는 filter 함수의 유형으로 multicast 함수는 connectObservable<number>만 되돌려주지만 pipe 연산자는 pipe 되돌려주기 때문에 이것은 우리가 어떻게 Observable 함수와 mutlicast 명칭을observable로 얻는가이다.여기서 더 많은 것을 알 수 있다Connectable Observable

변환 연산자

값이 조작원 체인을 통과할 때 값을 바꾸는 것은 흔히 볼 수 있는 작업이다.이 조작부호들은 당신이 만날 거의 모든 용례에 변환 기술을 제공합니다.위의 몇 가지 예시에서 우리는 connectObservable, connect, multi & mapTo 등 변환 연산자를 사용했다.다음은 모든 것operators in transformation operators이다.
가장 흔히 볼 수 있는 변환 연산자의 예시를 살펴보자.

import { Component, VERSION, OnInit } from '@angular/core';
import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { mergeMap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.full;
  ngOnInit() {
    // free api url
    const API_URL = 'https://jsonplaceholder.typicode.com/todos/1';

    // streams
    const click$ = fromEvent(document, 'click');
    click$
      .pipe(
        /*
         * Using mergeMap for example, but generally for GET requests
         * you will prefer switchMap.
         * Also, if you do not need the parameter like
         * below you could use mergeMapTo instead.
         * ex. mergeMapTo(ajax.getJSON(API_URL))
         */
        mergeMap(() => ajax.getJSON(API_URL))
      )
      // { userId: 1, id: 1, ...}
      .subscribe(console.log);
  }
}

위의 예에서 우리는 map 관찰치와 우리가 scan에서 얻은 응답을 합친다.문서의 아무 곳이나 클릭하면 콘솔의 API에서 응답을 받습니다.
다음은 본고에서 기술한 모든 주요 조작부호입니다. 저는 당신이 RxJS에 관한 새로운 지식을 배울 수 있기를 바랍니다.다음은 RxJS의 더 많은 자원입니다.
https://www.learnrxjs.io/
https://rxjs.dev/
https://www.learnrxjs.io/learn-rxjs/recipes
만약 당신이 좋아한다면, 당신의 범위 안에서 공유하고, 나를 따라 이런 간단한 문장을 더 많이 읽어 주십시오.
평화롭다✌️✌️✌️