[Track 2-2] 나석주 - 비동기를 우아하게 처리하기 위한 Observable - YouTube
토스 개발자 나석주님의 Promise의한계, Observable 소개, RxJs 비동기 프로그래밍, Advanced RxJS를 주제로 한 세션이다.
공개 ppt가 없어 복습 차원에서 세션 내용을 정리함
웹에서 처리하는 비동기들
- Dom Events
- Ajax
- Animation
- 시간 (쓰로틀링, 디바운스)
- 웹소켓, 워커
프로미스의 한계
- 취소 불가
- 성공 또는 실패 불변 상태로만 값을 보장
- 단일값(중요)
왜 취소가 필요할까요
자동완성(이전 요청에 대한 취소 필요)
라우트 변경
임프레션
사용자가 원할 때
단일값
다 여러개의 값을 다룸
- Dom Events
Ajax- Animation
- 시간 (쓰로틀링, 디바운스)
- 웹소켓, 워커
옵저버블
- 비동기로 발생하는 여러 데이터를 다루는 인터페이스,
- 이벤트 스트림
- 취소 가능
옵저버블 생성
옵저버블 에러 처리
옵저버블 생성
인자로부터
이터러블이나 옵저버블로부터
컴포지션
컴포지션이 강력한 이유
위는 ts39 제안 스테이지1 상태임
RxJs
- 옵저버블 구현체 제공
- 컴포지션 및 생성 유틸리티(오퍼레이터) 제공
- 옵저버블을 재활용하여 성능 업
- 스케줄링
옵저버블 생성 유틸리티
파이핑
예제 : 자동완성 스펙
- 입력값이 바뀌면 검색결과를 Ajax로 불러와 결과를 화면에 표시한다.
- 입력값은 150ms 간격으로 디바운스 처리한다.
- 입력값이 바뀌면 이전 Ajax 요청은 취소시킨다.
예제 : 마블 다이어그램
캐치에러는 안에다 걸어주자!!
옵저버블이 좋은 선택일 수 있는 이유
비동기 코드를 더 깔끔하게 작성할 수 있음
- Pull
- 외부에 명령하여 응답받고 처리
- 값을 가져오기 위해 계속 호출
- iteration
- Push
- 외부에서 응답이 오면 그때 반응하여 처리
- 값을 가지고 오기 위해 구독
- 옵저베이션
웹에서 다루는 대부분의 비동기는 푸시 모델이 적합 (리덕스 사가는 푸시를 풀로 바꿈)
결론
- Observable
- 비동기로 발생하는 여러 데이터를 처리할 수 있다
- 취소 가능
- 옵저버블 합성
- 비동기 흐름을 선언적으로 작성
- 옵저버블은 푸시 형태의 비동기 처리에 적합한 모델
- 웹의 비동기 대부분이 푸시 형태이다.
- 옵저버블이 비동기 처리에 좋은 옵션이 될 수 있다
은총알은 없다
러닝커브
디버깅
표준 스펙으로 채택의 어려움
- 명료하지 않은 API
- 논의가 이루어지고 있음
RxJS 스케줄링과 디버깅
언제 구독이 시작될지, 전달될지 타이밍을 계산
animationFrameScheduler
다음 requestAnimationFrame에 값이 전달됨.
디퍼는 팩토리 함수 구독 시작된 시점부터 이벤트 시작
