diff --git "a/7\354\236\245/\354\240\225\353\214\200\354\234\244.md" "b/7\354\236\245/\354\240\225\353\214\200\354\234\244.md" new file mode 100644 index 0000000..62887ea --- /dev/null +++ "b/7\354\236\245/\354\240\225\353\214\200\354\234\244.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에 올려서 가져가서 사용할 수 있도록 변경을 진행했다. + +테스트를 적절하게 정량적으로 시간을 제외하고 파악해보고 싶었는데 확인하는데 도움이 될것 같음.