[Angular] 옵저버블1

 

앵귤러 진짜 너무 어렵다...새삼 리액트는 배우기 쉬웠다는 생각이든다ㅠㅠ.

이럴수록 더 천천히 공부를 해보자!

 

할수이따 이채야채 

 

우선 제일 어려운 개념1.

 

Observable. 옵저버블

 

1. 옵저버블 인스턴스는 구독자 함수를 통해 만든다.
2. 구독자 함수는 subscribe() 메소드를 사용할때 실행된다. subscribe()자체가 옵저버블에 있는 메소드.
3. 구독자 함수를 subscribe()로 구독할때, 옵저버를 함께 전달, 옵저버 => 자바스크립트 객체형태(옵저버블에서 데이터 처리하기위해)
4. subscribe()를 실행하고 나면 subscription 타입의객체반환하고. 이것이 옵저버.

아래는 앵귤러에 있던 옵저버블 예시.

 

new Observable를 통해 인스턴스를 생성한후에 subscribe를 통해 구독

// 구독자가 구독을 실행하면 새로운 Observable 인스턴스를 생성하고
// 클라이언트의 접속 위치를 추적하기 시작합니다.
const locations = new Observable((observer) => {
  let watchId: number;


  // 접속 위치를 처리하는 API는 간단하게 사용해 봅니다.
  if ('geolocation' in navigator) {
    watchId = navigator.geolocation.watchPosition((position: GeolocationPosition) => {
      observer.next(position);
    }, (error: GeolocationPositionError) => {
      observer.error(error);
    });
  } else {
    observer.error('Geolocation not available');
  }

  // 구독자가 구독을 해지하면 사용하던 데이터를 모두 지웁니다.
  return {
    unsubscribe() {
      navigator.geolocation.clearWatch(watchId);
    }
  };
});

// 옵저버블을 시작하려면 subscribe() 함수를 실행합니다.
const locationsSubscription = locations.subscribe({
  next(position) {
    console.log('Current Position: ', position);
  },
  error(msg) {
    console.log('Error Getting Location: ', msg);
  }
});

// 옵저버블은 10초 후에 구독을 해지합니다.
setTimeout(() => {
  locationsSubscription.unsubscribe();
}, 10000);

---

옵저버블을 처리하기위해서 알림을 처리하는 콜백함수를 이용해야하는데 아래와같다.

 

알림 타입설명

next	필수. 데이터 스트림을 처리하는 핸들러입니다. 옵저버블 구독을 시작한 후 여러번 실행됩니다.
error	필수는 아님. 에러 스트림을 처리하는 핸들러입니다. 에러 스트림이 전달되면 이후 옵저버블 로직이 실행되지 않습니다.
complete	필수는 아님. 옵저버블 종료 스트림을 처리하는 핸들러입니다. 옵저버블에서 지연 로직을 사용한다면 옵저버블이 종료된 이후에도 새로운 데이터가 전달될 수 있습니다.

 

next!! 는 반드시 알아둘것

 

---

구독

---

구독시 자주 사용되는것

 

• of(...배열)—인자로 전달한 배열의 항목을 하나씩 전달하는 Observable 인스턴스를 생성
• from(이터러블)—인자로 전달한 이터러블의 항목을 하나씩 전달하는 Observable 인스턴스를 생성. 이 메소드는 배열을 옵저버블로 변환할 때 자주 사용.

 

// 3개의 값을 전달하도록 옵저버블을 간단하게 정의합니다.
const myObservable = of(1, 2, 3);

// 옵저버 객체를 정의합니다.
const myObserver = {
  next: (x: number) => console.log('Observer got a next value: ' + x),
  error: (err: Error) => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

// 옵저버 객체를 실행합니다.
myObservable.subscribe(myObserver);

// 로그:
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification