본문 바로가기

2022/06/18

(4)
리액트 쿼리 : 웹소켓 원문 보기 : https://tkdodo.eu/blog/using-web-sockets-with-react-query 웹소켓이란? WebSocket을 사용하면 푸시 메시지 또는 "라이브 데이터"를 서버에서 클라이언트(브라우저)로 보낼 수 있습니다. 일반적으로 HTTP를 사용하면 클라이언트가 서버에 요청하여 일부 데이터를 요청하고 서버가 해당 데이터 또는 오류로 응답한 다음 연결이 닫힙니다. 클라이언트가 연결을 열고 요청을 시작하는 역할만 담당하기에, 업데이트를 사용할 수 있음을 알게 되면 서버가 클라이언트에 데이터를 푸시할 여지가 없습니다. 이를 WebSockets 이 해결합니다. 다른 HTTP 요청과 마찬가지로 브라우저는 연결을 시작하지만 WebSocket으로 연결을 업그레이드하고 싶다고 지시합니다...
리액트 쿼리 : 타입스크립트 원문 보기 : https://tkdodo.eu/blog/react-query-and-type-script React Query and TypeScript Combine two of the most powerful tools for React Apps to produce great user experience, developer experience and type safety. tkdodo.eu 리액트 쿼리의 동적이며 unopinated인 특성 때문에 ts와 사용하기 어려운 부분들이 존재합니다. 좀 더 알아봅시다. Generics React Query는 Generics를 많이 사용합니다. 라이브러리가 실제로 데이터를 가져오지 않고 API가 반환하는 데이터의 타입을 알 수 없기 때문에 필요합니다. 공식 문서..
리액트 쿼리 : 테스트 / 테스팅 원문 보기 : https://tkdodo.eu/blog/testing-react-query Testing React Query Let's take a look at how to efficiently test custom useQuery hooks and components using them. tkdodo.eu 순수하지 않은 컴포넌트 useContext, useSelector, useQuery를 사용하는 컴포넌트들은 순수하지 않습니다. 다른 환경에서 호출하면 다른 결과가 발생하기 때문입니다. 해당 컴포넌트들을 테스트 할 때에는 "의존성" 공급에 대해 생각해야 합니다. 네트워크 요청 흉내내기 React Query는 비동기 서버 상태 관리 라이브러리이므로 컴포넌트가 백엔드에 데이터를 요청할 가능성이 높습니다..
리액트 쿼리 : 쿼리 상태 체크 원문 보기 : https://tkdodo.eu/blog/status-checks-in-react-query 쿼리 상태는 아래 4개 중 하나입니다 success : 쿼리가 성공했으며 이에 대한 데이터가 있습니다. error : 쿼리가 실패했으며, 이에 대한 정보를 담은 에러가 설정되었습니다. loading : 아직 쿼리 데이터가 없으며, 처음 로딩 중입니다. idle : 사용이 설정되지 않아 쿼리가 실행된 적이 없습니다. 업데이트: React Query v4에서 idle 제거 isFetching 플래그는 요청 중일 때만 true지만, 내부 상태머신의 상태가 아님. 자세한 내용은 #13: Offline React Query 참조 로딩 상태, 오류 상태를 먼저 확인하기 명시적 사용자 상호작용 시에만 데이터를 ..