diff --git "a/7\354\236\245/\354\235\264\354\203\201\354\241\260.md" "b/7\354\236\245/\354\235\264\354\203\201\354\241\260.md" new file mode 100644 index 0000000..da8318e --- /dev/null +++ "b/7\354\236\245/\354\235\264\354\203\201\354\241\260.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는 페이지 접근 요청이 있을 때마다 실행되는 함수이므로 최대한 부수 효과가 없는 순수 함수로 만들어야 한다.