나 보고 있는거야?!?!?!! observable/promise. Hot&Coooool

async 비동기적 - 두 사건이 같은 시간에 일어나지 않는다. - 같은 시간 선상에 없다. - 동시에 처리한다. 

sync 동기적 - 두 사건이 같은 시간에 일어난다. - 같은 시간 선상에 있다. - 동시에 처리하지 않는다.

 

용어 되게 헷갈린다..!!!!!!!

같은 시간 선상에 있다는게 같이 시작한다는 게 아니라, 정말 같은 시간 선상에 있어서 하나 끝내야 또 다른 하나가 시작될 수 있음을 의미한다. . 

 

observable 식별[관찰]할 수 있는

 

 

 

Promise is eager, whereas the Observable is lazy.

 Promise는 간절하고,,, Observable은 게을러요? 예?...

실행자 함수가 정의 순간에 호출되기 때문에 promise는 eager하다고 하다. 메서드가 호출되는 시점은 실행자 함수에 영향을 주지 않는다.

 

파파고의 도움을 받았지만 무슨 소린지 잘 모르겠다.

 

예시를 보자! 

const welcomePromise = new Promise(resolve => {
  console.log("첫번째로 쓰였어요.");

  resolve("두번째입니다.");
});

console.log("세번째입니다.");

welcomePromise.then(console.log());

// console output:
// '첫번째로 쓰였어요.'
// '세번째입니다.'
// Promise {'두번째입니다.'}

출처: Wojciech Trawiński, "JavaScript Theory: Promise vs Observable" 에서 변형함

(내가 알기로...) promise는 resolve가 될때까지 기다린다. resolve를 실행하면 대기하는 상태에서 Fulfilled(이행, 완료) 상태가 된다. 그리고 그때 then()을 이용하여 결과값을 받을 수 있다. 그래서 여기서의 흐름은 Promise를 호출하면 그대로 내려와서 첫번째로 쓰인 콘솔로그를 수행한다. 그리고 resolve()가 호출되면 promise가 Fulfilled 상태가 되어서 then()이 결과값을 받을 수 있는 상태가 된다. 그리고 promise 문을 나와서 세번째로 쓰인 콘솔로그를 수행한다. 마지막으로 then은 resolve가 보낸 "두번째입니다."를 받고 그것을 콘솔에 출력한다. 

 

즉!!! promise는 resolve가 되기 전엔 "세번째입니다."로 내려오지 않는다. 

 

 

그럼 Observable은 어떠한가? 

import { Observable } from "rxjs";

const welcomeObservable$ = new Observable(observer => {
  console.log("첫번째로 쓰였어요.");

  observer.next("두번째입니다.");
  observer.complete();
});

console.log("세번째입니다.");

welcomeObservable$.subscribe(console.log);

// console output:
// "세번째입니다."
// "첫번째로 쓰였어요."
// "두번째입니다."

출처: Wojciech Trawiński, "JavaScript Theory: Promise vs Observable" 에서 변형함

(이건 import가 필요해서 runjs에서는 해볼 수가 없었다...)

 promise 때랑 콘솔에 출력되는 순서가 다르다! 왤까?

Observable은 value를 subcribe하기 전엔 생성자 함수가 작동하지 않기 때문에 lazy하다고 한다.

 

 흐름을 보면 Observable을 생성하고, 바로 그 밑의 세번째 쓰인 콘솔로그가 실행된다. 그리고 그 밑으로 내려와서 subscribe를 했을 때, observable 안으로 들어간다.  왜 ! 왜냐고??? Observable은 Value가 나오길 기다리지 않고, 관찰자를 안에 둔다. 그래서 그 관찰자를 통해 Value가 나왔는지 안 나왔는지를 확인한다. 그래서 observable 안으로 들어가지 않았던 것이다! 즉 subscribe를 했을 때 관찰자를 통해 Value가 나왔다고 알림을 받고 Value가 나왔군... 하면서 observable 안으로 들어가는 것이다.  ( 이 부분은 내가 대충 번역해서 본 거라 정확하지 않을 수도 있습니다..ㅠ 죄송,, )

 

 Observable은 임의의 순서에 따라 병렬로 실행되고 결과는 나중에 연산된다. Observable안에 관찰자를 두고 이벤트가 발생하면 그 순간을 감지해서 준비된 연산을 실행시킨 후 그 결과를 리턴하기 때문에 subscribe라고 한다. 

이는 서로 의존관계가 없는 많은 코드들을 실행할 때, 다른 코드가 결과를 리턴하는 것을 기다리지 않고 계속해서 다음 코드 블럭을 실행할 수 있기 때문에 한 번에 여러개의 코드를 실행 시킬 수 있다! 

 구독이 있다면 구독해지도 있다! unsubscribe 메서드를 이용하면 더 이상 Value를 받지 않을 수 있다! 

 

 핫 옵저버블... 콜드 옵저버블...! (용어 귀엽다)

Hot Observable은 생성되자마자 Value를 내보낸다. 반대로 Cold Observable(냉정할 것 같아,,)는 subscribe하기 전까진 Value를 내보내지 않는다. 그래서 반환하는 전체를 subscribe 할 수 있도록 보장받는다...고 하는데 이 문장은 무슨 뜻인지 잘 모르겠다. 

 

 

 

Promise는 항상 비동기적이고 Observable은 비동기적일 수도, 동기적일 수도 있다.

Promise는 한 개의 Value만 내뱉지만, Observable은 Value의0 stream을 제공한다.(0개~여러개의 값)