mui grid 내에서 비동기 작업이 필요할 경우 (e.g. axios)
renderCell 하위 부분을 custom component화 해서 useEffect나 useQuery를 사용하자.
Category Archives: Lang
react에서 lodash debounce의 적용시 팁
꼭 이벤트핸들러에 딱 붙여서 하지 않아도 된다. FC body에서 debounce를 씌운 함수에, useCallback을 씌우고 변수로 할당하면 된다. debounce의 모든 영역에서 useCallback을 씌우는 것이 핵심이다!!
react 에서 hook을 호출할 수 없는 상황일 경우
함수를 주입받는 것도 생각해 보자.
react에서 js로 children 을 재귀 탐색하는 것은 불가능 한 듯.
냉무
yup 으로 custom function 사용시 yup.matches() 말고 yup.test()를 사용하자.
matches()는 메시지의 type이 matches()로 고정되고, react-hook-form에서 errors 배열을 추출할 대 구조가 달라서 문제가 된다.
[react query] 즉시 새로운 데이터를 가져오기
방법 1 queryClient.invalidateQueries({ queryKey }); await queryClient.refetchQueries({ queryKey }); // 데이터를 즉시 새로 가져옴 두 개의 함수를 호출해야 한다는 것, await 에도 주의하자. 방법 2 refetch(); // 데이터를 새로 가져오고 useQuery의 결과를 업데이트 지금 새로운 데이터를 fetch 하지 않아도 되는데, 캐시는 확실히 지워야 할 경우 e.g.) edit modal 닫을 때 cache clear queryClient.removeQueries({ queryKey });… Read More »
react-hook-form의 FormProvider와 storybook을 함께 사용하는 preview 샘플코드
기존에 preview.ts를 사용하고 있었다면, preview.tsx 로 rename. preview.tsx import type { Preview } from "@storybook/react"; import React from "react"; import { FormProvider, useForm } from "react-hook-form"; import "../src/index.css"; /** * 각 컴포넌트에 react-hook-form 이 결합되어 있어서 * storybook 화면에서 에러를 방지하기 위해 global FormProvider wrapping을 수행. */ const formDecorator = (Story) => { const methods… Read More »
[링크] frontend UI 컴포넌트들을 모아놓은 사이트 (javascript input table grid…)
https://component.gallery/components/table/ https://open-ui.org/components/table.research/
[react-hook-form] useFormContext 장점
Context 라는 이름에서 유추할 수 있듯이, form이 다른 컴포넌트를 포함하고 있다면 해당 컴포넌트의 input까지 register를 내려서 묶을 수 있다.
[vite 4] vite에서 moment/locale이 정상 작동하지 않는 문제
import 구문을 dist 포함으로 변경해 주어야 한다. Replace import ‘moment/locale/ru’; with import ‘moment/dist/locale/ru’;
[react] NiceModal의 useModal() 은 toastGrid 와 충돌을 일으킨다 (냉무)
[javascript] javascript의 Set 은 JSON.stringify 로 직렬화 할 수 없다.
어우 몰랐네… 괜히 삽질… JSON.stringify 를 사용하려면 Set을 배열로 변환해야 한단다. let mySet = new Set([1, 2, 3]); let myArray = Array.from(mySet); let jsonString = JSON.stringify(myArray); console.log(jsonString); // 출력: "[1,2,3]"
form 으로 감싸져 있는 div에 jquery로 input file을 append 한 후 form.submit()을 했을 때, 아무리 해도 파일이 전송되지 않았던 사례
해당 문서(jsp)의 html tag 구조에 깨진 부분이 있었다. (여는 태그, 닫는 태그의 정합성 문제) 태그의 아구를 서로 잘 맞춰주니 파일 전송이 잘 되었다. 시간 깨나 썼는데 말이지…ㅠㅠ…
[react] input, textarea 등에서 영어 입력을 영대문자(uppercase)로 변환해 주는 샘플코드
커서 위치를 유지하는 것이 포인트 … onChange={(e) => { modifyUpperCase(e, forceUpperCase); }} … export const modifyUpperCase = (e: React.ChangeEvent<any>, forceUpperCase: boolean) => { if (forceUpperCase) { const et = e.target; const selectionStart = et.selectionStart; const selectionEnd = et.selectionEnd; et.value = et.value.toUpperCase(); // 조건에 따라 영대문자 변경 et.setSelectionRange(selectionStart, selectionEnd); // 커서 위치 유지를 위한 작업 }
yarn 실행시 exit code 129 일 경우 (npm은 137)
내 경우에는 OOME(out of memory) 가 원인이었음. 처음에 node.js 메모리만 늘렸더니 해결이 되지 않았다. – NODE_OPTIONS=”–max-old-space-size=8192″ – 머신의 메모리가 충분하지 않은 상태에서 파라미터만 조정을 해서 의미가 없었음. 머신의 ram도 같이 늘려 주었더니 문제가 해결되었음.
[javascript] 정규표현식 샘플 (정규식, regex)
export const REGEX_영문만 = /^[A-Za-z ]*$/; export const REGEX_영문_숫자 = /^[a-zA-Z0-9 ]*$/; export const REGEX_영문_특수문자 = /^[a-zA-Z \{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]*$/; export const REGEX_영문_숫자_특수문자 = /^[a-zA-Z0-9 \{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]*$/; export const REGEX_한글만 = /^[ㄱ-ㅎㅏ-ㅣ가-힣 ]*$/; export const REGEX_한글_숫자 = /^[ㄱ-ㅎㅏ-ㅣ가-힣0-9 ]*$/; export const REGEX_한글_특수문자 = /^[ㄱ-ㅎㅏ-ㅣ가-힣 \{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]*$/; export const REGEX_한글_숫자_특수문자 = /^[ㄱ-ㅎㅏ-ㅣ가-힣0-9 \{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]*$/; 비고 반복되는 부분을 상수화 하여 빼고 싶었으나,… Read More »
[react] 자식 컴포넌트를 강제 리렌더링 하는 방법 (child component, re-render, programmatically)
react component가 공통적으로 갖고 있는 key 속성을 활용한다. number state를 하나 만들어서 key 속성에 바인딩 state 가 change (예: +1) 될 때마다 re-render
[javascript] 특정 배열에서, 다른 배열에 속한 요소들을 제외시키기 (배열 각 요소 내의 특정 속성을 기준으로 유사성 판단, array, exclude, 차집합, minus)
// Sample arrays const array1 = [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' }, ]; const array2 = [ { id: 2, name: 'Banana' }, { id: 4, name: 'Grapes' }, ]; // Get differences based on the 'id' property const differences = array1.filter(item1… Read More »
[css] 수직(vertical) 가운데(중앙, middle, center) 정렬(align)하는 방법
CSS : 요소 및 레이어 중앙정렬 방법
[react-hook-form] form.watch vs useWatch (성능을 위해서는 useWatch 고려)
환경 "react-hook-form": "^7.34.0" 개요 form.watch 사용시, 모든 form 컴포넌트를 리렌더링하기 때문에, 성능에 영향을 미치는 경우가 있었음. useWatch는 re-rendering의 범위를 단위 컴포넌트 내로 제한하며, 필드명으로 범위를 또 제한할 수가 있었음. 샘플 코드 // fromDate, toDate 두 개의 props를 받는 datepicker에서의 작업예시 const watchVals = useWatch({ control: form.control, name: [fieldName, fieldName2 || 'dummy'] }); 위 샘플에서는 control,… Read More »