Refresh token의 장점 본인은 원래 API 요청 시 매번 Access Token을 발급하는 식으로 API를 구성하였는데, 이렇게 구성할 경우 사용자가 많아질 수록 시스템 부하가 증가한다. 따라서 Refresh Token을 발급하는 것이 낫다. 또한, refresh token이 있을 경우 access token의 유효 시간을 짧게 하여 탈취 시 빠르게 무효화 시킬 수 있다. Refresh token의 동작 Access Token을 통해 User가 request를 보내고, 유효 시간이 만료 되었다는 응답을 받는다. User는 Access Token고 함께 Refresh Token을 서버로 보낸다. Refresh Token이 유효하다면 유효시간이 갱신된 Access Token이 새로 발급되어 User..

token은 cookie에 저장할 수도, Web Storage에 저장할 수도, Client 자체에 저장할 수도 있다. Cookie 쿠키는 서버가 보낸 데이터를 최대 4KB까지 저장 가능하다. 클라이언트에서 Credential 속성으로 허용하면 서버에서 접근 가능하다. HTTP Request 시 자동으로 포함되어 서버에 쿠키 정보를 제공 가능하다. HttpOnly 설정을 이용하여 사용자가 제어할 수 없도록 만들 수 있다. Web Storage Session Storage 서버에서 접근할 수 없다. 세션이 종료되면 모두 삭제 된다. 5~10MB의 크기를 갖는다. Local Storage 서버에서 접근할 수 없다. 반 영구적으로 저장할 수 있다. 5~10MB의 크기를 갖는다. Client Side 클라이언트 ..

개념 정리 내가 제공하는 서비스를 Client, 다른 서비스를 Resource Server, 두 서비스를 모두 이용하는 사용자를 Resource Owner라고 정의한다. 추가적으로 Resource Server에서 인증을 담당하는 서버를 따로 Authorization Server라고 한다. 이렇게 연합해서 인증체계를 제공하는 것을 federated Identity라고 부른다. 배경 Client가 Resource Server(google, facebook 등)에 있는 Resource Owner의 계정에 접속할 수 있는 방법은 무엇이 있을까? Resource Server에 대한 Resource Owner의 id, pw를 제공받으면 더 좋겠지만 보안 신뢰 문제가 있다. 따라서 oAuth가 나왔다. oAuth를 ..

React-query : fetch, cache, synchronize, update(for server state)에 사용되는 라이브러리이다. 공식사이트 React Query Hooks for fetching, caching and updating asynchronous data in React react-query.tanstack.com 배경 server state 사용 시 발생할 수 있는 문제점은 다음과 같다. caching deduping(데이터 중복 제거) update "out of date" data / know when is it reflecting updates data pagination optimization, lazy loading data memory management, garba..

query가 오래 되었다는 것을 판단하고 다시 fetch해올 때, queryClient.invalidateQueries 함수를 사용한다. https://react-query.tanstack.com/guides/query-invalidation Query Invalidation Query Invalidation Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. For that purpose, the Quer..

query와 다르게 CUD에 사용된다. https://react-query.tanstack.com/guides/mutations Mutations Subscribe to our newsletter The latest TanStack news, articles, and resources, sent to your inbox. react-query.tanstack.com 사용예제 const mutation = useMutation(newTodo => axios.post('/todos', newTodo)) return ( {mutation.isLoading ? ( 'Adding todo...' ) : ( {mutation.isError ? ( An error occurred: {mutation.error.mes..

기본 사용 const info = useQuery('unique_key', fetchData); // fetchData는 promise 반환 unique한 key로 정의하며, key에 묶이는 데이터는 비동기 데이터이다. useQuery가 반환하는 result는 비동기 데이터의 상태를 담고 있다. 상태 loading isLoading이 true가 된다. error isError가 true가 되며, error에 에러 정보가 담긴다. success isSuccess가 true가 되며, data에 정보가 담긴다. idle 사용 예제 const { isLoading, isError, data, error } = useQuery('key', fetchData); // const { status, data, erro..

웹 페이지에서 앱 내부로 유저를 이동하기 위해 딥링크를 사용한다. 즉, 딥링크는 모바일 앱 내의 특정 콘텐츠로 이동할 수 있는 모든 링크를 의미한다. Deeplink 종류 URL Scheme 고유앱://콘텐츠 의 형태이다. 앱이 깔려있을 때 특정 앱의 특정 페이지로 이동한다. 앱 미설치 시 동작하지 않는다. Universal Link IOS에서만 동작하는 딥링크이다. 유니버셜 링크는 앱에서 허용할 도메인을 등록해주어야 하며, 웹 프론트에서 .well-known/apple-app-site-association 파일을 정의하여 혀용할 path를 직접 결정할 수 있다. 유니버셜 링크를 사용하면 모바일 웹으로 특정 Path의 페이지에 접속 시 앱 내의 해당 위치로 유저를 이동 시켜줄 수 있다. App Link ..