Angular : RxJS, XSS 관련 예제 3. RxJS 설명

1. 이 포스트는 RxJS와 XSS와 관련된 시리즈의 연속포스트이다.

 

2. RxJS는 Angular와는 완전히 별도의 프로젝트로 비동기식 데이터 처리에 사용되는 함수형 라이브러리이다.

  2-1 java 베이스로 Reactive 프로그램에 익숙하면 쉽게 이해할 수 있다. 개념이 동일하다.

 

3. RxJS에는 4가지의 주요 요소들이 있다.

  3-1 데이터 소스인 Observable - Subject 클래스나 HttpClient의 메소드 호출로 반환

  3-2 데이터를 흘려보내는 Pipe - Observable 객체의 메소드로 실행한다. 개념적인 내용이다.

  3-3 pipe내에서 데이터를 가공하는 operators - pipe 메소드에 인자로 들어가며 순서대로 실행된다.

  3-4 데이터를 받아서 사용하는 Observer - subscribe를 통해 데이터를 받아온다.

 

4. 다양한 operators가 존재하는데 문제를 여러 방식으로 해결할 수 있다.

  4-1 아래 링크를 보면 operators 목록과 설명을 볼 수 있다.

RxJS

  4-2 지난 포스트에서 wiki 서비스의 search 메소드는 여러방법으로 구현가능하다.

    4-2-1 보통 하나의 operator에 하나의 기능만 사용하여 데이터의 변환단계를 명확히 구분하는 것이 중요하다.

 

  // pluck는 소스 데이터에서 특정부분을 추출하여 return해 준다.
  // 아래의 경우는 전체 데이터에서 query 객체 내의 search 객체만을 뽑아서 반환한다.
  
  search(keyword: string): Observable<WikiItem[]> {
    return this.http.get(this.url, {
      params: {
        action: "query",
        list: "search",
        srsearch: keyword,
        format: "json",
        origin: '*'
      }
    }).pipe(
      pluck('query', 'search')
    )
  }
  
  // 리턴 값을 변경시키는 가장 보편적인 map으로 특정부분을 추출하고 있다.
  search(keyword: string): Observable<WikiItem[]> {
    return this.http.get(this.url, {
      params: {
        action: "query",
        list: "search",
        srsearch: keyword,
        format: "json",
        origin: '*'
      }
    }).pipe(
      map((response:any) => response.query.search)
    )
  }
  
  // 어떤 값이 전달되는지 확인하기 위한 용도로 tap을 쓸 수 있다
  // 리턴 값은 변화지 않고 side effect만 생긴다.
  // 이렇게 여러개의 operators를 연결하여 사용할 수 있다.
  search(keyword: string): Observable<WikiItem[]> {
    return this.http.get(this.url, {
      params: {
        action: "query",
        list: "search",
        srsearch: keyword,
        format: "json",
        origin: '*'
      }
    }).pipe(
      map((response:any) => response.query.search),
      tap((response: any)=> console.log(response))
    )
  }

 

5. Observer는 3가지의 콜백을 가지는 객체를 subscribe에 받아서 결과를 처리한다.

  5-1 지난 포스트에서 app 클래스에서 사용한 내용은 다음과 같다.

  search(keyword) {
    this.wikiService.search(keyword).subscribe(
      response=> {
        this.wikiItems = response
      }
    )
  }

 

    5-1-1 이 코드는 가장 단순한 Observer의 형태를 보이고 있다. 

    5-1-2 subscribe은 3개의 인자를 받을 수 있고, 선택적으로 사용이 가능하다.

      5-1-2-1 첫번째 인자는 정상적으로 정보가 전달되었을 때에 실행되고 인자로 다음 값을 받게 된다.

      5-1-2-2 두번째 인자는 error가 발생했을 경우 처리할 콜백으로 error객체를 전달받게 된다.

      5-1-2-3 세번째 인자는 complete 이벤트가 발생했을 때 실행되고 인자는 없는 콜백을 요구한다.

 

    5-1-3 위의 코드는 정상적인 정보를 받을 경우에 실행되는 첫번째 인자로 전달되는 콜백만 작성되어 있다.

    5-1-4 아래와 같이 3개의 콜백 모두 제공하여 구현하는 것도 가능하다.

 

  search(keyword) {
    this.wikiService.search(keyword).subscribe(
      response=> this.wikiItems = response,
      (error)=> console.log(error),
      ()=> console.log('observable is complete')
    )
  }

 

6. operator의 종류는 여러가지가 있지만 대표적으로 3가지가 있다.

Operators

  6-1 transform - 대부분의 operator로 데이터를 처리 변경하고 반환한다.

  6-2 filtering - 데이터를 추출하거나 삭제하는 것과 같은 데이터 필터링 기능

  6-3 creation - 새로운 observable을 만드는 종류로 ajax, from, of로 부터 fromEvent, create, defer, empty 등이 있다.

 

7. Observable이 데이터를 보내는 근원이라고 하지만 실제로는 수도꼭지와 같다.

  7-1 Observable에서 수도처럼 물이 나오지만 그 물은 나오는 것은 더 근본적인 부분의 동작에 있다.

  7-2 더 근본적인 부분은 Subscriber라는 클래스로

    7-2-1 이 클래스의 next, complete, error 메소드를 통해 실제 데이터가 전달된다.

    7-2-2 가장 많이 사용되는 Subject가 이 Subscriber를 확장한 클래스로 데이터 multicast에 많이 사용된다.

    7-2-3 Subject의 예는 Demo 카테고리의 아래 포스트를 참고한다.

Spring Boot + Angular : Shopping Site 만들기 v3 - 4 - 카트 담기 구현 - Rest Repository with JPA

8. Unicast vs Multicast

  8-1 Unicast는 기본값으로 설정되어 있고,

    8-1-0 구독하는 Observer마다 동일한 데이터 수신을 보장한다.

    8-1-1 complete이 된 후 구독해도 동일한 데이터를 받는다.

    8-1-2 모든 파이프의 operators 역시 동일하게 각 구독 마다 실행된다.

    8-1-3 Cold Observable고 거의 동일한 용어이다.

  

  8-2 Multicase는 

    8-2-1 데이터의 흐름은 단한번 수행되고 데이터가 전송되는 시점에 구독한 Observer만 데이터를 수신한다.

    8-2-2 operator도 역시 한번만 수행된다.

    8-2-3 muticast를 수행하려면 share라는 opeator를 사용하여야 한다.

    8-2-4 Hot Observable과 같은 의미로 사용할 수 있다.