sharingStorage

RxJS 본문

Front-End/Javascript

RxJS

Anstrengung 2021. 12. 29. 10:22

- RxJS :

RxJS는 Reactive Extension for JavaScript의 약어로 Javascript 라이브러리이다.

 

 Reactive X는 Observer패턴,  Iterator패턴,  함수형 프로그래밍을 조합하여 제공하는 것이며

 RxJS는 이벤트 스트림을 Observerable이라는 객체로 표현한 후 비동기, 이벤트 기반의 프로그래밍 작성을 돕는다. 

이벤트 처리를 위한 API로 다양한 연산자를 제공하는 함수형 프로그래밍 기법도 도입되어 있다. 

 

 

 ※Reactive Extensions    :  Reactive X프로젝트에서 출발한 Reactive Programming을 지원하기위해 확장한 것 .

  

 

 - Reactive Programming :

: Reactive 하다는 것은 데이터를 다룰 때에 스트리밍형식으로 다룬다는 것을 의미합 니다. 프론트엔드에서는 사용자의 이벤트를 기반하여 구현되는 로직이많기 때문에 더욱이 Reactive하게 구현되는 것이 유지보수 측면이나 가독성 측면에서 좋은 점이있다.

 

 

 

 - Pull  vs Push 

외부와 통신하는 방식은 Pull 과 Push 시나리오가 있을 수 있다.

  • Pull 시나리오
    producer가 외부에서 명령하여 응답받고 처리한다. 
    생상자가 요청이 받아질 때 데이터를 생성하며 consumer는 데이터 요청의 때를 결정한다.  consumer가 원하는 타이밍에 데이터를 당겨올 수 있다. 모든 자바스크립트 함수는 pull시나리오를 따른다.  그러므로 consumer가 데이터를 가지고 오기 위해서는 계속 호출해야 한다.                                                                                               

 

  • Push 시나리오
    외부에서 명령하고 기다리지 않고, 응답이 오면 그때 반응하여 처리한다. 즉 producer가 consumer에게 데이터를 보낼 때를 결정한다.  producer가 consumer에게 데이터를 민다(push)한다고 이해하면 될 것 같다.
    따라서 consumer는 데이터를 받을 때를 알지 못할것이므로 데이터를 가지고 오기 위해서 구독하고 있어야 한다. 

 

RxJS는 Observable을 자바스크립트의 새로운 Push시스템이라고 소개하며 Observable은 multiple value의 생산자이다.

Reactive Programming 은 Push 시나리오를 채택하고 있다.

 

- RxJS의 사용 이유 : 

   - RxJS는 이벤트나 배열같은 데이터 스트림을 비동기로 처리해 변화에 유연하게 반응한다.
   - 비동기 코드가 많아지면 제어의 흐름이 복잡하게 얽혀 코드를 예측하기 어려워지는데 RxJS는 JavaScript의 비동기 프로그래밍의 문제를 해결하는데 도움을 줍니다.
   - pure함수를 사용하여 값을 생성하기 때문에 에러가 덜 발생합니다.
   

 

- 비동기 이벤트 관리를 위한 RxJS의 필수개념: 

Observerable

- 호출할 수 있는 값또는 이벤트의 집합 , 이벤트 스트림

- Observerble 구독시 next, error, complete 3가지 핸들러 사용가능

 -Observable은 이벤트를 동기 또는 비동기로 발생시킬 수 있음

 

Observer

- Observerable에 의해 전달된 값을 수신하는 방법을 아는 callback들의 집합

 

Subscription 

- Observerable을 구독하면(subscribe) subscription객체 리턴.

- Observerable의 실행을 나타냄. 주로 실행 취소에 유용함 

 

Operators 

- map, filter, concat 등 operation을 다루는 함수형 프로그래밍을 가능하게하는 순수 함수 

 

Subject 

- 멀티캐스트를 위한 특별한 유형의 Observerable.  일반적으로 하나의 Observerable은 하나의 observer만 등록할 수 있음

- EventEmitter와 동등함. 하나의 Observerable을 구독을통해 여러 Observer 에게 이벤트 또는 값을 멀티캐스팅

- Observerable이지만 observer로서 다른 observerable을 구독 할 수 있음

 

Schedulers : 우리가 setTimeout같은 계산이 일어날 때 우리가 조정할 수 있게 동시성을 조정한다.

  +'스케줄러'는 작업을 실행하는 데 사용되는 타이밍 전략을 제어하는 ​​방법

 

 

 

 

Reference

 

 

 

 

 

 

 

'Front-End > Javascript' 카테고리의 다른 글

JSON  (0) 2022.03.17
참조에 의한 객체 복사  (0) 2021.12.28
'Front-End/Javascript' Related Articles more
Comments