[react query] 즉시 새로운 데이터를 가져오기
방법 1 queryClient.invalidateQueries({ queryKey }); await queryClient.refetchQueries({ queryKey }); // 데이터를 즉시 새로 가져옴 두 개의 함수를 호출해야 한다는 것, await 에도 주의하자. 방법 2 refetch(); // 데이터를 새로 가져오고 useQuery의 결과를 업데이트
Category Archives: JavaScript
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]"
[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 »
[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 »
[react/swiper] 첫 번째 슬라이드(swiper slide)에만 effect(e.g. fade)가 적용되지 않았던 문제
React 18의 strict mode 때문이었음
[react-hook-form] form.setError() 를 해도 formState.errors 에 바로 업데이트 되지 않는다. (다음번 호출 때 확인할 수 있음) – 해결 안됨…
왤까? 왜 그러는 것일까?
[react] 배열(array)로 된 상태(state)의 요소(element) 일부를 수정했는데, 상태변화가 감지(인지/인식)되지 않는 경우 (change not applied)
배열의 요소를 변경한 후, 배열의 사본을 set 해야 한다. array1 이라는 state라면 => […array1] 로 적용
[react-router-dom v6] 페이지 이동(route, navigate)시 보이지 않는 데이터(파라미터)를 담아서 이동하는 방법 (useLocation > state)
이동 전 페이지 const navigate = useNavigate(); const goErrorPage = (errMsg: ReactNode) => { navigate('/error', { state: { errMsg } }); }; // 이후 goErrorPage('블라블라') 호출 이동 후 페이지 const { state } = useLocation(); … return <> <h2>{state.errMsg}</h2> </>
CDN 사용시 axios (ajax) 캐싱으로 인해, 쿠키(cookie) 정보가 누락된 채 서버로 요청이 전달되던 현상
문제 상황 웹서버 대신 CDN을 사용하고 있음. 브라우저 캐시를 제거한 채로 ajax 요청을 할 경우 잘 동작함. 브라우저 캐시가 활성화된 상태로 ajax 요청을 할 경우, 마치 쿠키 데이터(e.g. access token)가 없는 것 같은 현상이 서버에서 일어남. 해결 axios 공통함수의 default headers에 아래 두 개의 항목을 추가해 주어 해결함. ‘cache-control’: ‘no-cache’, pragma: ‘no-cache’,
[react/펌글] 외부 자바스크립트 파일을 동적으로 로딩 하기 (loading external javascript file dynamically in react)
원문 출처 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/mui] 모달(modal) 호출시 스크롤바가 사라졌다가, 모달을 닫으면 다시 생기는 문제로 인해(jumping scrollbar) 화면이 흔들리는 이슈
환경 react 18 @mui/material: 5.11.2 @mui/base의 Modal 컴포넌트를 사용하여 모달 구현 개요 mui의 데모 페이지에서는 모달이 뜬다고 해서 이런 현상이 발생하지 않았다. 우리 사이트의 레이아웃 특성상 발생하는 문제인 것 같다. 헤더(GNB) 영역이 좌우로 왔다갔다 하는 것이 눈에 거슬림 해결 /** * jumping scrollbar issue 해결방안 * * 1) 모달이 뜨면 스크롤바가 사라지면서 header부가 우측으로 밀리고,… Read More »