7장 고고싱 (#61)

7장/이상조.md

@@ -0,0 +1,87 @@
+# 크롬 개발자 도구
+
+- 리액트 바깥에서 벌어지는 버그는 어떻게 할 것인가?
+- 브라우저에서 실행되는 애플리케이션 레벨의 디버깅을 수행하기 위한 도구로 브라우저 개발자 도구가 있다.
+
+## 크롬 개발자 도구란
+
+- 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있는 강력한 개발 도구.
+- 확장 프로그램으로 인해 간섭이 생길 수 있으니 시크릿모드에서 실행하면 좋다.
+
+## element 탭
+
+### 요소 화면
+
+- 단순히 현재 html을 보는 것뿐만 아니라 직접 코드를 수정해서 웹페이지에서 어떻게 보이는지 빠르게 확인할 수 있다.
+- 디버깅하려는 요소를 우클릭하여 중단 위치를 선택 후 원하는 옵션을 선택하면 해당 옵션 조건에 맞는 작업이 일어날 때마다 브라우저가 렌더링을 중단하고 해당 요소 변경을 일으킨 소스코드를 보여준다.
+
+### 요소 정보
+
+- 요소 탭 오른쪽에는 스타일에 관련된 내용이 많다.
+- 이벤트 리스너도 확인할 수 있음. 다만 이벤트 버블링 등으로 발생시키는 경우에는 확인할 수 없다.
+
+## source 탭
+
+- 웹 애플리케이션을 불러오기 위해 실행하거나 참조된 모든 파일을 확인할 수 있다.
+- 프로덕션의 코드는 대부분 압축되어 있어 알아보기 어렵다.
+- 번들러에서 sourceMap을 켜두면... 보일지도?
+- element탭과 마찬가지로 소스 중단점을 생성해 자바스크립트 실행을 중단시키고 디버깅을 수행할 수 있다.
+  - 감시 : 우측의 감시에 변수를 선언해둔다면 디버깅 시점에서 변수의 값을 알려준다.
+  - 중단점 : 웹페이지 전체에 걸쳐 소스탭에서 추가한 모든 중단점을 확인할 수 있다.
+  - 범위 : 현재 중단점에서의 스코프를 의미한다.
+  - 호출 스택 : 현재 중단점의 콜스택을 확인할 수 있다.
+  - 전역 리스너 : 현재 전역 스코프에 추가된 리스너 목록을 확인할 수 있다.
+
+## network 탭
+
+- 해당 웹페이지를 접속하는 순간부터 발생하는 모든 네트워크 관련 작동이 기록된다.
+- 무엇을 집중적으로 봐야하나?
+  - 불필요한 요청 또는 중복되는 요청이 없는지
+  - 웹페이지 구성에 필요한 리소스 크기가 너무 크지 않은지
+  - 리소스를 불러오는 속도는 적절한지 또는 너무 속도가 오래 걸리는 리소스는 없는지
+  - 리소스가 올바른 우선순위로 다운로드되어 페이지를 자연스럽게 만들어가는지
+
+## memory 탭
+
+- 현재 웹페이지가 차지하고 있는 메모리 관련 정보를 확인할 수 있다.
+- 메모리 누수, 속도 저하, 웹페이지 프리징 현상을 확인할 수 있다.
+- 프로파일링 작업을 거쳐야 원하는 정보를 확인할 수 있다.
+  - 힙 스냅샷 : 현재 메모리 상황을 사진 찍듯이 촬영할 수 있다.
+  - 타임라인의 할당 계측 : 시간의 흐름에 따라 메모리의 변화를 살펴보고 싶을때 사용한다.
+  - 할당 샘플링 : 메모리 공간을 차지하고 있는 자바스크립트 함수를 볼 수 있다.
+
+### 힙 스냅샷
+
+- 두 번의 스냅샷을 찍은 후에, 스냅샷1에서 스냅샷2 사이에 할당된 객체를 클릭해 얕은 크기 항목을 기준으로 내림차순 정렬하면 두 스냅샷 사이에서 어떤 작업이 메모리를 많이 잡아먹었는지 확인할 수 있다.
+  - 얕은 크기와 유지된 크기
+    - 얕은 크기란 객체 자체가 보유하는 메모리 바이트의 크기, 유지된 크기란 해당 객체 자체뿐만 아니라 다른 부모가 존재하지 않는 모든 자식 객체들의 크기까지 더한 값이다.
+    - 그니까 객체가 직접 참조하는 자식까지만 해당하는게 얕은 크기고, 자식의 자손들까지 합친게 유지된 크기라는 말인듯.
+    - 메모리 누수를 찾을때 얕은 크기는 작으나 유지된 크기는 큰 객체를 찾는다고 함.
+    - 유지된 크기가 크다는 것은 메모리에서 해제되면 많은 리소스를 확보할 수 있기 때문일까? 해당 객체가 GC에 의해 메모리에서 해제되지 않으면 많은 객체들이 메모리에 계속 남아있다는 뜻이니까...?
+
+### 타임라인 할당 계측
+
+- 시간에 따라 메모리의 변화를 관측한다.
+
+### 할당 샘플링
+
+- 시간의 흐름에 따라 메모리의 점유를 확인할 수 있는데, 이를 자바스크립트 실행 스택별로 분석할 수 있고, 이 분석을 함수 단위로 한다.
+- 메모리 누수가 짐작되지만 정확히 어디에서 발생하는지 확인하기 어려워 힙 스냅샷을 촬영해 비교하기 어려운 경우, 오랜 기간 메모리 누수가 의심되어 프로파일링을 장기간 수행해야 하는 경우
+
+## Next.js 환경 디버깅하기
+
+- 클라이언트 자바스크립트 환경은 사용자의 기기 성능과 스펙에 따라 같은 메모리 누수라도 다른 결과를 가져올 수 있다.
+- 그러나 서버사이드 렌더링의 자바스크립트 환경에서 메모리 누수가 발생한다면 서버 자체에 부담이 발생할 것이고, 곧 모든 사용자가 서비스를 사용할 수 없는 심각한 상황을 초래할 것이다.
+
+### Next.js를 디버그 모드로 실행하기
+
+- `NODE_OPTIONS='--inspect' next dev`로 프로젝트 실행 > 브라우저에서 `chrome://inspect`로 진입
+
+### 트래픽 유입시키기
+
+- 터미널에서 `ab -k -c 50 -n 10000 "http://${ip주소}:3000/`를 실행하면 한 번에 50개의 요청을 총 10000회 시도한다.
+
+### 메모리 누수 지점 확인하기
+
+- getServerSideProps가 실행되는 것을 확인하여 메모리 누수를 점검할 수 있음.
+- getServerSideProps는 페이지 접근 요청이 있을 때마다 실행되는 함수이므로 최대한 부수 효과가 없는 순수 함수로 만들어야 한다.