[기업협업] 4일차

김상연·2021년 4월 16일
0

기업협업

목록 보기
5/8

오늘은 위코드 데이라고 일주일에 한 번씩 가는 날이라 헬스장을 안 가고 푹 쉬다 오후 2시에 위코드로 출근

매일 사수 분께서 알려주신 유튜브 강의로 RxJS에 대해 듣고 있지만 영어 강의다 보니 이해하기에는 조금 어려움이 따른다.
하지만 개발자의 언어는 코드이므로 나는 오로지 코드만 바라본다.

https://m.blog.naver.com/PostView.nhn?blogId=bkcaller&logNo=221627461671&proxyReferer=https:%2F%2Fwww.google.co.kr%2F

RxJS의 개념에 대해 자세하게 설명한 블로그로 거의 대부분이 영어 자료이므로 공부하기 힘드신 분들을 위해 공유한다.

RxJS의 개념

RxJS는 Observer 패턴을 적용한 Observable이라는 객체를 중심으로 동작

Observable

Observable은 특정 객체를 관찰하는 Observer에게 여러 이벤트나 값을 보내는 역할

// javascript
Observable.create(
  (observer) => {
    try {
      observer.next('item');
    } catch(e) {
      observer.error(e);
    } finally {
      observer.complete();
    }
}).subscribe(
  (x) => console.log(x),
  (err) => console.error(err),
  () => console.log('complete')
)

observer에는 3가지 메서드가 존재

  1. next : Observable 구독자에게 데이터를 전달

  2. complete : Observable 구독자에게 완료되었음을 알림. next는 더 이상 데이터를 전달하지 않는다.

  3. error : Observable 구독자에게 에러를 전달. 이후에 next 및 complete 이벤트가 발생하지 않음

RxJS Observable Lifecycle

  1. 생성
    Observable.create()
    어떠한 이벤트도 발생하지 않음

  2. 구독
    Observable.subscribe()
    구독시점에 이벤트를 구독할 수 있음

  3. 실행
    observer.next()
    실행시점에 이벤트를 구독하고 있는 대상에게 값을 전달

  4. 구독 해제
    observer.complete()
    Observable.unsubscribe()
    구독 해제 시점에 구독하고 있는 모든 대상의 구독을 종료

RxJS Subject

Subject는 여러 Observer에서 구독이 가능, Subject에서 전달하는 값을 Observer 들이 전달받음

RxJS 개발방법

  1. 데이터 소스를 Observable로 생성

  2. Observable의 Operator를 사용
    (데이터를 변경, 추출, 합침, 분리)

  3. 원하는 데이터를 받아 처리하는 Observer를 만듬

  4. Observable의 subscribe를 통해 Observer를 등록

  5. Observable의 구독을 정지, 자원을 해지

    subscription.unsubscribe();



0개의 댓글