전체 글34 제어권을 넘겨 클라이언트 비동기 구현하는 법 (feat. yield) 최근 다른 사람이 설계한 코드를 수정하면서특정 로직 이전에 안내창을 띄우고, 확인 버튼의 클릭 여부에 따라 이후 로직을 진행하도록 코드를 수정해야 했습니다. 보통, 그리고 이전에 제가 프로젝트를 설계할 때에는 항상 Alert용 모달을 전역 context에서 제어하도록 프로젝트를 설계한 뒤,핸들러 함수 내에서 Alert 모달의 버튼에 이후 로직을 심었었습니다.아래처럼요.const onClickSubmit = () => { ... contextModal.open({ title: '정보를 저장하지 않고 이동할까요?', content:'내용', buttons: [ { text: '취소', isCancel: true, }, .. 2024. 11. 9. 간이 에디터 만들기 + 라이브러리 배포 React Highlight Editor 0. 만들게 된 계기이번 프로젝트를 진행하면서 특정 계산식을 만드는 UI가 필요했습니다. 예를들면 휘발유 사용량 / 시간(H) 을 계산하여 시간당 휘발유 사용량을 구하는 것 처럼요.최소한의 리소스로 구현하고자 여러 동료분들께 여쭤보기도 하고Tiptap 같은 에디터 라이브러리의 Mention 등 기능도 보긴 했지만 제가 원하는 요구사항을 모두 충족하지 못할 것 같았습니다.왜나면 적은 공식의 유효성 검사 및 가공 방식 자체가 명확하게 정의된 상황이 아니었거든요. 결국 최대한의 자유도를 보장하고자 실제로 에디터와 비슷한 무언가를 만들고자 결정했습니다.외부 라이브러리에서 지원하지 않는 기능 떄문에 중간에 갈아 엎는 것이 더 많은 리소스를 소요할 것이라 생각했고,에디터는 .. 2024. 10. 20. 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. 이전 1 2 3 4 ··· 6 다음
