### core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js. ```shell core-js 버전 3.3 미만은 유지보수가 안되니 사용하지 말라 # yarn add core-js@^3 # yarn audit # yarn add yarn-audit-fix -D # npx yarn-audit-fix ``` ### yarn install 실패시 : --force vs --legacy-peer-deps ```text --force : 충돌 우회 --legacy-peer-deps : 충돌 무시 --force 시도 실패시 --legacy-peer-deps 실행 $ yarn install --force --network-timeout 6000000 ``` ### npm(yarn) install시 ECOCKETTIMEOUT 에러 ```shell npm(yarn) install --network-timeout 6000000 # 캐쉬 삭제 npm npm cache verify or npm cache clean --force yarn yarn cache clean --force ``` ### useEffect, useMemo, useCallback lifeCycle ```javascript // componentDidMount useEffect(() => { // 실행 할 로직 }, []); // componentDidUpdate const mounted = useRef(false); useEffect(() => { if(!mounted.current) mounted.current = true; // 실행 할 로직 }, [/*변경되는값*/]); // componentDidMount, componentDidUpdate 둘다 useEffect(() => { // 실행 할 로직 }, [/*변경되는값*/]); ``` ### useMemo(callback, [변경되는값]); ```text - 두번째 배열이 바뀌기전까지 값을 기억 - 함수 컴포넌트는 매번 함수가 새로 그려지며 실행 --> 한번만 실행되면 되는 함수도 계속 호출되는 문제 발생 - 변경되는 값이 없다면 한번만 실행후 값을 보관하는 역할로 사용 ``` ### useCallback(callback, [변경되는값]); ```text - 두번째 배열이 바뀌기전까지 함수 자체를 기억 - 함수 생성 자체가 오래걸리는 경우(=함수 내의 연산이 복잡한 경우)쓰면 최적화에 도움됨 - 변경되는 값이 없다면 state 값을 맨처음 값만 기억(console로 확인) --> 변경되는 값이 있을때 새로운 값을 기억 - 자식컴포넌트에 함수를 props로 내릴때 반드시 useCallback 사용 --> 자식 리렌더링 방지 ``` ### useMemo()와 useCallback() 차이점 ```text - useMemo : '함수 return 값'을 기억 - useCallback : '함수 reference'를 기억 ``` ### useRef()와 useMemo() 차이점 ```text useRef : 클래스로 치면 멤버변수 혹은 dom객체 처럼 특정한 '값'만 기억해야 할 때 useMemo : 복잡한 함수의 'retur값'을 기억해야 할 때 ``` ### typeof : primitive type string return vs instanceof ```js 'undefined' | 'boolean' | 'number' | 'string' | 'object' | 'function' typeof 변수명 typeof 변수명 === 'object' 변수명 instanceof 클래스 ``` ### process is not defined 에러 해결 ==> 원인 : react-scripts v4.x version 호환성 문제(v5 지원) ```text Uncaught ReferenceError: process is not defined at Object.4043 (:2:13168) at r (:2:306599) at Object.8048 (:2:9496) at r (:2:306599) at Object.8641 (:2:1379) at r (:2:306599) at :2:315627 at :2:324225 at :2:324229 at HTMLIFrameElement.e.onload (index.js:1:1) ``` ```text npm i -D react-error-overlay@6.0.9 "resolutions": { "//": "See https://github.com/facebook/create-react-app/issues/11773", "react-error-overlay": "6.0.9" } ```