Today Hailie Learned

useQuery와의 차이점1. 반환 객체에서 반환되는 데이터 속성의 구조와 형태 (pages, pageParams)useQuery를 사용하면 쿼리 함수에서 데이터가 data 속성에 담겨 반환되지만, useInfiniteQuery 에서는 반환되는 객체가 data와 pages라는 두 가지 속성을 포함한다. pages는 각 데이터 페이지를 나타내는 객체의 배열이다. 따라서 pages 배열의 각 요소는 useQuery를 사용했을 때 각각의 쿼리에서 받을 수 있는 데이터에 해당한다.   pageParams (페이지 매개변수)도 있는데, 이는 각 페이지마나 사용하는 파라미터를 기록한다. (잘 사용되지는 않는다.)  그래서 각 쿼리는 pages 배열의 자신만의 요소를 가지고 있고, 그 요소는 해당 쿼리의 데이터를 나..

tanstack query를 사용해서 데이터 패칭을 하는데 페이지네이션을 구현할 때, 다음 페이지로 이동을 할때마다 로딩 화면이 살짝 보이는 것을 개선하기 위해서는 prefetching 을 사용하면 된다.  prefetching을 사용하면 말 그대로 데이터를 미리 가져와서 캐시에 넣고 사용자가 로딩 화면을 보지 않도록 할 수 있다.   prefetchQuery는 QueryClient 의 메소드이고, useQueryClient 훅을 써서 그 QueryClient를 가져올 수 있다.  상태 업데이트가 비동기적이라 업데이트가 이미 적용되었는지 정확하게 알 수 없기 때문에 다음 페이지 버튼의 클릭 이벤트에서 prefetching이 실행되도록 하지 않는게 좋다. 그래서 현재 페이지가 변경될 때마다 useEffec..

staleTime데이터가 오래됐다. 유효기간이 만료됐다. 데이터는 여전히 캐시에 있다. 그저 데이터를 다시 검증해야한다는 뜻이다.  데이터 prefetch는 데이터가 stale일 때만 트리거된다. (쿼리 포함하는 컴포넌트 다시 마운트되거나 브라우저 창이 리포커싱될 때)stale 시간을 데이터의 최대 수명으로 생각하면된다. (서버로부터 가장 신선한 데이터 버전을 가져오기 전에 데이터를 살려둘 건지) - useQuery 옵션에서 stale 시간 조정 가능const { data, isError, error, isLoading } = useQuery({ queryKey: ["posts"], queryFn: fetchPosts, staleTime: 2000, }); 데이터가 stale이어야 re..

isFetching비동기 쿼리가 아직 해결되지 않았다.아직 fetch가 완료되지 않았지만, axios 호출이나 graphGL 호출 같은 다른 종류의 데이터를 가져오는 작업일 수 있다.  isLoadingisFetching의 하위 집합으로 로딩 중이라는 것을 말한다. 쿼리 함수가 아직 미해결이지만, 캐시된 데이터도 없다. 이 쿼리를 전에 실행한 적이 없어서 데이터를 가져오는 중이고 캐시된 데이터도 없어서 보여줄 수 없다.  => 페이지네이션 측면에서 캐시된 데이터가 있는지 없는지 구분하는 것이 중요  React Query Dev Tools=> 모든 쿼리의 상태, 활성, 비활성, stale(오래됨) 등을 알려준다. => 마지막 업데이트 시간도 알려준다.  => 데이터 탐색기도 있어서 쿼리로 받은 데이터를 볼..

1. 진리값 검증toBeTruthy = 참인 값과 일치하는 매처toBeFalsy = 거짓인 값과 일치하는 매처=> 각 매처 앞에 not 추가하면 진리값을 반전시킬 수 있다.  TIP) null, undefined도 toBeFalsy와 일치하지만, 각각 검증하고 싶으면 toBeNull, toBeUndefined 사용한다.  describe("진릿값 검증", () => { test("참인 진릿값 검증", () => { expect(1).toBeTruthy(); expect("1").toBeTruthy(); expect(true).toBeTruthy(); expect(0).not.toBeTruthy(); expect("").not.toBeTruthy(); expect(fals..

작성한 테스트를 개발 환경에서 실행하는 방법은 크게 2가지이다. 1. 명령줄 인터페이스로 실행하기 1. package.json에 npm script를 추가한다. { "script" : { "test": "jest" }} 2. 명령어 "npm test" 또는 "npm test '경로'" 2. 제스트 러너로 실행하기vscode 익스텐션인 "제스트 러너"를 다운받으면 경로를 하나하나 입력하지 않고 원하는 쪽만 테스트 할 수 있다.   함수마다 Run | Debug 가 나오는데 클릭만 하면 된다.   https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner Jest Runner - Visual Studio Ma..

전체 코드 안녕하세요. 스크롤바 이벤트 테스트 observer 테스트입니다.   새롭게 알게 된 점1. IntersectionObserver 는 화면에 보일때, 화면에서 나갈 때 2번 실행된다. 그래서 화면에 보일 때만 실행하고 싶다면 아래의 코드처럼 isIntersection 을 활용해야한다. if (entry.isIntersecting) {} 2. intersectionRatio 는 화면에 몇 퍼센트가 보이는지 컨트롤 할 수 있다.

이미지 픽셀 변경 (보이는 픽셀의 2배로 설정하는 것이 좋다. ) 청크 파일의 구성을 상세히 보기 원한다면 webpack bundle analyzer (npm) cra-bundle-analyzer (cra 프로젝트에서 eject 없이 사용 가능) : https://www.npmjs.com/package/cra-bundle-analyzer cra-bundle-analyzerUse Webpack Bundle Analyzer on a create-react-app application without ejecting. Latest version: 0.1.1, last published: 3 years ago. Start using cra-bundle-analyzer in your project by runnin..

보호되어 있는 글입니다.

1. 불필요한 연산 줄이기1. 연산된 값을 props로 넘기기2. useMemo로 연산 최적화하기 2. 문자열이면 중괄호 쓰지 않는다.  3. Props에서 spread 연산자가 쓰이면, 관련있는 props, 관련없는 props, 나머지 props로 나눠보자! 4. 너무 많은 props를 넘기는 경우분리를 해보자. 5. props에 객체 전체를 내리지 말고, 꼭 필요한 값만 내리자. 6. React.Fragment의 shortcut: key 값을 위해서는 사용