react query4 전역 로딩으로 Sekeleton UI도 처리하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.05.27 이전링크 에서 전역으로 처리하는 두가지 에러 처리 방식에 공유한 적이 있습니다.이 때는 skeleton UI 는 사용하지 않고 Spinner 로 처리해서 공통적으로 로딩을 처리할 수 있었는데요,이번 프로젝트에서는 skeleton UI 로 로딩 처리를 해야만 했습니다.그래서 결국 고민 끝에 이전 context를 활용한 공통 로딩 로직을 처리하면서도, skeleton UI 또한 적용한 방법이 있어 공유드리고, 고민되는 부분에 대해서 함께 의견주시면 좋을 것 같습니다 1. 이전에 전역 로딩을 적용 했을 때와 동일하게 context를 생성했습니다.GlobalLoadingProviderreturn ( {children.. 2024. 10. 1. React Query v5에서 에러처리하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.05.16이후 후속코드까지 포함되어 내용이 추가되었습니다. @24.06.25 React Query 4이전까지는 useQuery 내부에서 onError라는 Props를 제공했습니다.그러나 캐싱관련 문제를 해결하지 못하고, 결국 v5 이후로는 useQuery의 onError는 deprecated 되었습니다.자세한 사항은 아래 번역본 을 참고해주세요. 아무튼, onError는 없어졌지만 에러처리는 하지 않을 수 없기 떄문에 권장하는 qeuryCache를 이용한 방법으로 새로 에러처리를 적용했습니다.이렇게 한번 적용해 놓으니 기본 에러부터 커스텀 에러까지 더 좋은 DX를 보장받을 수 있었습니다. 0. 공통 에러 핸들링 함수 작성우선 v4부터 현.. 2024. 10. 1. 전역으로 로딩처리하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.02.20 개발을 진행할수록 로딩처리를 챙기게 되고, 또 관리 방법에 대해 고민이 많아집니다.여러 방법이 있지만 DX와 속도 향상을 위해 전역 로딩도 종종 쓰곤 했는데요,이전에 처리했던 두가지 방법을 소개합니다. 1. isMutating과 전역 로딩 컴포넌트로 처리하기import React from 'react';import { StyleSheet } from 'react-native';import { Box, Spinner } from 'native-base';import { QUERY_KEY } from '@constants/query-keys';import { useIsFetching, useIsMutating } from '@t.. 2024. 10. 1. Mock Mutate로 API 연동시 코드수정 줄이기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.10.11 이전에 한글코딩(링크넣자)으로 서버 API가 늦게 나왔을 때 퍼블리싱 단계에서 고민이 일부 해결되었지만, 또 다른 문제가 생겼습니다.저는 보통 퍼블리싱 단계에서도 API 통신 부분을 제외하고는 각 컴포넌트의 상태 설계와 로직을 대부분 구현해 놓습니다. 단순히 레이아웃과 스타일링만 하는 것 보다 시간은 더 걸리지만 이렇게 했을 때 API연결시 고려할 부분이 확 줄어들기도 하고,디자이너나 PM 분들께 미리 전달하여 기획 요구사항이 명확하게 구현되었는지도 미리 피드백을 받을 수 있습니다. 그러나 실제로 API를 붙여보니 예상보다 API 연결 시간이 훨씬 더 소요되었습니다.이유는 React Query 사용으로 인해 코드 구조가 대부분.. 2024. 10. 1. 이전 1 다음