RxJS - Purity(순수성)

Reactive extension JS (RxJS)

Purity(순수성)

RxJS는 순수함수로 이루어져있다는 뜻이다. 순수함수란 함수형 프로그래밍에서 쓰이는 단어이다. 사람들마다 그리고 언어들마다 순수함수에 대한 정의가 약간씩 다른 것 같긴 하지만.. 내가 아는 순수함수의 정의는 아래와 같다.

• 같은 입력에 항상 같은 출력을 반환한다.
• 사이드 이펙트가 없다.
• 외부 상태와 무관하다.

순수함수는 해당 함수보다 상위의 스콥에서 정의된 함수를 참조하지 않는다. 오로지 인자로 인해 제어된다. 같은 값을 출력하기때문에 랜덤(Math.random)이나 날짜(new Date)등을 사용하지 않는다. 따라서 오류가 발생할 가능성이 적다. RxJS는 이 부분을 장점으로 내세우고 있다.

아래 예제를 보면...

const observable = Rx.Observable.from([1,2,3,4])
 .map(x => x*x)
 .scan((a,b) => a+b, 0);
observable.subscribe(x => console.log(x)); //1, 5, 14, 50

RxJS는 위처럼 체이닝으로 method들을 이어 나간다. 그리고 다음 method들의 함수 내부는 이전함수로 부터 return받은 인자로만 이루어 진다. 물론 global 영역에 변수를 지정하고 가져오는게 불가능 한건 아니지만, 되도록 순수하게 함수를 사용하는 것을 권장한다. 아무래도 순수함수가 가진 안정성과 속도의 장점을 가져가려는 것이 아닐까 생각한다.

Flow(흐름)

RxJS에는 관찰자를 통해 이벤트가 흐르는 방식을 제어하는 데 도움이되는 다양한 연산자(operator)가 있다. 위에서 등장한 map, scan 등이 그것이다. 하나 하나의 흐름을 operator들로 전달하는 방식으로 동작하는 것이다.

Values(값)

RxJS의 흐름이 진행되는 과정에서 인자로 값들을 넘긴다. RxJS는 operator들을 통해 이 값들을 원하는 값을 도출한다.

Reactive extension JS (RxJS) 시작!

Reactive extension JS (RxJS)

RxJS에 대해 학습한 내용을 정리해서 포스팅 해보고자 한다.

여기 글을 RxJS공식 사이트(http://reactivex.io/rxjs)를 근간으로 하고 있다.

RxJS 공식사이트에서는 RxJS를 한문장으로 정의하고 있다..

Think of RxJS as Lodash for events.

이벤트의 로다시 같다는 것이다.. 로다시가 무엇인가. 함수형 프로그래밍을 위한 라이브러리가 아닌가...? 대신 로다시가 절차지향적 방식이라면 RxJS는 이벤트 기반의 비동시 방식이라는 차이가 있는 것으로 보인다.

RxJS는 다음과 같은 키워드로 정의되고 있다.

• Observable: 미래의 값(value)나 이벤트의 호출 가능한 수집의 개념을 나타냄.
• Observer: Observable에 의해 전달 된 값을 처리하는 콜백 콜렉션.
• Subscription: Observable의 실행을 나타냄. 주로 실행 취소에 유용함.
• Operators: map, filter, concat, flatMap 등과 같은 method를 사용하여 컬렉션을 다루는 함수 프로그래밍 스타일을 가능하게하는 순수(pure) 함수.
• Subject: EventEmitter와 동일하며 여러 Observers에 값 또는 이벤트를 멀티 캐스팅함.
• Schedulers: 동시 처리를 제어하는 중앙 집중식 디스패처로서 계산이 언제 발생하는지 조정할 수 있다. setTimeout or requestAnimationFrame or others.

RxJS가 힘든 이유는 2가지 인것 같다. 

• 이벤트 기반의 비동기 처리 프로그래밍 방식이 개념적으로 익숙하지 않다.
• 익혀야할 용어나 method들이 많다. 

앞으로 하나씩 하나씩 익혀보자.

초반 개념을 잡는데 네이버 김훈민 님의 강의가 많은 도움이 됐다. 아래는 관련 블로그나 강의 영상의 링크다. 내용이 많이 겹치지만 일부 다른 부분들도 있어서 되도록 알고있는 모든 링크를 첨부한다.

블로그: http://huns.me/development/2051
나프타 컨퍼런스 영상: https://www.youtube.com/watch?v=3FKlYO4okts
웹 프론트엔드 개발자의 얕고 넓은 Rx 이야기: http://www.slideshare.net/jeokrang/rx-70197043

React Life Cycle

React Life Cycle..

자꾸 잊어버려서 기록해 둔다...

컴포넌트를 생성 할 때는 constructor -> componentWillMount -> render -> componentDidMount.

컴포넌트를 제거 할 때는 componentWillUnmount 메소드만 실행.

컴포넌트의 prop이 변경될 때엔 componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate-> render -> componentDidUpdate.

컴포넌트의 state가 변경될 떄엔 props 를 받았을 때 와 비슷하지만 shouldComponentUpdate 부터 시작.

함수형프로그래밍

함수형 프로그래밍에 익숙해지기고 functional한 사고를 키우기위해 연습한 내용들을 기록한 포스트입니다.

두개의 배열을 하나의 배열로 합쳐보자.

1. 각 배열의 요소는 객체이다.
2. 각 배열의 객체의 "id" 프로퍼티가 일치하는 객체끼리 합친다.
3. 남자이고 나이가 30이상이면 target을 true로, 아니면 false로 

Trial 1. underscore의 map, extend, find 함수 활용

const arr1 = [
  {name: 'owen', gender: 'male', age: 36, id: 11},
  {name: 'bbo', gender: 'female', age: 34, id: 12},
  {name: 'woo', gender: 'male', age: 20, id: 13}
];

const arr2 = [
  {id: 10, phone: '010-1111-1111'},
  {id: 11, phone: '010-2222-2222'},
  {id: 12, phone: '010-3333-3333'},
  {id: 13, phone: '010-4444-4444'}
];

const arr3 = _.map(arr1, function(item){
  return _.extend(item, _.find(arr2, function(i){
    return item.id === i.id;
  }), {target: item.age >= 30 && item.gender === 'male'})
});

console.log(arr3);
/*[
{'name':'owen','gender':'male','age':36,'id':11,'phone':'010-2222-2222','target':true},
{'name':'bbo','gender':'female','age':34,'id':12,'phone':'010-3333-3333','target':false},
{'name':'woo','gender':'male','age':20,'id':13,'phone':'010-4444-4444','target':false}
]*/

[Check]

• 위에서 find는 findWhere로 대체할 수 있다. 퍼포먼스 차이는 크게 없어 보인다.