refreshToken, Observable

브라우저 쿠키에 자동으로 refreshToken이 저장되고,
accessToken은 변수에 담겨진다.

Observable

연속적인 비동기 작업을 도와주는 도구

연속적인 비동기 작업이란?
: 요청을 빠르게 여러번 보내는 것

❓observable 사용예제
→ 연속적인 페이지 클릭 혹은 연속적인 검색어 변경

게시글 목록페이지에서 페이지 요청을 여러번 빠르게 했을경우, 백엔드에서 누른 순서대로 응답을 보내지 않는다.
예를 들어,
3번페이지를 요청했다가 빠르게 5번 페이지를 요청했을 경우 3번 페이지 요청을 취소 후 5번 페이지를 보내줘야 하는데 , 백엔드에서는 3번페이지를 보여주게 된다.
이런경우에는 3번 페이지 요청을 취소한다.

하지만, 이런경우는 promise로 처리 하는게 쉽지 않으므로 이럴 때 observable을 사용하게 된다.

반응형 프로그래밍을 가능하게 해주는 라이브러리
rx.js, zen-observable 등이 있다.

zen-observable

import { Observable } from "@apollo/client";
import { from } from "zen-observable";

export default function ObservableFlatmapPage() {
  const onClickButton = () => {
    // new Promise(()=>{})
    // new Observable(()=>{})

    // prettier-ignore
    from(["1번 useQuery", "2번 useQuery", "3번 useQuery"]) // fromPromise
      .flatMap((el: string) => from([`${el} 결과에 qqq 적용`, `${el} 결과에 zzz 적용`]))
      .subscribe((el)=> console.log(el))
  };
  return <button onClick={onClickButton}>클릭</button>;
}

// 1번 useQuery 결과에 qqq 적용
// 1번 useQuery 결과에 zzz 적용
// 2번 useQuery 결과에 qqq 적용
// 2번 useQuery 결과에 zzz 적용
// 3번 useQuery 결과에 qqq 적용
// 3번 useQuery 결과에 zzz 적용