Skip to content

Latest commit

 

History

History
216 lines (146 loc) · 6.01 KB

RxJS.md

File metadata and controls

216 lines (146 loc) · 6.01 KB
Raw

[FEConf2017] RxJS

주제 : RxJS 써야겠어요? 안써야겠어요?_손창욱

RxJS에 대한 약간의 오해와 본질을 바라보는 시간을 가지려는 시간

비동기처리

RxJS 말고도 현재는

  • CallBack
  • Promise
  • Generator
  • Async/Await(심지어 비동기를 동기처럼 사용하고 싶어서 만들어짐)

가 있다.

위에 있는 이것들은 모두 표준이다.

표준을 알고있다면 어떻게 변하든 개발자입장에서는 좋다. 그런데 RxJS도 표준이다.

Functional과의 관련성

RxJS가 연관은 있지만 본질은 아니다.

RxJS가 담당하는 영역

  • 비동기 처리
  • 데이터 전파
  • 데이터 처리

위와 같이 3가지로 바라볼 수 있다.

결국 RxJS는!!

일관된방식으로 안전하게 데이터 흐름을 처리하는 라이브러리 이다.

모든 어플리케이션은 궁극적으로 상태머신이다.
입력값에 따라 로직을 짜고 상태변화에 따라 결과값이 나오게 된다.

개발자가 처리하는 입력값은 어떤 것들이 있는가?

  • 배열 데이터도 입력값으로
  • 함수 반환값도 입력값으로
  • 키보드를 누르는것도 입력값으로
  • 마우스를 움직이는 것도 입력값으로
  • 원격지의 데이터도 입력값으로
  • DB데이터도 입력값으로
  • ...

개발자의 고민 중하나

어떤것은 동기
어떤것은 비동기
동기는 흐름대로 가기 때문에 편안하다. 그러나 느리다라는 단점을 가지고 있다. 이래서 비동기를 사용한다.

우리의 처리방법은 ...

  • 어떤것은 함수 호출
  • 어던것은 이벤트
  • 어떤것은 callback
  • 어떤것은 Promise

각각에 따라 처리해야한다는 문제가 있다.

  • 배열을 처리하는 경우는 ...
  • 함수를 호출하는 경우는 ...
  • 마우스를 클릭하는 경우 ...
  • Ajax를 호출하는 경우 ...

위의 4가지의 경우는 결국 시간축에 있어서는 동기와 비동기는 같다.!!!
Rx가 위에서 말했듯이 하나의 처리로 이루어진다.

Observable

시간을 인덱스로 둔 컬렉션, Observable자체가 Immuable이다.

모두 Observable로 처리한다.

모든 어플리케이션은
궁극적으로 상태머신이 아니다. 궁극적으로 상태머신의 집합이다.

의존관계가 있는 상태머신에게 변경된 상태 정보를 어떻게 전달하지?

Reactive Programming

데이터흐름과 상태변화 전파에 중점을 둔 프로그램 패러다임이다.

사용되는 프로그래밍 언어에서 데이터 흐름을 쉽게 표현할 수 있어야하며 기본 실행 모델이 변경사항을 데이터흐름을 통해 자동으로 전파한다는 것을 의미한다.

이미 우리는 알고 있다. ⇒ 옵저버 패턴(Observer pattern)

Subject의 변경사항이 생기면 자동으로 Observer의 update를 호출한다.

Observer pattern을 적용하자

상태 자동 전파(Loosely coupling) => RxJS는 next, error, complete의 3가지 상태를 전달받는다.

데이터를 받은 후에는 뭐하니?

데이터를 받은 후에 받은 데이터를 가공한다.

기존

  1. Ajax로 데이터를 받음 ⇒ 데이터를 받고 받은 것을 가지고 처리한다.
  2. 데이터를 가공함 ⇒ process함수

조건문, 반복문 덩어리로 구성되어있다.

조건문은 코드의 흐흠을 분리하고

반복문은 코드의 가독성을 떨어뜨림

주관심사인 비즈니스 로직은 코드에 파묻힘

⇒ 고차함수를 제공한다.

고차함수

다름함수를 인자로 받거나 그 결과로 함수를 반환하는 함수

고참함수는 변경되는 주요 부분을 함수로 제공함으로서 동일한 패턴 내에 존재하는 문제를 손쉽게 해결할 수 있는 고급 프로그래밍 기법이다.

filter, map, reduce, ...와 같은 고차함수의 operator를 제공

내가 실행한 로직이 나의 의도와 상관없게 외부에 영향을 미친다면?

Side Effect(부수효과)

함수에 드러나지 않는 입력값은 부원인(Side Cause) 라고 하고 이로 인해 발생한 결과를 부작용(Sdie Effect) ⇒ 호출할 때마다 달라진다.

그래서,

모든입력값을 명시적으로 나타내거나, Immuable데이터를 사용한다(순수함수 형태로 한다. 그래야 컨트롤이 편해진다.).

Functional Programming

함수형 프로그래밍 은 자료 처리를 수학적 함수의 계산으로 취급하고 상태변경과 가변 데이터를 피하려는 프로그래밍 패러다임의 하나이다.

Functional Programming은 순수함수를 지향한다.

  • 같은 입력이 주어지면, 항상 같은 출력을 반환한다.
  • 부작용을 발생시키지 않는다.
  • 외부의 Muable한 데이터에 의존하지 않는다.

RxJS는 함수형 프로그래밍의 순수함수를 지향한다.

RxJS 주요개념

  • Observable
  • Operator(map, filter, reduce)
  • Observer
  • Subscription
  • Subject
  • Scheduler

하지만 4대 천왕만 알면된다.
다른거는 심화과정

RxJS 개발방법

  1. 데이터 소스를 Observable로 생성
  2. Observable의 Operator를 사용 ⇒ 데이터를 변경, 추출, 합침, 분리
  3. 원하는 데이터를 받아 처리하는 Observer를 만든다.
  4. Observable의 subscribe를 통해 Observer를 등록한다.
  5. Observable 구독을 정지하고 자원을 해지한다.

RxJS는

일관된방식으로
안전하게
데이터 흐름을 처리하는
라이브러리이다.

Referece