방법 1 queryClient.invalidateQueries({ queryKey }); await queryClient.refetchQueries({ queryKey }); // 데이터를 즉시 새로 가져옴 두 개의 함수를 호출해야 한다는 것, await 에도 주의하자. 방법 2 refetch(); // 데이터를 새로 가져오고 useQuery의 결과를 업데이트 지금 새로운 데이터를 fetch 하지 않아도 되는데, 캐시는 확실히 지워야 할 경우 e.g.) edit modal 닫을 때 cache clear queryClient.removeQueries({ queryKey });… Read More »
기존에 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 »
https://component.gallery/components/table/ https://open-ui.org/components/table.research/
Context 라는 이름에서 유추할 수 있듯이, form이 다른 컴포넌트를 포함하고 있다면 해당 컴포넌트의 input까지 register를 내려서 묶을 수 있다.
import 구문을 dist 포함으로 변경해 주어야 한다. Replace import ‘moment/locale/ru’; with import ‘moment/dist/locale/ru’;
어우 몰랐네… 괜히 삽질… 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]"
커서 위치를 유지하는 것이 포인트 … 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); // 커서 위치 유지를 위한 작업 }
내 경우에는 OOME(out of memory) 가 원인이었음. 처음에 node.js 메모리만 늘렸더니 해결이 되지 않았다. – NODE_OPTIONS=”–max-old-space-size=8192″ – 머신의 메모리가 충분하지 않은 상태에서 파라미터만 조정을 해서 의미가 없었음. 머신의 ram도 같이 늘려 주었더니 문제가 해결되었음.
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 component가 공통적으로 갖고 있는 key 속성을 활용한다. number state를 하나 만들어서 key 속성에 바인딩 state 가 change (예: +1) 될 때마다 re-render
// 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 »
환경 "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 »
React 18의 strict mode 때문이었음
왤까? 왜 그러는 것일까?
배열의 요소를 변경한 후, 배열의 사본을 set 해야 한다. array1 이라는 state라면 => […array1] 로 적용
이동 전 페이지 const navigate = useNavigate(); const goErrorPage = (errMsg: ReactNode) => { navigate('/error', { state: { errMsg } }); }; // 이후 goErrorPage('블라블라') 호출 이동 후 페이지 const { state } = useLocation(); … return <> <h2>{state.errMsg}</h2> </>
문제 상황 웹서버 대신 CDN을 사용하고 있음. 브라우저 캐시를 제거한 채로 ajax 요청을 할 경우 잘 동작함. 브라우저 캐시가 활성화된 상태로 ajax 요청을 할 경우, 마치 쿠키 데이터(e.g. access token)가 없는 것 같은 현상이 서버에서 일어남. 해결 axios 공통함수의 default headers에 아래 두 개의 항목을 추가해 주어 해결함. ‘cache-control’: ‘no-cache’, pragma: ‘no-cache’,
원문 출처 https://betterprogramming.pub/loading-third-party-scripts-dynamically-in-reactjs-458c41a7013d script loader as a module const loadGMaps = (callback) => { const existingScript = document.getElementById('googleMaps'); if (!existingScript) { const script = document.createElement('script'); script.src = 'https://maps.googleapis.com/maps/api/js'; script.id = 'googleMaps'; document.body.appendChild(script); script.onload = () => { if (callback) callback(); }; } if (existingScript && callback) callback(); }; export default loadGMaps; 적용 import React, {… Read More »
환경 react 18 @mui/material: 5.11.2 @mui/base의 Modal 컴포넌트를 사용하여 모달 구현 개요 mui의 데모 페이지에서는 모달이 뜬다고 해서 이런 현상이 발생하지 않았다. 우리 사이트의 레이아웃 특성상 발생하는 문제인 것 같다. 헤더(GNB) 영역이 좌우로 왔다갔다 하는 것이 눈에 거슬림 해결 /** * jumping scrollbar issue 해결방안 * * 1) 모달이 뜨면 스크롤바가 사라지면서 header부가 우측으로 밀리고,… Read More »
