Be Better Than You Were Yesterday!

반응형 프로그래밍(Reactive Programming)이란?

옵저버블(Observables) 이벤트 스트림을 구독(subscribe)하고, 이 스트림에 반응하는 방식으로 동작하는 애플리케이션을 만드는 것을 의미한다. 여기서 반응형 프로그래밍 패턴은 옵저버/옵저버블 패턴에서 좀 더 심화된 것이다. 옵저버블 스트림은 취소할 수 있으며, 스트림이 끝나는 지점을 알릴 수 있고, 구독자에게 전달된 데이터를 다양한 함수로 변환해서 다른 구독자에게 전달할 수도 있다. 옵저버블 패턴의 특징은 데이터 처리에 밀어 넣는 방식(Push model)을 택했다는 것이다. 반대로 받아오는 방식(Pull model)은 배열을 돌거나, Iterable 객체를 사용하거나, ES6 제너레이터 함수를 통해 구현한다. 전달된 데이터에 반응할 것인지, 데이터를 직접 받아올 것인지의 차이다. 옵저버블 스트림을 지원하는 라이버러리들은 이미 많이 구현되어 있으며, RxJS도 그 중 하나다. 그리고 RxJS 라이브러리는 Angular 내부에 통합되어 있기 떄문에, Angular 프레임워크 로직과 같이 사용해도 전혀 어색하지 않을 것이다.

옵저버 패턴(observer pattern)

옵저버 패턴은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 주로 분산 이벤트 핸들링 시스템을 구현하는 데 사용된다. 발행/구독 모델로 알려져 있다. 이 패턴의 핵심은 옵저버 또는 리스너라 불리는 하나 이상의 객체를 관찰 대상이 되는 객체에 등록시킨다. 그리고 각각의 옵저버들은 관찰 대상인 객체가 발생시키는 이벤트를 받아 처리한다. 

옵저버블(observable) 

1. 연속된 데이터 스트림을 생성하는 객체이다.

2. 옵저버블에서 데이터가 만들어져서 옵저버인 구독자에게 전달된다.

3. 소켓이나, 배열, 화면에서 발생한 이벤트 등과 같은 데이터 소스를 한번에 하나씩, 연속으로 보내는 객체다.(스트리밍, streaming)

4. promise와 유사하지만 다음과 같은 큰 차이가 있다. 

이러한 옵저버블의 특징은 real-time data를 다루기에 적합하며 옵저버블 스트림은 아래 세 가지 경우를 처리할 수 있다.

• 다음 엘리먼트를 전달한다.
• 에러를 전달한다.
• 스트리밍이 종료되었다는 신호를 전달한다.

옵저버(observer)

: 옵저버블이 생성한 연속된 데이터 스트림을 구독해서 사용하는 객체이며 이는 세 가지 콜백 함수를 가질 수 있다.

• 다음 엘리먼트를 받았을 때 처리하는 함수
• 에러를 받았을 때 처리하는 함수
• 데이터 스트림이 끝났을 때 실행하는 함수

콜드 옵저버블(cold observable): 구독자가 있는 경우에만 스트리밍 데이터를 만들기 시작.

핫 옵저버블(hot observable) 데이터를 받는 구독자가 없더라도 데이터를 스트리밍함.

subscribe(): 옵저버블 객체로부터 스트림을 구독한다.

debounceTime(): 스트림의 데이터가 발생하는 시점을 지연시킨다. 

switchMap()

옵저버블

http://sculove.github.io/blog/2016/11/19/rxjs-%ED%99%9C%EC%9A%A9%EA%B8%B02/

Angular는 컴포넌트의 프로퍼티와 뷰를 동기화시키는 데이터 바인딩을 지원한다.

1) 컴포넌트의 프로퍼티 값을 템플릿에 표시하려면 이중 중괄호를 사용한다.

<h1>Hello {{ name }}!</h1>

2) HTML 엘리먼트의 값을 컴포넌트 프로퍼티로 바인딩하려면 대괄호를 사용한다.

<span [hidden]="isValid">The filed is required</span>

3) 엘리먼트에서 발생한 이벤트를 이벤트 핸들러에 연결하려면 괄호를 사용한다.

<button (click)="placeBid()">Place Bid</button>

4) 템플릿에서 다른 엘리먼트의 프로퍼티를 참조할 때 #으로 시작하는 템플릿 지역 변수를 사용할 수 있으며, 이 변수는 DOM 객체에 저장되어 객체를 사용하듯이 접근할 수 있다.

<input #title type="text" />
<span>{{ title.value }}</span>

데이터 바인딩은 애플리케이션의 데이터를 화면과 연결하는 기능이며, 데이터 바인딩을 사용하면 개발자가 직접 코딩해야 하는 양을 많이 줄일 수 있다. 

<h1>Hello {{ name }}!</h1>
<span [hidden]="isValid">This field is required</span>
<button (click)="placeBid()">Place Bid</button>

Angular에서 데이터 바인딩은 기본적으로 단방향이다. 여기에서 단뱡향이라는 것은 컴포넌트 프로퍼티에 화면을 향하는 방향이거나, 화면에서 발생한 이벤트가 컴포넌트 메소드를 향하는 방향이라는 것을 의미한다. 예를 들어 컴포넌트에 있는 productTitle 프로퍼티 값이 변경되면 바인딩된 템플릿의 {{ productTitle}} 표현식은 자동으로 갱신되는데, 이 바인딩은 컴포넌트 프로퍼티에서 화면을 향하는 방향이라고 할 수 있다. 이와 비슷하게, 사용자가 <input> 필드에 값을 입력하면 이벤트와 바인딩된 이벤트 핸들러 함수가 실행되는데, 이 바인딩은 화면에서 발생한 이벤트가 컴포넌트 메소드를 향하는 방향이라고 할 수 있다.

클래스의 값을 참조하기 전에 실행되는 게터 메소드와 값을 변경하기 전에 실행되는 세터 메소드는 메소드를 정의하는 새로운 문법과 관련이 있다. 세터와 게터는 객체의 프로퍼티와 함수를 연결한다. Tax 객체를 리터럴로 선언하면서 게터와 세터의 사용 방법을 알아보자.

var Tax = {
    taxableIncome : 0,
    get income () { return this.taxableIncome; },
    set income (value) { this.taxableIncome = valve; }
};

Tax.income = 50000;
console.log('Income : ' + Tax.income); // Income : 50000

프로퍼티의 값을 바꾸거나 콘솔에 메세지를 출력할 때 Tax 객체의 income 프로퍼티에 접근하고 있지만 실제 Tax 객체에는 income 프로퍼티가 없고, 게터와 세터에 사용한 메소드의 이름이 외부에서 접근하는 프로퍼티 이름이 된다.

ES5에서는 객체에 메소드를 정의할 때 calculateTax = function () {...} 와 같이 funciton 키워드를 반드시 사용해야 했다. 하지만 ES6에서는 function 키워드를 생략해도 메소드를 정의할 수 있다.

var Tax = {
    taxableIncome : 0,
    get income () { return this.taxableIncome; },
    set income (value) { this.taxableIncome = valve; }
    calculateTax () { return this.taxableIncome * 0.13; }
};

Tax.income = 50000;
console.log('For the income ${Tax.income} your tax is ${Tax.calculateTax()}');

위 코드를 실행한 결과는 다음과 같다.

For the income 50000 your tax is 6500

게터는 프로퍼티에 값을 참조할 때 사용하고 세터는 프로퍼티 값을 지정할 때 간단하게 사용할 수 있다. income 세터 메소드에 유효성 검사 로직을 추가해서 유효하지 않은 값이 할당되는 것을 막을 수도 있다.

ES6에서는 클래스 멤버 변수를 private으로 선언할 수 없기 때문에, 게터와 세터를 사용해서 이 기능을 구현할 수 있다.