- RefreshToken
- Observable
1. Refresh Token
RefreshToken은 AccessToken 갱신 자동화
- 브라우저에서 아이디/비밀번호 입력 후 백엔드로 전달
- login API 작동 JWT(AccessToken) 생성 - 1시간 짜리
- 위 과정에서 JWT(RefreshToken)도 같이 생성 - 2주 짜리
- 두 개의 토큰 모두 브라우저로 전달
- global State에 accessToken 저장, cookie에 refreshToken 저장
refreshToken에는 두 가지 옵션이 있다.
1. httpOnly
2. secure(https)
-> 쿠키 탈취 막아줌
만약 받은 accessToken을 백엔드로 보내서 인가(Authorization)과정을 거치다 토큰 만료로 인해 실패한다면?
1. 토큰 만료 에러를 보고 토큰이 만료된 것을 인지함.
2. 가지고 있던 refreshToken을 백엔드로 보내서 만료되었는지 아닌지 인가(Authorization).
인가 성공 시, 신규 JWT(AccessToken) 발급 후 브라우저로 반환.
인가 실패 시, 재로그인으로 신규 JWT(AccessToken, RefreshToken) 둘 다 발급 받아야함.
3. 재발급 받아온 새로운 accessToken으로 방금 시도했던 쿼리(ex. fetchUser) 재실행
보통 백엔드에서 인증 관련된 폴더(AuthService)와 자원 관련된 폴더(ResourceService)를 따로 만든다.
AuthService는 보통 네이버나 구글 등 대형 플랫폼에서 제공해준다
-> Social Login(= Open Authentication: OAuth)
네이버로 로그인하면 네이버 AccessToken 제공.
구글로 로그인하면 구글 AccessToken 제공.
ResourceService는 UserService, BoardService, ProductService 등으로 더 세분화 할 수 있는데 이러한 방식을 MSA(Micro Service Architecture)라 부른다.
이렇게 세분화해서 얻을 수 있는 장점: 만약 세분화된 기능 중 하나가 장애가 나도, 다른 기능들은 정상 작동한다.
- 페이지 접속 시 자동으로 데이터 요청 후 리렌더링 : useQuery
- 임의의 분기점에서 데이터 요청 : useLazyQuery, useApolloClient
useLazyQuery와 useApolloClient의 차이점은?
useLazyQuery: 반환값에 data뿐만 아니라 데이터 요청 트리거 함수도 내장되어 있음 (클릭 이벤트 등)
useApolloClient: Axios와 동일
2. Observable
Observable은 Rx(Reactive eXtenstion)를 설명할 때 가장 많이 나오는 단어이다. 공식문서에 따르면 Rx는 Observable 스트림을 사용하는 비동기 프로그래밍용 API라고 나와있다. 자세한 내용은 공식문서를 보면 알 수 있겠지만,
Observable은 Promise와 빗대어 보면 차이점을 조금 더 명확히 알 수 있었다.(나는)
Promise는 객체 생성 시 즉시 실행되며 Loading 상태가 되고, then()은 같은 결과값을 가진다. 그리고 리턴값은 기본적으로 하나만 보낼 수 있도록 정의되어있으며, 여러 개의 리턴을 보낼 경우 첫 리턴을 제외하고 모두 무시된다. Promise를 사용한 데이터의 조작과 반환이 then()안에서 전부 이루어진다. Promise는 실행 도중에 취소할 수 없다. 에러 처리를 위해서는 catch()와 then() 둘 다 사용할 수 있지만 에러 처리 로직이 달라진다.
Observable은 객체 생성 시 즉시 실행되지 않고 구독(Subscribe)를 해야 실행된다. 이를 지연 로딩이라 부른다. 이 subscribe()는 여러 번 호출될 수 있으며, 각각은 고유한 결과값을 가진다. 그리고 여러 개의 리턴을 보낼 수 있다. Observable은 데이터의 조작과 반환(구독)을 나눌 수 있다. 구독자가 있을 때만 subscriber함수가 실행되면서 값을 계산한다. 이 말은 다른 곳에서 데이터를 조작, 가공할 수 있다는 뜻이다. Observable은 실행 도중에 취소unsubscribe()시킬 수 있다. subscribe()는 에러 처리도 함께 가능하며, 에러가 날 시 자동으로 구독이 취소된다. Observable은 동기와 비동기 처리가 모두 가능하다.
Observable 사용 예)
1. 연속적인 페이지 클릭
2. 연속적인 검색어 변경
