3주차(chapter6, chapter7)

임지은/3주차/chapter6.md

@@ -0,0 +1,22 @@
+# 06.리액트 개발 도구로 디버깅하기
+## 6.3 리액트 개발 도구 활용하기
+### Components
+#### 컴포넌트 트리
+    컴포넌트 탭에서는 현재 리액트 애플리케이션의 컴포넌트 트리를 확인할 수 있다. 
+    가명함수로 선언된 컴포넌트 > 해당 컴포넌트명
+    익명함수로 선언된 컴포넌트 > Anonymous로
+
+컴포넌트 구조를 파악하려면 최대한 가명함수로 적는 것이 좋다. 
+
+만약 함수를 기명함수로 바꾸기 어렵다면 함수에 displayName 속성을 추가하는 방법도 있다.
+```javascript
+const MomoizedComponent = memo(function() {
+    return <>MemoizedComponent</>
+})
+
+MemoizedComponent.displayName = '메모 컴포넌트입니다.'
+```
+    displayName과 함수명은 개발 모드에서만 제한적으로 참고하는 것이 좋다.
+    왜냐, 빌드 도구가 사용하지 않는 코드로 인식해 삭제하거나 난수화한다.
+#### hooks
+    useEffect 와 같은 훅은 대부분 익명 함수를 인수로 넘겨주기 때문에, useEffect가 여러개 선언돼 있다면 어떤 훅인지 구별하기 어렵다. 이 경우 기명함수로 선언한다면 개발 도구를 더욱 유용하게 이용할 수 있다. 

임지은/3주차/chapter7.md

@@ -0,0 +1,14 @@
+# 07. 크롬 개발자 도구를 활용한 애플리케이션 분석
+## 메모리 탭
+- 메모리 탭에서는 현재 웹페이지가 차지하고 있는 메모리 관련 정보를 확인 가능
+- 애플리케이션에서 발생하는 메모리 누수, 속도 저하, 웹페이지 프리징 현상을 확인할 수 있는 유용한 도구
+
+![alt text](image.png)
+
+[종류]
+- 힙 스냅샷 : 현재 페이지의 메모리 상태
+    - 메모리 누수가 발생되는 부분이 예측이 될 때
+- 타임라인 할당 계측 : 시간의 흐름에 따라 메모리 변화 확인
+    - 메모리 변화를 일으킨 원인이 무엇인지 찾고 싶을 때
+- 할당 샘플링 : 시간의 흐름에 따라 발생하는 메무리 점유 확인, 자바스크립트 실행 스택별로 분석, 분석을 함수 단위로 한다
+    - 책의 예시에서는, 버튼 클릭 시 메모리 할당이 엄청나게 커짐을 확인할 수 있음