분류 전체보기 (204) 썸네일형 리스트형 [1D1C] 0130 기록 * 12시 넘어서 01/31 로 기록되었다 [1D1C] 0129 기록 [1D1C] Preface to 1D1C SNS 팔로우 하던 작가님이 2021년 11월부터 2024년 1월까지 약 2년 2개월의 시간을 끝으로 "매일의 작업"을 중단하기로 했다는 글을 올리셨다. 그동안 작가님이 매일의 작업을 했다는 것을 '이제 그만하겠다'는 게시글로 알게 되었다. 겪어보니, 세상에서 가장 어려운 일은 매일 하는 것인 것같다. 한살 한살 먹을 수록 새해의 감흥은 사라지고, 그와 동시에 새해의 목표도 사라졌다. 과연 얼마나 오랫동안 이 세상에서 가장 어려운 매일 하는 것을 할 수 있을지 모르겠지만, 별다른 다짐이나 감흥 없이 새해를 맞이하는 태도를 고쳐먹고, 뒤늦은 새해 목표를 잡아보려 한다. 벌써 1년을 질질 끌어온 사이드 프로젝트를 1일 1커밋을 목표로 착실히 실행할 것이다. 올해는 새해 카운트다운도 안하고 일찍 잠들었는데, .. [immer] Array for문 돌리면서 연속적인 setState 안되는 이슈 setState 업데이트는 async 작업이다 연속적으로 빠르게 도는 경우 모든 update를 보장할 수 없다 immer 의 produce 함수 안에서 필요한 내용을 만들어서 setState 한다→ Functional update form of the state setter Bad Case // 1. MLList 필터링 & 인덱스 찾기 const targetIdxList = checkedProductId.map((item) => { return productListData[productPackageIdx].MLList.findIndex((el) => el.productId === item); }); // 2. 인덱스 맵 돌려서 값 변경 targetIdxList.forEach((itemIdx) => { i.. [react-hook-form] 여러개 radio check input 에서 같은 name 으로 사용시 반영 안되는 케이스 react-hook-form : https://react-hook-form.com/docs/usecontroller/controller Controller Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com 리액트 부트스트랩과 함께 사용 : https://react-bootstrap.netlify.app/docs/forms/checks-radios Checks and radios | React Bootstrap Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten che.. [React Custom Hook] 수동으로 새로고침한 경우에만 특정 함수를 trigger 시키는 hook(url Params 삭제) (useDeleteUrlParamsWhenManualRefresh) 1. 수동으로 새로고침한 경우에만 특정 함수를 trigger 시키는 hook(url Params 삭제) 로컬스토리지와 beforeunload 이벤트 사용 input 삭제할 url parms key list 참조 How to detect refresh event in browser ReactJS Window: beforeunload event React | How to detect Page Refresh (F5) useDeleteUrlParamsWhenManualRefresh.ts 코드 // input 삭제할 url parms key list import { useEffect } from "react"; import { useSearchParams } from "react-router-dom"; expor.. [React Custom Hook] Form 의 required field 확인하는 hook (useFormValidation) 1. Form 의 required field 확인하는 hook input fromRef: 타겟 Form element formDataState : 관리되는 form 데이터 state submitFlag : 제출 버튼 눌렀는지 여부 output isFormValidated : validation 통과 되었는지 boolean useFormValidation.ts 코드 import { useEffect, useState } from "react"; // input : formRef, 제출할 formData, submitFlag // output : 통과 여부 export const useFormValidation = ({ formRef, formDataState, submitFlag }) => { const .. [React Custom Hook] Resize 될 때마다 현재 window 의 width가 breakpoint 보다 up 인지 down 인지 물어보는 hook (useResizeBreakpoints) 1. Resize 될 때마다 현재 window 의 width가 breakpoint 보다 up 인지 down 인지 물어보는 hook input : 없음 output breakpoints : up / down 메소드를 가지고 있는 객체 useResizeBreakpoints.ts 코드 import { useState, useEffect } from "react"; interface GridBreakpoints { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number; } interface Breakpoints { up: (bp: keyof GridBreakpoints) => boolean; down: (bp: keyof GridBrea.. [React Custom Hook] 타겟 element 가 viewport 안에 보이는지 판단하는 hook (useVisibilityObserver) 1. 타겟 element 가 viewport 안에 보이는지 판단하는 hook input element: 관찰하고자 하는 타겟 element React.ref rootMargin : 관찰 타겟 주위의 여백, new IntersectionObserver() 생성자에, option 으로 들어가는 값. 예시. "10px 20px 30px 40px" (위, 오른쪽, 아래, 왼쪽). 값은 백분율이 될 수 있습니다. 기본값은 0. 타겟 주변의 여백도 포함해서, 그 여백까지 타겟으로 보고, viewport 에서 사라졌는지 판단함. IntersectionObserver.option.rootMargin 더보기 output isVisible : 해당 타겟이 현재 viewport 안에 보이는지 여부 boolean. obser.. [React Custom Hook] async 로 Mock Data 제공하는 hook (useFakeFetch) 1. async 로 Mock Data 제공하는 hook input resolvedData: 제공할 mock data waitingTime : setTimeout 기다리는 시간, 몇 초 후 리턴 output { loading, setLoading, data, setData } : 로딩, 리턴받는 데이터 state useFakeFetch.ts 코드 import { useEffect, useState } from "react"; interface FakeFetchResult { loading: boolean; setLoading: React.Dispatch; data: T[]; setData: React.Dispatch; } const useFakeFetch = (resolvedData: T[], waitin.. 이전 1 2 3 4 5 6 7 ··· 21 다음
