검색 기능 개선

1. 관리자 페이지 검색 기능이 느리고,

2. 종종 잘못된 정보를 받는 상황을 처리한 내용이다.

해결방법

throttleTime >> debounceTime

throttleTime을 사용해서 발생한 문제이다.

throttleTime

• throttleTime 연산자는 설정한 주기(ms) 안에 observable 값을 방출하면 그 값을 방출한 즉시 해당 값을 무시한다.
• 설정한 주기(ms)가 지난 후 다음 값을 방출할 때까지 다른 값들도 무시한다.
• 즉, 설정한 주기(ms) 안에 최대 1번의 값을 방출한다.

debounceTime

• debounceTime 연산자는 설정한 주기(ms) 안에 소스 옵저버블이 값을 방출하면 해당 주기(ms)가 다 지난 후에 그 값을 방출한다.
• 그리고 이 주기(ms) 안에 다른 값들이 방출되면 이전 값은 취소한다.
• 즉, 설정한 주기(ms) 안에 마지막 값을 방출한다.

일반적으로 throttleTime은 이벤트가 빈번하게 발생하고도 일정 시간마다 처리할 필요가 있는 경우에 사용하며, debounceTime은 이벤트가 빈번하게 발생하지만 마지막 이벤트만 처리할 필요가 있는 경우에 사용한다.

결론

즉, throttleTime을 사용했을 때. 첫번째 event를 받은 후 이후 event를 일정 시간동안 무시하기 때문에 발생한 문제이다.

distinctUntilChanged() 사용

유저가 typing을 멈추거나 이전과 다른 검색을 했을 때 때만 api call을 해준다.

• 불필요한 call을 줄여준다.

shareReplay() 삭제

shareReplay는 obserables의 결과를 caching해준다.
Multiple subscribers에게 single subscription을 share하는 것이다.

subscriber이 하나여서 불필요했다.

• 불필요한 cache로 성능 저하가 생긴다.

forkJoin 사용

array of observables을 처리하는 부분이 있었다.

• Oberables들이 모두 완료될 때 까지 기다린 후 emit한다.
• Promise.all 보다 성능이 좋다.
  • promises가 created 되고 resolved되는 수를 줄여준다.
  • observables이 많을수록 효과가 좋다.

combineLatest와 다른점

combineLatest는 observables가 value를 emit할 때 마다 emit한다.