[정대윤] 7장: 크롬 개발자 도구를 활용한 애플리케이션 분석

7장/정대윤.md

@@ -0,0 +1,75 @@
+## 7장 크롬 개발자 도구를 활용한 애플리케이션 분석
+
+> 시크릿 모드로 여는 것을 추천
+> 각종 확장프로그램의 영향을 받지 않기 위함 ⇒ 그럼 react 디버그 툴은?..
+
+### 요소텝
+
+- 레이아웃: 그리드 flex등의 레이아웃 확인가능
+- 이벤트 리스너: 리액트 17이후는 변경사항인 이벤트 위임을 확인해볼 수 있다고함.
+  - 확인해보자
+
+### 소스텝
+
+- comand + shift + p : 되게 유용한 도구들이 많음
+- 중단점 설정 : comand + shift + p 또는 react-dev-tools로 해당 js에 중단점 설정하고 테스트해볼 수 있음.
+- 범위 : 해당 중단점의 스코프를 의미하며 클로저, 전역 스코프도 확인가능
+- 호출 스택 : 중단점의 콜스택을 확인가능
+  - timer 및 비동기에 대한 처리를 할 때 유용할듯
+
+### 네트워크 텝
+
+- 불필요한 요청을 찾자
+- 웹페이지 구성 리소스 크기를 확인하고 적절한 방법 적용
+  - gizip, 번들사이즈 최적화, 사진 크기 줄이기
+- 오래걸리는 리소스확인 및 리소스 우선순위확인
+
+### 메모리 텝
+
+디바이스가 발전하면서 메모리 용량에 대한 문제가 많이 없어지긴했지만 그만큼 js도 커졌다니 한번 프로덕트에 테스트라도 해보자
+
+1. js vm 인스턴스 선택
+
+   실행중인 js의 실시간 힙메모리 점유를 나타낸다.
+
+2. 힙 스냅샷
+
+   useMemo, useCallback을 썻을때 메모리가 어떻게 변화하는지 확인해보는것도 좋겠다.
+
+   재생성 되지 않음을 확인할 수 있다한다.
+
+> `얕은 크기`는 객체 자체의 크기를 의미하며 `유지된 크기`는 다른 객체를 참조하거나 클로저로 바라보고 있을때의 참조관계에 있는 모든 크기를 말한다.
+
+1. 할당 샘플링
+
+   특정 변화 버튼클릭의 effect를 확인하는 용도로 사용할때 좋다.
+
+   특정 메모리 누수지점이 간추려질때 사용하면 좋을듯
+
+### Next에서 메모리 디버그하기
+
+```jsx
+{
+	"dev": NODE_OPTIONS='--inspect' next dev
+}
+
+$> npm run dev
+
+browser > chrome://inspect 이동 > Open dedicated DevTools for Node true
+```
+
+트래픽 발생 시키기
+
+```jsx
+ad 도구 사용
+
+ad -k -c 50 -n 10000 "http://127.0.0.1:3000/"
+
+// 50개의 요청을 총 10,000회 시도한다.
+```
+
+이후 브라우저 메모리 탭 확인해보기
+
+이번에 rsc payload와 chunk들을 .next가 아닌 redis에 올려서 가져가서 사용할 수 있도록 변경을 진행했다.
+
+테스트를 적절하게 정량적으로 시간을 제외하고 파악해보고 싶었는데 확인하는데 도움이 될것 같음.