next.js8 Next14에서 shallowRoute 사용하기 + usePagination 구현하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.09.19 next 14 app router를 사용한 이후 shallowRoute가 없어졌다는 것을 깨달았습니다.결국 공식문서 를 참고하여 새 hooks를 구현했습니다. useShallowSearchParmas.tsimport { useSearchParams } from "next/navigation";type MethodType = "push" | "replace";export const useShallowSearchParams = ( key: string, method: MethodType = "push") => { const searchParams = useSearchParams(); const paramsValue = se.. 2024. 10. 1. useCheckboxHandler로 체크박스 일관성있게 처리하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.08.08 여러 도메인을 막론하고 Checkbox UI는 자주 사용됩니다.저는 예전부터 CheckBox 상태를 관리할 때 성능 및 편의성을 위해 Map 자료구조를 이용하여 구현했습니다. 다만 React 환경에서는 이전 상태를 기록해야하는 특성상, Map자료구조를 set는 코드가 꽤 장황해지는 경향이 있습니다.이를 해결하고 모든 체크박스 UI에서 같은 방식으로 사용하기 위해 hooks를 새로 만들었습니다. 전체 코드는 깃허브에서 참고할 수 있습니다. 사용예시const MOCK_DATA_LIST = [ { id: 1, title: "Javascript", isChecked: true, }, { id: 2, t.. 2024. 10. 1. 전역 로딩으로 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. Utils 폴더 정리하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.12.14 코드 재사용성을 위해 공통 로직을 분리합니다. 이를 utils 폴더에 모아놓고 추후 사용하게 되는데,프로젝트 진행기간이 길어질수록 재사용을 위해 분리한 코드들이 어지럽게 나열되어 사용하기 더 어려울 때가 많았습니다. 그래서 이번엔 기존 보일러플레이트의 폴더 구조와는 다른 규칙을 적용하여 폴더를 정리해봤습니다.다른 분들의 의견이 궁금합니다. 0. 이전 구조의 유틸파일 살펴보기 보일러 플레이트에 적용되어있던 로직과 추가된 로직들이 어지럽게 섞여있어, 매우 복잡하게 느꼈습니다.그래서 이를 해소하기 위해 다음과 같은 순서로 진행되었습니다 1. 기존 로직과 분리하기기존 보일러플레이트에는 여러 유틸 함수들이 존재합니다.나름의 규칙을 갖.. 2024. 10. 1. 이전 1 2 다음
