TIL

Socket

소켓도 token 확인을 해줘야 한다.

소켓을 로그인 시 한번만 연결해주다보니 초반에 구현하고 잊고 있었는데
REST API에서 매 요청 시마다 header에 Authorization을 넣어 보내주듯이
소켓에서도 연결 시 헤더에 Authorization으로 토큰을 넣어 보내준다!
물론 소켓이 끊어졌다가 재연결 시에는 다시 넣어줘야 한다.
잊지 말자!

Axios

여러 개의 요청이 한번에 들어왔는데 토큰이 만료된 경우

이 경우, 엑세스 토큰이 만료되어 모두 실패했다가 모두 다시 재발급 받는 로직으로 돌아간다.
이 때 실패한 경우 요청들을 보관(?)해두었다가, 재발급을 한번만 받은 후에
정상적으로 토큰이 재발급 되었을 때 이 요청들을 다시 꺼내서 요청할 수 있다고 한다..!
근데 아무리 찾아도 못 찾겠어..
내일 여러 키워드로 다시 검색해보아야 겠다.
그래도 안되면 사람들한테 물어봐야지~~~!

React-Query

Pre-fetching

아직 프로젝트에서 한번도 써보지 않은 기능.!
우리는 바로 렌더링 해야 하는 데이터의 경우 API 결과로 받은 데이터를 setQueryData() 해주는 것으로 대신하고 있었는데,
사실 이 방법만을 사용할 수 없는게, 드물겠지만 웹과 앱을 함께 사용해서 웹의 API 결과만으로 최신을 보장할 수 없는 경우가 있기 때문이다.
그래서 setQueryData()로 최신 데이터를 미리 보여주고, refetch로 최신을 보장한다.
그리고 당장 보여주지 않아도 되는 페이지의 데이터가 변경된 경우에는 setQueryData() (가능하면), 그리고 invalidate 처리만 한다.

만약 이렇게 invalidate 처리된 페이지로 이동할 때, 데이터를 미리 받아오기 위해서 prefetchQuery()를 사용할 수 있다.

async function handleNavigate() {
  await queryClient.prefetchQuery({
    queryKey: [],
    queryFn: getList,
  });
  navigate("/list");
}

이렇게 주로 페이지 이동이 보장되는 상황에서 navigate()와 함께 사용된다고 한다!

prefetching 결과를 원하는 대로 띄우기 위해서는 당연히 async-await로 동기 보장을 해주어야 하고,
이 경우는 해당 데이터가 invalidate하거나 stale한 경우에만 동작할 수 있으니 네비게이팅 시 불필요한 리소스 낭비 걱정을 하지 않아도 된다!
당장 프로젝트에 적용할 수 있는 부분인듯 하다 ^_^