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(오래됨) 등을 알려준다. => 마지막 업데이트 시간도 알려준다.  => 데이터 탐색기도 있어서 쿼리로 받은 데이터를 볼..

input 태그의 type='number' 의 특성을 잘 활용하는 방법=> valueAsNumber 를 사용한다.  기존 코드const inputAmount = Number.parseInt(elements.moneyInput.value); if (!inputAmount || inputAmount  valueAsNumber 사용 코드const inputAmount = elements.moneyInput.valueAsNumber; if (Number.isNaN(inputAmount) || inputAmount   장점- input 값을 숫자로 직접 가져와서 불필요한 형변환 과정이 없어진다.  주의- valueAsNumber은 숫자가 아닌 경우 NaN을 반환하기 때문에 유효성 검사시 아래처럼 사용해야한다...

얼마전 서울가족플라자에서 진행하는 '주니어 개발자'를 위한 세미나에 다녀온 후기와 내용을 정리하려고 합니다.    첫번째 세션의 주제는 '변화하는 업무환경에서 나의 역할을 만들어가는 법'을 탁다임 원티드 백엔드 개발자께서 발표해주셨고,두번째 세션은 '개발자로 롱런하는 방법: 문제점을 발굴할 수 있는 개발자'라는 주제로 김나영 뱅크샐러드 프론트엔드 개발자께서 발표해주셨습니다.    저녁 시간에 하는 세션이라서 샌드위치와 음료까지 준비해주셔서 든든하게 세미나를 들을 수 있었어요!   첫번째 세션을 한줄로 요약하자면,  나만의 경쟁력을 키우는게 중요한 요즘, 인원이 줄어들면서 개발자 1인이 커버해야하는 일의 폭이 넓어지고 있다. 나만의 엣지를 만드는걸로 살아남자!  나를 돋보이게 해야한다.    면접관은 문제..

개발자로서 알고리즘 공부는 놓을 수 없는 것임을 알고는 있지만 공부하는 것이 쉽지 않아서 고민을 하던 중이였는데 운 좋게 "그림으로 이해하는 알고리즘"이라는 책으로 공부할 수 있는 기회가 생겨 블로그로 정리합니다.  책 표지는 형광 노랑으로 되어 있어서 책상 옆에 두기만 해도 시선이 저절로 가서 공부할 수 밖에 없게 만든게 특징 같아요ㅎㅎ    책에는 알고리즘의 기본, 데이터 구조, 정렬, 배열 탐색, 그래프, 보안 알고리즘, 클러스터링, 데이터 압축, 그 외 알고리즘 순서로 정리되어있습니다. 코딩 테스트 및 업무 상 알아야할 알고리즘과 자료 구조는 여기서 다 공부 할 수 있을 것 같아요.  그리고 이 책의 특징이 '알고리즘 도감'이라는 어플리케이션을 책으로 만든거라 책과 어플을 함께 이용해서 공부하면 ..

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..