<input … ref={(el) => { refA(el); // (1) react-hook-form > controller가 주는 ref (refB as MutableRefObject<HTMLInputElement | null>).current = el; // (2) imask의 useIMask가 주는 ref }} … /> 참고 처음 찾아본 문서에는 (1)의 방식만 소개되어 있어서 일괄 적용해 봤더니 refA는 정상 적용되고, refB는 ‘함수가 아닙니다’ 류의 오류가 발생. 좀 더 찾아보니 위에 기록한 (2)… Read More »
아래 코드와 같이 controller render props의 value를 그대로 사용하지 않고, value ||” 로 처리하여 해결함. <Controller … render={({ field: { onChange, value }}) => { return ( <input type='text' value={value || ''} // 이 부분 … /> }} /> 참고 https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro
https://coolmsd.tistory.com/103 https://stackoverflow.com/questions/12299665/what-does-a-tilde-do-when-it-precedes-an-expression
/** * 특정 문자열에서 해당 패턴이 발생한 횟수를 리턴 */ export const countPattern = (str: string, pattern: RegExp) => { return ((str || '').match(pattern) || []).length; }; // 점이 몇 개나 존재하는지 확인 const cnt = countPattern('aaa.bbb.ccc', /\./g); 출처 https://stackoverflow.com/questions/1072765/count-number-of-matches-of-a-regex-in-javascript
샘플코드 return ( <> {React.cloneElement(children, { prop1: 'AAA', prop2: 'BBB' })} </> ); 그냥 편리하게 개량해 본 것 return ( <> {React.cloneElement(props.children, { …_.omit(props, ['children']) })} </> ); children을 omit 하지 않아도 잘 작동하는데, 그냥 찝찝해서 넣어 봄
route <Route path="invoices/:invoiceId" element={<Invoice />} /> page function Invoice() { const { invoiceId } = useParams(); const invoice = fetchBlaBla(`/api/invoices/${invoiceId}`); … }
import { dc, isNotBlank } from '@/utils/common'; import _ from 'lodash'; import React, { useEffect, useRef, useState } from 'react'; /** * textarea 의 내용이 변할 때 debounce를 걸고 convert 함수를 실행한다. */ const TsxConverter = () => { const [contents, setContents] = useState<string>(''); const debounced = useRef(_.debounce((newVal) => convert(newVal), 1000)); useEffect(() => { if… Read More »
환경 vite 2.9.15 원인: vite의 캐시(cache)가 문제였다. vite cache clear 방법 (둘 중 선택) node_modules/.vite 폴더 삭제 vite로 로컬 서버 실행하는 명령문에 –force 옵션 추가
yarn berry로 React.js 프로젝트 시작하기
1. 안되면 일단 yarn을 재설치 해 보자 npm un yarn –location=global npm i yarn –location=global 2. 그래도 안되면 어딘가에 있을지도 모르는 .yarnrc 파일을 찾아서 삭제해 주자. 3. 프로젝트 루트의 yarn 관련 모든 것을 일단 삭제 해 보자. .yarn 폴더, node_modules 폴더, pnp.* 파일, .yarnrc.yml … yarn.lock 파일은 삭제하지 말고 내용만 clear 한다. 4. yarn -v… Read More »
원본 repo https://github.com/shahabyazdi/react-multi-date-picker fork 및 npm 배포환경 설정 참고 fork한 프로젝트 로컬에서 최초 실행 @itpsolver/react-multi-date-picker 프로젝트 루트에서 npm i npm build 위 폴더에서 ‘cd website’ 로 웹사이트 폴더 진입 npm i -g gatsby-cli npm i npm run start 브라우저 http://localhost:8000 진입 소스코드 내 모듈명 replace 본 프로젝트 내에 포함된 website 폴더처럼 해당 라이브러리를 esm import… Read More »
어딘가에 숨어서 활약하고 있는 .yarnrc 파일을 제거하자!!
문제상황 toast grid 의 특정 셀을 클릭하여 modal을 띄우는 과정에서 아래와 같은 스크립트 에러 발생 react-dom.development.js:26923 Uncaught TypeError: data.some is not a function at Object.createData (item.js:267:4) at Object.resetData (dropdown.js:314:7) at Grid2.dispatch (utils.js:69:8) at Grid2.resetData (utils.js:69:8) at toastui-react-grid.js:1:4602 at Array.forEach (<anonymous>) at c2.value (toastui-react-grid.js:1:4525) at checkShouldComponentUpdate (react-dom.development.js:14134:33) at updateClassInstance (react-dom.development.js:14698:62) at updateClassComponent (react-dom.development.js:19695:20) 오류메시지의 data가 Grid… Read More »
https://studiomeal.com/archives/166
공통 스크립트 /** * 특정 엘리먼트 '외부'를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더 */ export const useBindClickOutside = (ref: React.RefObject<HTMLElement>, onClickOutside: (e: React.MouseEvent) => void) => { useEffect(() => { // Invoke Function onClick outside of element const handleClickOutside = (e: any) => { if (ref.current && !ref.current.contains(e.target)) { onClickOutside(e); } }; document.addEventListener('mousedown',… Read More »
<div style={{ backgroundImage: `url("http://blabla/bg.png")`, backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', }} ></div>
환경 React 18.2.0 Typescript 4.6.3 eslint 8.16.0 common.ts /** * onKeyDown 이벤트핸들러에서 엔터키로 함수 실행하기 */ export const onKeyDownCall = (e: React.KeyboardEvent, func: (ev: React.SyntheticEvent) => void) => { // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); func(e); } }; test.tsx //… Read More »
스토리북으로 인터랙션 테스트하기 (20220111) React UI 상태를 URL에 저장해야 하는 방법과 이유 (20211214) 우선순위 힌트로 리소스 로딩 최적화하기 (2021117) CORS에서 이기는 방법 (20211110) 2021년에 살펴볼 법한 브라우저 개발자 도구의 유용한 스타일 관련 기능 (20211027) 당신이 모르는 자바스크립트(javascript)의 메모리 누수의 비밀 (20210611) 출처가 다른 윈도우 간에는 데이터를 어떻게 통신할까 (cross origin) (20220831)?
방법 중괄호(curly braces)로 감싸주고 javascript string 으로 표현. 예시 return (<p>{"I've seen the movie."}</p>) 참고 https://stackoverflow.com/questions/32979512/react-jsx-how-to-render-text-with-a-single-quote-example-pive-p
리액트 라우터 – 중첩된 라우트 Passing props to when nestining routes in React Router v6?
