Rxjs5 농장 온도변화 모니터 (plotly.js, RxJS) 설명:- 농장에 설치된 약 30개의 센서에서 감지하는 온도수치를 시각적으로 표현.- 5초 간격으로 서버에서 디바이스에 매핑된 약 30개의 온도에 대한 수치값을 가져와 최저/최고/평균 값을 동별로 보여준다.- Ploty를 활요해 농장을 3D 모델로 만들고, 실제 센서의 위치를 생성된 모델 안에 위치시킴으로써 최대한 현실과 비슷하게 만들어 사용자의 집중도를 높힘.- 왼쪽 위에 있는 항목들을 클릭하면 가운데 보이는 3D 농장의 레이어들이 토글되어 보이고 숨겨지고 한다. 특징: 1. blender로 3D 모델을 만든 뒤 gometry 를 뽑아냈다. (blener에서 geometry 뽑아내는 script 보기)2. 3D 모델(농장 inner/outer, 동/서/남/북, 센서위치)을 구성하는 geometry는 모두.. 2024. 5. 20. routerLink로 이동 후 service에 저장된 Subject를 구독하지 않는 상황. (구독시점에 대한 이해) 흐름:1. my 컴포넌트 마운트, 서비스에 있는 Subject 변수에 값을 저장 →2. my컴포넌트에서 routerLink='./farms' 이동 →3. farms컴포넌트 init →4. share에 있는 Subject를 구독해 값을 받아오려 했으나 구독자체를 실행하지 않는 상황. 여기서 Subject는 'asObservable()'로 모든 컴포넌트가 같은 값을 받아볼 수 있도록 했다. // 서비스@Injectable({ providedIn: 'root'})export class UserFarmService { _userFarms = new Subject(); get userFarms$(): Observable { return this._userFarms.asObservable(); } .. 2023. 11. 23. servie.ts 에서 모든 구독자에게 동일한 값을 발행할때 상황: API로 받아온 데이터를 모든 컴포넌트에서 접근할 수 있도록 하는 구조에서router에 의한 페이지 이동 시 router에 의해 렌더링된 컴포넌트 클래스에서 service에서 받아온 데이터를 구독 시 의도하지 않은 다수의 stream 발생. 원인: 컴포넌트가 init 되는 시점에 구독을 한다. A컴포넌트에서 B컴포넌트로, B컴포넌트에서 다시 A컴포넌트로 이동할때 각 컴포넌트는 구독을 n번 하게 되었고 그로 인해 꼭 다수의 stream이 n번 만큼 발생한 것 처럼 보였던 것이었다.이는 구독 후 실행될 로직들이 n번 실행되어 큰 영향을 줄 수 있다. 해결: 컴포넌트가 destroy 될 때 구독을 취소하면 된다. 방법: 크게 두 가지가 있다. stackoverflow에서 퍼옴. #1: 컴포넌트에 Sub.. 2023. 7. 27. [RxJS] 실습 - 스마트한 키워드 검색창 만들기 링크 : https://www.yalco.kr/@rxjs/3-1/ 소개 : 사용자의 입력에 따라 AJAX 호출로 서버에서 사용자 이름을 조회하는 기능이다. 계획(initial plan) : 기능 구현을 위해 단계별로 생각해보기. 작업 전 1차적으로 구상해보고 작업 완료 후 1차에서의 계획이 그대로 실현되었는지 생각해보고 다시 정리해 보기. 단계 : ①키 이벤트(입력) → ②Ajax 호출(검색) → ③결과 하단에 출력 사용될 연산자 : mergeMap, switchMap, pluck, filter, debounceTime, distinctUntilChange ■ mergeMap const url = 'http://127.0.0.1:3000/people/quarter-error' const keyword =.. 2023. 1. 16. [Chapter#1] Lesson 4. 내맘대로 발행하는 Subject 링크: https://www.yalco.kr/@rxjs/1-4/ 흠... Subject와 Observable의 차이에 대해 설명하고 Subject의 종류에 간단히 설명하셨다. 그런데 본격적인 사용법은 chapter 3 부터 시작하신다고 한다... Observable Subject 발행 시점 누가 구독을 시작했을때 개발자가 원하는 때에 발행 데이터의 상태공유 개별적(독립적) 공유 차이점은 위 표로 간단하게 설명할 수 있을 것 같다. const subject = new Subject() const obs$ = interval(1000) obs$.subscribe(subject) subject.subscribe(x => console.log('바로구독: ' + x)) setTimeout(_ => { subje.. 2023. 1. 12. 이전 1 다음
