개발 이야기/JavaScript

RxJS

석구석구 2019. 6. 16. 16:39

리액티브 프로그래밍은 비동기 데이터 스트림에 기반을 둔 프로그래밍입니다.

뭔가 대단해 보이는데 무슨 의미일까요.

개발을 하다 보면 동기 / 비동기 프로그래밍을 자연스럽게 경험하게 됩니다.

동기는 일반적인 프로그래밍 방식으로, 순차적으로 실행됩니다.

예를 들어 B함수에서 A 함수를 호출하면 A 함수가 실행되고,

A 함수가 값을 반환하면 B함수 내에서 A함수를 호출한 위치에서 이어서 실행됩니다. 순차적이죠.

비동기 방식은 어떠한 이벤트가 일어나면 특정 행동을 취하는 방식입니다. AJAX 요청이 좋은 예입니다.

이벤트는 서버의 응답이 될 수도 있고, 유저의 특정 이벤트가 될 수도 있고 인터벌이 될 수도 있습니다.

그렇다면 프로그래밍을 대하는 관점을 바꿔봅시다.

개발자의 입장이 아닌 데이터의 입장에서 프로그램을 본다면 어떨까요.

동기건 비동기건 데이터의 입장에서는 상태의 변화라는 일련의 과정으로 볼 수 있습니다.

리액티브 프로그래밍은 바로 이러한 데이터 관점에서 출발합니다.

조금 더 우리의 일상을 들여다봅시다.

개발자들은 콜백 함수의 사용으로 비동기 프로그래밍을 구현하곤 합니다.

콜백 함수의 사용은 편하지만 조금만 깊어져도 금세 고통을 주기 시작합니다.

디버깅도 어렵고, 예측하기도 어렵고, 눈으로 보기에도 어렵습니다.

굳이 그 상황을 헬이라 부르지 않아도 무언가 잘못 흘러가고 있다는 느낌이 옵니다.

이때, 프로미스 패턴과 async / await 기법은 우리에게 도움을 줍니다.

프로미스는 프로미스 객체 내부에서의 동작이기에 깔끔하게 상황을 정돈해 주며,

async / await은 프로미스 체인을 따라갈 필요도 없이 쉽게 구문을 파악할 수 있습니다.

동기로 실행되어야 하는 순차적이고 반복되는 함수에 적합하죠.

우리가 하루에도 몇 번씩이나 마주하는 이와 같은 비동기 프로그래밍을 데이터의 관점에서 바라보면 어떨까요.

아주 간단해집니다.

데이터가 들어오면 행동한다.

리액티브 프로그래밍은 푸시 방식으로 동작합니다.

데이터가 있나 없나 물어보는 것이 아니라 외부에서 데이터를 밀어 넣어주면 그에 반응하는 방식입니다.

이때 외부 환경에서 애플리케이션 내부로 데이터 흐름을 생성하고 방출하는 객체를 옵저버블(Observable)이라 하고

이렇게 옵저버블이 방출 (Emit) 한 푸시 데이터를 노티피케이션(Notification)이라 합니다.

그리고 이러한 푸시 데이터를 획득하고 사용하는 객체를 옵저버라 칭합니다. (옵저버는 옵저버블을 구독(Subscribe)하는 관계)

RxJS is a library for composing asynchronous and event-based programs by using observable sequences.

RxJS의 공식 문서에 있는 소개입니다.

"RxJS는 관찰 가능한 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램을 작성하기 위한 라이브러리입니다."

개념이 정리되었다면, 공식 문서를 통해 테스트 코드를 작성해 보시면 도움이 될 겁니다.

 

'개발 이야기 > JavaScript' 카테고리의 다른 글

식과 문  (0) 2020.02.13
자바스크립트 V8 컴파일러의 동작.  (0) 2019.07.09
자바스크립트의 동작 원리.  (0) 2019.06.14
프로토타입  (0) 2019.06.12
apply, call  (0) 2019.05.21