기존에 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]"
해당 문서(jsp)의 html tag 구조에 깨진 부분이 있었다. (여는 태그, 닫는 태그의 정합성 문제) 태그의 아구를 서로 잘 맞춰주니 파일 전송이 잘 되었다. 시간 깨나 썼는데 말이지…ㅠㅠ…
커서 위치를 유지하는 것이 포인트 … 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 »
CSS : 요소 및 레이어 중앙정렬 방법
환경 "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] 로 적용
type 회원구분 = '정회원' | '준회원'; export const 숨길메뉴들: Record<회원구분, string[]> = { 정회원: [ '0001', ], 준회원: [], };
이동 전 페이지 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’,
