readme 반영

README.md

@@ -1,12 +1,74 @@
-# Introduction
+### 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
 
-This is material design template created based on materially structure
 
-# Getting Started
+# yarn audit  
 
-1. Installation process
+# yarn add yarn-audit-fix -D
-   - run 'npm install / yarn'
+# npx yarn-audit-fix
-   - start dev server run 'npm run start / yarn start'
+```
-2. Deployment process
+
-   - Goto full-version directory and open package.json. Update homepage URL to the production URL
+### npm(yarn) install시 ECOCKETTIMEOUT 에러
-   - Goto full-version directory and run 'npm run build / yarn build'
+```shell
+npm(yarn) install --network-timeout 6000000
+
+# 캐쉬 삭제
+npm
+npm cache verify or npm cache clean --force
+
+yarn
+yarn cache clean
+```
+
+### 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값'을 기억해야 할 때
+```