2024-03-20.md

DIL: 모던 리액트 딥 다이브, 3주차-3

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

DIL-week3-3_2024-03-20

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------------------------------ | ----------- | | 3주차 | 6, 7장 | 리액트 개발도구 디버깅, 크롬 개발자 도구를 활용한 분석 | 438p~455p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 10시~11시

크롬 개발자 도구를 활용한 애플리케이션 분석

Source: breakpoints, call stack, global listeners, scope, watch
Network 체크
- 불필요한 요청, 중복 요청
- 리소스 크기
- 리소스 불러오는 속도
- 리소스 다운로드 우선 순위 (스크린샷)
Memory
- 메모리 누수, 속도 저하, 프리징
- Heap snapshot Allocation instrumentation on timeline
- Allocation sampling
JavaScript VM instance
- 디버깅하고 싶은 자바스크립트 VM 환경을 선택 (힙 크기/힙 점유)
  - 자바스크립트 실행에 따라 실시간으로 바뀜
  - 크기만큼 사용자의 브라우저에 부담
힙 스냅샷
- (촬영 기준)현재 페이지의 메모리 상태
- 스냅샷 간의 차이 비교 -> 메모리 사용량 차이, 어디서 반환/생성 되었냐, 어떤 값이냐(전역 변수 저장해서 실제값 확인)
얕은 크기 vs 유지된 크기
- 얕은 크기: 객체 자체가 보유하는 메모리 바이트 크기
- 유지된 크기: 객체 자체 뿐만 아니라, 부모가 존재하지 않는 모든 자식 객체 크기까지 더한 값
메모리 누수 찾기
- 얕은 크기는 작으나, 유지된 크기가 큰 객체를 찾는다 => 메모리 점유
  - 복잡한 참조 관계, 다수의 다른 객체 참조
  - 두 크기의 차이가 큰 객체 찾기

리소스 압축

brotli vs gzip
클라이언트 브라우저의 JavaScript에서 직접 Brotli나 Gzip으로 압축하거나 압축을 해제하는 것은 일반적인 사례가 아닙니다. 대신, 이러한 압축 기술은 주로 웹 서버 설정을 통해 자동으로 처리됩니다. 웹 서버는 클라이언트(브라우저)로부터 요청을 받았을 때, 자동으로 해당 리소스를 압축하여 전송하고, 클라이언트 브라우저는 받은 압축된 데이터를 자동으로 해제하여 사용합니다. 이 과정은 클라이언트와 서버 간의 통신을 최적화하기 위해 내부적으로 처리되며, 개발자는 서버 설정을 통해 이를 관리할 수 있습니다.