You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.7 KiB
Markdown
125 lines
3.7 KiB
Markdown
### 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 (<anonymous>:2:13168)
|
|
at r (<anonymous>:2:306599)
|
|
at Object.8048 (<anonymous>:2:9496)
|
|
at r (<anonymous>:2:306599)
|
|
at Object.8641 (<anonymous>:2:1379)
|
|
at r (<anonymous>:2:306599)
|
|
at <anonymous>:2:315627
|
|
at <anonymous>:2:324225
|
|
at <anonymous>: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"
|
|
}
|
|
```
|
|
### prettier 가 자동으로 고치는 코드 skip 하려면
|
|
-> material-ui Alert component의 severity 속성(error | warning | info | success)
|
|
-> "" double-quote 사용해야만 하는데
|
|
```js
|
|
// prettier-ignore
|
|
severity: "error"
|
|
```
|