[react-query/useQuery] fetch를 분명히 했는데도 캐시(cache data)를 덮어쓰지(overwrite) 않았던 현상.
생각해 보면 좀 멍청한 이야기인데… -__-; ajax promise가 reject 되지는 않았는지 확인해 보자.
Category Archives: JavaScript
[react] html 엘리먼트 (real dom element) 에 리액트 컴포넌트 (react component) 삽입(insert)하기
환경 react ^18.2.0 import React, { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import TestExt from "./TestExt"; /** * TestExt 컴포넌트를 특정 DOM 노드에 선택적으로 삽입하기 위해 wrapping한 컴포넌트 */ const TestExtWrap = ({ isOpen }: { isOpen: boolean }) => { const wrap = document.getElementById("div-sample")!; return <>{isOpen && createPortal(<TestExt />,… Read More »
[react] react-device-detect 라이브러리의 단점
라사이즈(resize) 이벤트에 대응하지 못한다.
yarn dev로 서버를 띄워 브라우저로 테스트를 하는데, vite connected 상태에서 화면에 출력되지 않을 경우
환경 "vite": "2.9.15" "react": "^18.2.0" "typescript": "4.9.4" 현상 browser 콘솔(console) 에서는 ‘vite connected’ 상태 로딩중 동글뱅이 돌고 있음. browser network 탭을 보면 main.tsx 에서 대기(pending)중 해결 yarn build시 컴파일 오류가 나는 부분이 있었는데, 그 부분을 해결하니 다시 잘 됨.
[react] package.json 내의 라이브러리 버전 고정의 위험성
환경 vite 2.9.15 @mui/material ^5.10.5 @mui/material 의 버전업이 너무 빨라서 ‘되던 게 안되는 현상’ 이 발생하여 (minor version 변경임에도 props 구조가 변해 버림) 꺽쇠 ^를 사용하지 않고 버전 숫자만으로 지정하여 고정을 시도했으나, yarn build는 성공했는데 yarn dev 에서 알 수 없는 오류를 계속 뱉어내어 롤백을 했다.
[react/typescript] 하나의(single) html 엘리먼트(element)에 2개 이상의(multiple) ref 를 바인딩 하는 샘플 (useRef)
<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 »
react-hook-form 의 controller 를 사용하여 제어 컴포넌트 input text를 만들었는데, onchange 시점에 스크립트 오류(console warning, 에러는 아님)가 발생했던 경험 (a component is changing an uncontrolled input to be controlled…)
아래 코드와 같이 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
[링크] [javascript] 물결 연산자 (tilde, bitwise operator) 의 의미 (물결, 느낌표, indexOf…)
https://coolmsd.tistory.com/103 https://stackoverflow.com/questions/12299665/what-does-a-tilde-do-when-it-precedes-an-expression
[javascript/정규식(regex)] 특정 문자열에서 특정 패턴이 몇 회(몇 번)나 출현하는지 확인하기
/** * 특정 문자열에서 해당 패턴이 발생한 횟수를 리턴 */ 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
[react] children 으로 props 넘기는 방법 샘플코드 (pass props to children)
샘플코드 return ( <> {React.cloneElement(children, { prop1: 'AAA', prop2: 'BBB' })} </> ); 그냥 편리하게 개량해 본 것 return ( <> {React.cloneElement(props.children, { …_.omit(props, ['children']) })} </> ); children을 omit 하지 않아도 잘 작동하는데, 그냥 찝찝해서 넣어 봄
react router v6 에서 path variable parameter 처리 샘플 코드
route <Route path="invoices/:invoiceId" element={<Invoice />} /> page function Invoice() { const { invoiceId } = useParams(); const invoice = fetchBlaBla(`/api/invoices/${invoiceId}`); … }
[react] useEffect 의 deps 변경에 대해 debounce (throttle) 처리하는 샘플코드
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 에서 특정 라이브러리(dependencies)를 버전업 (yarn up [라이브러리명]…) 했는데, 신 버전이 적용되지 않고 계속 구버전으로 로딩되던 현상. 심지어 yarn remove를 했는데도 이전 버전이 작동하던 문제 해결
환경 vite 2.9.15 원인: vite의 캐시(cache)가 문제였다. vite cache clear 방법 (둘 중 선택) node_modules/.vite 폴더 삭제 vite로 로컬 서버 실행하는 명령문에 –force 옵션 추가
[링크] yarn berry 사용법 관련 링크
yarn berry로 React.js 프로젝트 시작하기
yarn 3.x (berry) 가 제대로 동작하지 않을 경우에 대한 체크리스트
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 »
react-multi-date-picker 커스텀 관련 메모
원본 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 »
yarn 버전 변경 (yarn set version 1.x, 3.x, berry …) 명령이 성공해도 실제 버전이 변경되지 않을 경우
어딘가에 숨어서 활약하고 있는 .yarnrc 파일을 제거하자!!
@toast-ui/react-grid (toast grid, tui grid, 토스트그리드) 사용시 data.some is not a function (data.map is not a function)… 등의 에러가 발생했던 경험.
문제상황 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 »
[링크] javascript 코드 실행속도(performance) 체크하기
https://studiomeal.com/archives/166
[React] 특정 엘리먼트 ‘외부’를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더 (when click outside of element trigger event) [메뉴, 자동완성 구현 등에 사용]
공통 스크립트 /** * 특정 엘리먼트 '외부'를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더 */ 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 »