observable

M_yeon·2022년 10월 22일
0

observable

연속적인 비동기 작업 도와주는 도구입니다.

  • 연속적인 비동기 작업이란?
    - 요청을 빠르게 여러번 보내는 것 입니다.
    > 📚 **observable 사용예제**
    게시글 목록페이지에서 페이지 요청을 여러번 빠르게 했을경우,
    백엔드에서 누른 순서대로 응답을 보내지 않습니다.

예를 들어,
3번페이지를 요청했다가 빠르게 5번 페이지를 요청했을 경우 3번 페이지 요청을 취소 후 5번 페이지를 보내줘야 하는데 , 백엔드에서는 3번페이지를 보여주게 됩니다.

이런경우엔 promise로 처리 할 수 없습니다. 이럴 때 observable을 사용하게 됩니다.

apollo-client의 flatmap

알고리즘에서 보신 분도 있겠지만, 해당 메소드와는 다른 flatMap입니다.
여기서 사용하는 flatMap은 apollo-client에서 지원하는 flatMap입니다.

import {from} from 'zen-observable'

export default function (){

	const onClickButton = ()=>{
		// new promise(()=>{})
		// new observable(()=>{})

		// from을 hover해보시면 observable이 나옵니다.
		from(["","",""]) // fromPromise
			.flatMap((el)=> from([`${el} 결과에 qqq 적용`,`${el} 결과에 zzz 적용`]))
			.subscribe((el)=>(console.log(el)))
	}

	return <button onClick={onClickButton}> 클릭! </button>
}

💡 fromPromise란?
→ onError 라는 함수는 return타입으로 Observable타입을 받고 있습니다.
하지만, 우리가 리턴해주는 값은 promise이기 때문에 Observable타입으로 바꿔줄 도구가 필요합니다.
해당 도구 역시 아폴로에서 지원해주고 있으며, 그 도구가 바로 fromPromise 인 것 입니다.
정리 하자면, fromPromise 는 promise타입을 Observable타입으로 바꿔주는 도구 입니다.
즉, from과 비슷하다고 보시면 됩니다.

참고자료: ReactiveX-observable
observable 유튜브식 정리


Observable이 방출하는 이벤트에는 아래와같이 크게 네 가지 타입이 존재하는데요.

  • onNext
  • onError
  • onCompleted
  • onDisposed

✍🏻 Hotobservable,coldobservable???

Hot Observable은 뜨거워서 데이터를 바로 흘려 보내는 Observable이고, Cold Observable은 얼어붙어 있어서 subscribe를 해야 흘려 보내는 Observable이다.
Hot Observable은 Observable을 만들자마자 아이템들을 흘려보낸다는 의미다. 그래서 Observable을 만들고 일정 시간이 지난 상태에서 subscribe하게 된다면, 처음부터 아이템을 받아보지는 못하고 중간부터 나온 아이템을 subscribe할 수 있게 된다.
Hot Observable을 정리하면
1. 구독자의 존재 여부와 상관없이 데이터를 배출하는 Observable이다
2. 그래서 여러 구독자에 선택적으로 고려가 가능하다
3. 구독 시점으로부터 발행하는 값을 받는 걸 기본으로 한다
4. 마우스, 키보드, 시스템 이벤트 등이 주로 사용되며 멀티태스킹도 포함된다
Cold Observable은 반대로 바로 흘려보내지 않는다. subscribe할 때 아이템들을 흘려보낸다.
Cold Observable을 정리하면
1. 일반적인 옵저버 형태다
2. 누가 구독해주지 않으면 데이터를 배출하지 않는다
3. 일반적인 웹 요청, DB 쿼리 등이 사용되며 내가 요청하면 결과를 받는 과정을 거친다
4. 처음부터 발행하는 것을 원칙으로 한다

0개의 댓글