웹프로그래밍 (127) 썸네일형 리스트형 [React.js] unmounted component memory leak React.js 에서 비동기 요청 등의 동작 이후 응답/set state 가 되기 전에 해당 컴포넌트가 unmount 되면서 set state 오류가 나는 경우가 있다. 그럴때는 아래와 같이 해주면 된다. const mounted = useRef(false); useEffect(() => { mounted.current = true; () => { mounted.current = false; } }, []); const fetch = async () => { const res = await fetch(); if (!mounted.current) { return; } // now mounted. do something else }; [React] React Hook 에서 array state 업데이트시 리렌더링 되지 않을때 array state 의 index 개수 변동이 없을때에는 re-render가 일어나지 않는다. 이럴때에는 새로운 array 로 set state를 해주면 된다. const arr = [1, 2, 3]; setArray([...arr]); Error: No valid exports main found for node_modules\colorette 프로젝트 구성후 css import 시에 위와 같은 오류 발생시, 구글링을 해본 결과 nodejs 버전이 낮을 경우 발생을 한다. nodejs 를 업데이트 해준 후 서버를 재시작 해주면 정상 동작한다. windows 경우에는 nodejs 에서 installer 로 업데이트 해주면 된다. Update to : node version 14.6.* this should resolve it. https://nodejs.org/ko/download/package-manager/ 패키지 매니저로 Node.js 설치하기 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 출처: https://larac.. Node.js / Express.js - How to override/intercept res.render function? Old question, but found myself asking the same thing. How to intercept res render? Using express 4.0x something now. You can use/write middleware. The concept was a bit daunting to me at first, but after some reading it made a little more sense. And just for some context for anyone else reading this, the motivation for overriding res.render was to provide global view variables. I want session to.. cursor 의 종류 카테고리CSS 값예제설명일반링크와 상태선택드래그 앤 드롭크기 조절과 스크롤확대와 축소 auto 사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 text를 사용합니다. default 플랫폼에 따라 다른 기본 커서. 보통 화살표입니다. none 커서 없음. context-menu 콘텍스트 메뉴 사용 가능. help 도움말 사용 가능. pointer 링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다. progress 프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (wait과 반대) wait 프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (progress와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다. ce.. validate JSON (JSON 여부 검사) const isJson = (str: string) => { try { const json = JSON.parse(str); return json && typeof json === 'object'; } catch (e) { return false; } }; get only text by clipboard Copy & Paste 시에 텍스트만 가져오도록 처리 onpaste 이벤트에 걸면된다. const getTextByPasteClipboard = (e) => { e.preventDefault(); let text; const clp = (e.originalEvent || e).clipboardData; if (clp === undefined || clp === null) { // eslint-disable-next-line @typescript-eslint/ban-ts-ignore // @ts-ignore text = window.clipboardData.getData('text') || ''; if (text !== '') { text = text.replace(/]*>/g, ''); if (windo.. get Image width and height const getImageSize = (file: File, callback: (width: number, height: number) => void) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (e) => { const image = new Image(); image.src = e.target.result as string; image.onload = function () { // eslint-disable-next-line @typescript-eslint/ban-ts-ignore // @ts-ignore callback(this.width, this.height); }; }; } 이전 1 2 3 4 5 6 ··· 16 다음