오늘은 어제 마무리하지못한 refreshToken부분을 이어서한다.
어제 끝냈던 부분은 accessToken이 만료되면 restoreAccessToken을 발급받고, 해당 토큰을 통해 accessToken을 발급받아 벡엔드로 요청시에 같이 갈수있게 해주는 작업까지 했다.
그런데 문제는 현재 벡엔드에서 사용하고있는 배포 서버 (구글)의 LB정책이 변경된것같다는 이유로 설정에서 뭔가가 막혔던것이었다. 따라서 벡엔드 수정후에 다시 진행하게 되었다.
토큰만료에러 -> 잡고, accessToken재발급받기(restoreAccessToken), -> 이 토큰을 이용해 refreshToken을 받아 쿠키에 저장하고 이것이 refreshToken을 이용해만든 accessToken. -> 이것을 이용해 인가
기존의 토큰 -> 변수(recoilState)에 담아놨었음. -> 다만 새로고침시 사라지는 문제가 있어 임시로 로컬스토리지에 저장하고 useEffect를 사용해 로컬컬스토리지에서 꺼내서 사용했다.
그런데, 로컬스토리지는 보안문제때문에 실제로 사용하지 않는다고했다.
기존과 동일하게 accessToken은 변수에 저장을 해두고 꺼내쓰는데, 만약 이 토큰이 만료가되면 다시 토큰을발급받기위해 로그인시 restore토큰(refreshToken)도 함께받고,이 토큰은 쿠키에 저장을한다.
이후 토큰만료가 일어나면 쿠키에 저장되어있는 이 토큰을 이용해 새로운 accessToken을 발급받는다(쿠키에 저장되어있으니, api요청시 함께 날라가기에 벡엔드에서 확인이 가능하다.)
이런식으로반복되지만 빠르게 진행되기에 유저는 알지못한다.
새로고침시 사라지는 토큰
-> useEffect를 사용해 리프레쉬토큰을 요청하는 api를 한번더 실행하며 변수에 담아주면되는데, 기존에 로그인검증할때도 필요한 내용. 따라서 api요청이 두번나가니 비효율적
이 요청나가는 것을 따로 함수로빼서 그 결과만 받아와 사용 -> useRecoilValueLoadable이라는것을 사용해 글로벌에서 요청하고 그결과만 필요한곳에서 !!
옵져버블. 프로미스
프로미스 -> 비동기 작업을 도와줌.
연속적으로 클릭한 작업들. 현재 클릭한 작업빼고 마지막요청만 보내기.
3페이지 게시물과 5페이지게시물을 빠르게 클릭했다. 먼저 요청한것은 3번인데, 3번내용이 많아 5번게시물이 먼저 나오고 그후에야 3번이 나와 페이지는 5페이지가 되었으나 내용은 3페이지이다 -> 이전요청은 취소되어야맞다.
옵져버블 사용예제 =>(옵져버블: 연속적인 비동기 요청 묶어서 처리하는방법)
- 연속적인 페이지 클릭시
- 연속적인 검색어 변경시
--> 내부에는 프로미스를 썼으나 이것을 옵져버블로 만들어주기위해 fromPromise를 사용한것
아폴로 클라이언트는 옵져버블기반으로 되어있다.
-> 옵져버블 -.> @apollo/client에서 제공됨.
원본은 zen-observable
이보다 더 많이 사용되는것은 rxjs => 반응형 프로그래밍이라는 말. (Reactive Extention For JavaScript)
import { from } from "zen-observable"; export default function ObseverbleFlatmapPage(): JSX.Element { const onClickButton = (): void => { // new Promise((resolve, reject) => {}); // new Observable((observer) => {}); // fromPromise=> 프로미스를 옵져버블로 변경하는것, flatmap // zen-observable섪치하기 from(["1번 Query", "2번 Query", "3번 Query"]) // 옵져버블로 변경하는것.(프로미스가 아닌것을..) .flatMap((el) => from([`${el} 결과에 qqq적용`, `${el} 결과에 zzz적용`])) // 각각의 결과를 flatMap을 통해 적용. .subscribe((el) => { // 받아온것 실행 console.log(el); }); };
