react12 제어권을 넘겨 클라이언트 비동기 구현하는 법 (feat. yield) 최근 다른 사람이 설계한 코드를 수정하면서특정 로직 이전에 안내창을 띄우고, 확인 버튼의 클릭 여부에 따라 이후 로직을 진행하도록 코드를 수정해야 했습니다. 보통, 그리고 이전에 제가 프로젝트를 설계할 때에는 항상 Alert용 모달을 전역 context에서 제어하도록 프로젝트를 설계한 뒤,핸들러 함수 내에서 Alert 모달의 버튼에 이후 로직을 심었었습니다.아래처럼요.const onClickSubmit = () => { ... contextModal.open({ title: '정보를 저장하지 않고 이동할까요?', content:'내용', buttons: [ { text: '취소', isCancel: true, }, .. 2024. 11. 9. 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. Custom File Input 처리시 파일이 변경 되지 않는 에러 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.06.03 파일 업로드를 구현할 때 을 직접적으로 사용하면 CSS 변경에 제약이 커서따로 UI를 그린 후 input창을 따로 핸들링하는 형태로 많이 사용했습니다. 이렇게 코드를 짰을 때 동일한 파일을 업로드 할 떄 파일 상태가 변하지 않는 문제가 있습니다.예시 코드는 아래와 같습니다. const inputFileRef = useRef(null); const onClickUploadButton = useCallback(() => { inputFileRef.current?.click() }, []); const onChangeUploadFile = useCallback(( e: ChangeEvent ) => { .. 2024. 10. 1. 전역 로딩으로 Sekeleton UI도 처리하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.05.27 이전링크 에서 전역으로 처리하는 두가지 에러 처리 방식에 공유한 적이 있습니다.이 때는 skeleton UI 는 사용하지 않고 Spinner 로 처리해서 공통적으로 로딩을 처리할 수 있었는데요,이번 프로젝트에서는 skeleton UI 로 로딩 처리를 해야만 했습니다.그래서 결국 고민 끝에 이전 context를 활용한 공통 로딩 로직을 처리하면서도, skeleton UI 또한 적용한 방법이 있어 공유드리고, 고민되는 부분에 대해서 함께 의견주시면 좋을 것 같습니다 1. 이전에 전역 로딩을 적용 했을 때와 동일하게 context를 생성했습니다.GlobalLoadingProviderreturn ( {children.. 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. 이전 1 2 다음
