<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
다음과 같은 상황이 있었다. A: 투명 div layer B: 버튼(button tag)을 감싸고 있는 div layer A가 B를 가리고 있는데, A가 투명이라 눈으로 보기에는 문제가 없음. 내 생각으로는 B의 z-index가 더 높기 때문에 클릭하는데 아무 문제가 없을 것이라고 생각했는데, 아무리 해도 클릭이 되지 않았다. B 에 position: relative 를 주었더니 해결됨!
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
/** * 인자로 받은 한글의 종성여부를 판단하여 적합한 조사를 리턴한다. */ const getKoreanAffix = (str: string, type: '은는' | '이가' | '과와') => { const lastChar = str.charCodeAt(str.length – 1); const hasLast = (lastChar – 0xac00) % 28; switch (type) { case '은는': return hasLast ? '은' : '는'; case '이가': return hasLast ? '이'… Read More »
샘플코드 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 »
react로 select box를 구현하던 중 작성한 코드 type SELECT_기본선택지 = '선택' | '전체'; type Props = { data: any[]; // select box를 구성할 리스트 데이터 labelKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 label로 사용하고 싶을 경우 기재 valueKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 value로 사용하고 싶을 경우 기재 style?: CSSProperties; } &… Read More »
환경 vite 2.9.15 원인: vite의 캐시(cache)가 문제였다. vite cache clear 방법 (둘 중 선택) node_modules/.vite 폴더 삭제 vite로 로컬 서버 실행하는 명령문에 –force 옵션 추가
yarn berry로 React.js 프로젝트 시작하기
1. 안되면 일단 yarn을 재설치 해 보자 npm un -g yarn npm i -g yarn 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 »
*.d.ts 파일에 type이 아닌 다른 것들을 기재해서 (e.g. 변수/상수 등..) 인식하지 못했던 것이었다. 해당 파일에는 오직 type만 존재해야 하는 듯 하다.
https://studiomeal.com/archives/166
이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자
공통 스크립트 /** * 특정 엘리먼트 '외부'를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더 */ 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 »
