RxJS(Reactive X)11 RxJS 에서 피해야 할 코드 1. 수동으로 옵저버블 구독하기 → 직접 프로퍼티에 바인딩하고 async 파이프로 자동으로 구독과 취소하기 @Component({ template: `{{name}}`})export class MyComponent { name = ''; ngOnInit(){ this.http.get('name').subscribe(result => { this.name = result; }) }} 위와 같이 ngOnInit 에서 HTTP 요청을 하고 응답 받은 값을 MyComponent 의 name 프로퍼티에 할당하는 방식으로 그동안 작성해왔다. 아래 코드를 보면... @Component({ template: `{{name$ | async}}`})export cl.. 2024. 6. 21. [스트림 결합] 실전 사용 모음 CASE #1 두 개의 스트림(A, B)이 있다. A 스트림에서 값을 발행하고 B는 발행하지 않을 경우 또는 A 스트림에서 값을 발행하지 않고 B에서 값을 발행하는 경우 두 스트림이 가지고 있는 현재, 마지막 값이 필요할 때. ※ reactive form을 사용 중 this.form = this._fb.group({ dateRange: [''], activeSensorType: [''], outerData: this._fb.group({}), outerCheckedStates: this._fb.group({}), innerData: this._fb.group({}), innerCheckedStates: this._fb.group({}) }); const A$ = this.form.get('dateRang.. 2024. 3. 13. (기록용) 결합(combine/join)과 관련된 샘플 코드/상황 설명 1. mergeMap, forkJoin - Resolve를 통해 FOUC를 해결한 사례. 페이지에서 페이지로 이동할때 FOUC가 항상 발생한다. 페이지 랜딩 후 컴포넌트는 다양한 작업을 순차적으로 처리하는데 이때 초기값에 의한 초기상태가 사용자에게 잠시 비춰지게 된다. 불과 몇 밀리초에 불과하지만 상당히 거슬린다.프로젝트의 완성도가 낮아보이기도 한다.이를 해결하기 위해 앵귤러에서 제공하는 Resovlve를 사용했다.routerLink 또는 router.navigate 등, router로 이동할때 Resolve는 컴포넌트가 로드되기 전 필요한 작업들을 수행하는 것을 도와준다. Resolve를 사용해 미리 필요한 정보들을 받아온뒤 컴포넌트가 실행되기때문에 FOUC 상황을 피할 수 있다.즉, 컴포넌트가 로드.. 2023. 12. 8. 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. 이전 1 2 다음
