프론트엔드 개발자가 되기위한 여정 -30

이정우·2022년 10월 14일
0

frontend-bootcamp

목록 보기
32/60

밸~하!

밸로그여러분 안녕하세요!

오늘은

Observable이라는것에 대해서 알아보겠습니다!

먼저 Observable이란 무엇일까요??

1.Observable?

쉽게말해
연속적인 비동기 작업을 도와달라는것입니다

그럼 도대체 연속적인 비동기작업이 무엇일까요??

예를들어 보겠습니다!

pagination에서 3페이지를 클릭하면 3페이지에 대한 요청이 들어가고
5페이지를 클릭하면 5페이지에 대한 요청이 들어가는거 맞죠?

그런데 이것을 빠르게 해서 거의 동시에 같이 호출했다고 해봅시다
3번을 먼저누르고 5번을 눌렀지만 5페이지가 먼저나와서 5페이지가 클릭되어있지만 3페이지에 있는 내용이 나올수도 있다는거죠!

왜요?
백엔드에서 여러 작업을 처리했는데 먼저 5페이지를 보내줄수도있다는거죠
이럴떈 기존것읠 취소하거나 삭제를 해줘야합니다

이렇게 연속적으로 호출이되는 비동기작업을 바로 연속적인 비동기작업이라고 합니다

이떄 이것을 조정할수있도록 도와주는게
바로

Observable입니다!

그럼 언제사용할까요??

1. 연속적인 페이지 클릭

2. 연속적인 검색어 변경

이렇게 연속적인 비동기 작업이 일어날때 사용한다는겁니다!

자 그럼 공식홈페이지에서는 옵저버블을 어떻게 설명하고있는지 한번 알아볼까요??

Observable 안에 데이터를 조회, 변환하는 메커니즘을 정의한 후, Observable이 이벤트를 발생시키면 옵저버의 관찰자가 그 순간을 감지하고 준비된 연산을 실행시켜 결과를 리턴하는 메커니즘

출처 :http://reactivex.io/documentation/ko/observable.html

이렇게 정의를 하고있습니다

그럼 이번엔 옵저버블의 종류에 대해서 봐볼까요??

2. observable의 종류

옵저버블의 종류에는 크게 2가지가 있습니다
한개는 cold
다른 한개는 hot
이렇게 나누어지는데

그럼 cold는 무엇이고 hot은 무엇일까요??

2-1. cold Observable

쉽게이야기를 드리면
데이터를 바로바로 보내는것이 아니라 이름 그대로 천천히 즉 Subscribe할때 생성해서 보내준다는겁니다

가장 일반적인 Observable인데요
이 cold Observable은 누군가가 subscribe를 하지 않으면 데이터를 주지 않습니다

한번 이렇게 예시를 들어볼까요??

쉽게 유튜브 구독을 생각하시면 편할것입니다

유튜브를 구독하기 전에는 알림이 오지 않지만
유튜브를 구독하게 된다면 구독한 곳의 영상이 올라올때마다 알림을 받을수가 있겠죠??

콜드 옵져버블이 바로 이런것 입니다

그럼 이번에는

핫 옵저버블에 대해서 봐볼까요??

2-2. hot observable

핫 옵저버블은 콜드 옵저버블과는 반대로

데이터를 지속적으로 준다는것입니다

이해를 돕기위해 핫옵저버블 이벤트의 예시들을 들어보겠습니다
저희가 컴퓨터를 하면서 가장 자주 사용하는 키보드와 마우스 그리고 멀티태스킹등이 바로 핫 옵저버블이 적용된것이라고 할수있습니다
키보드같은경우는 지속적으로 실행이 되다가 자판이 눌렸을때 그 값을 바로바로 주는것이 바로 이러한 원리 입니다

자 오늘은 옵저버블에 대해서 봤는데요
종류와 각자의 차이점 어떤곳에서 어떤 옵저버블을 사용해야 더욱 효율이 좋을지 알수있겠죠??

오늘은 그럼 여기까지 포스팅하겠습니다

오늘도 지식 한개 축적해 가봐요!

그럼 이만

밸~바!

profile
주니어 프론트엔드 개발자

0개의 댓글