😁왜 그렇게 생각했지? reactquery onerror deprecated https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose Breaking React Query's API on purpose Why good API design matters, even if it means breaking existing APIs in the face of resistance. tkdodo.eu 라고 하면 리액트쿼리를 다루는 블로그 중 가장 인지도가 높.(다고생각하는) tkdodo의 블로그에서 이 글을 읽었기 때문인 것 같다. 그런데 그때는 너무 스르륵 읽듯이 읽어서 본질을 파악하지 못했는데 결론적으로 말하면 useQuery의 onSucces, onSettled..
좀 더 어려운 페이지네이션 구현하기 https://xionwcfm.tistory.com/350 react-query에서 제공해주는 기본적인 페이지네이션 예제는 다음 링크에서 확인하실 수 있습니다. 이번에는 앞서 쌓은 선수지식을 기반으로 좀 더 그럴듯한 페이지네이션을 구현해봅시다. 앞선 포스트와 마찬가지로 코드 분리는 지양하면서 최대한 적은 파일만 보고도 구현가능하게 코드를 작성하겠습니다. QueryClient 및 Provider , Suspense 설정에 관련된 부분은 위 링크를 참고해주세요 이미 알고있다면 자신이 편한 세팅으로 변경해주시면 되겠습니다. 완성된 화면을 보고 시작해봅시다. prev button, next button은 다음 / 이전 페이지로 점프할 수 있으며 각 버튼을 클릭하면 해당하는 페..
pagenation이란? 페이지네이션은 일정한 갯수로 아이템을 보여주는 것을 의미할 수 있습니다. 페이지네이션을 위한 간단한 알고리즘이 존재하니 기억해두시면 좋습니다. 그렇게 어렵지는 않은데 버튼을 일정하게 유지시켜주기 위해서 필요한 알고리즘입니다. 예컨대 1부터 10까지의 페이지를 보여주는 위 그림과 같은 페이지버튼이 있다고 가정해보면 1 2 3 4 5 6 7 8 9 10 이 나열되어야 하고 11페이지로 넘어가게되면 11 12 13 14 15 16 17 18 19 20이 나열되어야 할 것입니다. 이를 위해서 사용되어야하는 알고리즘입니다. const [listSize, setListSize] = React.useState(20); const [activePage, setActivePage] = React..
forwardRef React가 제공하는 forwardRef는 ref를 prop으로 넘겨서 부모 컴포넌트에서 정의한 ref를 자식 컴포넌트에서 사용하게 해주는 함수입니다. 왜 사용해야하는지는 그냥 ref를 props로 넘겨서 사용해보면 알게됩니다. 잘 동작하지 않아요.. 그렇지만 forwardRef가 제공하는 기능이 필요한 상황은 꽤 자주 존재합니다. 가장 흔한 예를 들면 인풋의 스타일을 통일시켜서 사용하기 때문에 스타일이 정해진 input 컴포넌트를 만들어서 재사용하고 있는 상황에서 form내부의 input 관리를 위해 ref를 달아주고 싶다고 가정해보면 컴포넌트에 ref를 넘겨주고 싶은 마음이 생기게됩니다. 그것을 위해서 forwardRef를 사용할 수 있습니다. 이런식으로 import React, ..
zod는 타입스크립트를 우선하는 스키마 선언 / 검증 라이브러리입니다. 타입스크립트의 타입체킹을 보완해주는 역할을 수행한다고도 볼 수 있는데 쉽게 생각하면 폼,인풋에 필연적으로 따라오는 유효성검증 로직을 해결해주는 라이브러리입니다. 기본적인 개념과 사용방법은 아래 링크에서 참고해주시기 바랍니다. https://xionwcfm.tistory.com/346 zod 라이브러리 사용법 간단히 익히기 zod zod는 타입스크립트를 우선하는 스키마 선언 / 검증 라이브러리입니다. validation을 도와준다고도 생각할 수 있는데 문법은 간결하고 쉬우면서도 기능은 강력합니다. 공식 documentation에 따르면 xionwcfm.tistory.com 이번엔 위 링크에서 얻은 선수지식을 기반으로 사용할 수 있는 회..
zod zod는 타입스크립트를 우선하는 스키마 선언 / 검증 라이브러리입니다. validation을 도와준다고도 생각할 수 있는데 문법은 간결하고 쉬우면서도 기능은 강력합니다. 공식 documentation에 따르면 스키마라는 용어는 모든 데이터 유형을 광범위하게 지칭하기 위해 사용하고 있다고하며 목표는 중복 형식 선언을 제거하기 위함이라고 합니다. 제로 종속성 / 8kb의 번들사이즈라는 것이 흥미롭네요 달레님의 포스트를 보며 제 나름대로 정리한 내용임을 미리 밝힙니다. https://www.daleseo.com/zod-why-validation/ 타입스크립트를 쓰는데도 유효성 검증이 필요할까? Engineering Blog by Dale Seo www.daleseo.com zod가 필요한 이유는 타입스..
해본이유 next.js의 app dir을 이용하는 프로젝트에서 json파일을 통해 mock data로 fetching을 시도해보던 중 페칭 자체는 잘 되었지만 에러가 발생하는 것을 확인했습니다. 그러다가 msw를 통해서 한번 해볼까? 라는 생각이 들어서 시도해봤는데 https://github.com/mswjs/msw/discussions/1498 MSW intercept for fetch of next.js 13 app dir server component · mswjs/msw · Discussion #1498 Currently I'm trying to mock the api response for data fetching with react server component (next.js 13 app d..
😎마치 useEffect의 의존성배열과 비슷하다! 리액트 쿼리는 모든 리렌더링에 대해 queryFn을 트리거하지 않습니다. 기본적인 유효기간(0초)가 지나도 마찬가지로 queryFn을 트리거하지 않아요 왜 그럴까요? 리액트에서 리렌더링은 굉장히 많이 일어날 수 있습니다. 이런 리렌더링마다 비용이 비싼 fetch 요청을 보내는 것은 미친짓이라고도 할 수 있습니다. 그러니... 한번 받아왔다면 revaildate가 필요하기전까지는 fetch를 하지 않는게 맞겠네요! 그런데 쿼리는 여러개일 수 있어요 각각의 쿼리에 대한 아이디가 있어야 어떤 쿼리가 바뀌었는지 인식할 수 있을 것이고 특정한 쿼리가 바뀌면 화면도 바뀌어주어야하겠죠? 마치 useEffect가 의존성배열에 있는 요소에 변화가 생기면 트리거되는것처럼 ..
