앵귤러를 공부하다보니 rxjs라는 기능을 알게되었다.
어떠한 이벤트 관련된 데이터나 스트림 등을 비동기 방식으로 다룰 수 있게해주는 라이브러리 이다.
비슷한 기능으로 예전부터 많은사람들이 애용한 ajax가 있지만 ajax는 tcp통신에서만 사용되던 기능이었지만,
이 rxjs는 단순한 console 같은 기능 또한 비동기 방식으로 지원해준다.
동작원리는, 대상자인 Observer와 관심사인 Observable을 통해서 원하는 동작을 설정하고 subscribe으로 구독하게 하는 방식이라 나와 있다.
간단하게보면..observable은 공장이고 observer는 일할 주체, subscribe는 실행의 느낌인 것 같다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.6/dist/global/Rx.umd.js"></script>
</head>
<body>
</body>
</html>
<script>
var source = Rx.Observable.interval(1000);//관심사
var subject = new Rx.Subject(); //실행,
var subSource = source.subscribe(subject);
var subSubject1 = subject.subscribe(
x => console.log('Value published to observer #1: ' + x),
e => console.log('onError: ' + e.message),
() => console.log('onCompleted'));
var subSubject2 = subject.subscribe(
x => console.log('Value published to observer #2: ' + x),
e => console.log('onError: ' + e.message),
() => console.log('onCompleted'));
setTimeout(() => {
subSubject1.dispose();
subSubject2.dispose();
}, 5000);
</script>
해당소스코드 출처
https://rxjs-dev.firebaseapp.com/
해당 소스코드를 실행하면 비동기 방식으로 콘솔이 동작한다.
즉, 단순히 ajax를 통한 비동기방식 프로그래밍을 넘어 여러 분야에 적용 할 수 있다는 점이다!
반응형
'Javascript > [중요] Javascript' 카테고리의 다른 글
| 자바스크립트 정규식 RegExp (0) | 2019.04.27 |
|---|---|
| 자바스크립트 Promise (0) | 2019.04.27 |
| Formdata를 활용하여 ajax로 파일전송 하기 (0) | 2019.04.26 |
| Html 캔버스 Hover 이벤트 만들기 (0) | 2019.04.26 |
| Jquery로 함수 만들기 (0) | 2019.04.26 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글