모던 리액트 deep dive 스터디 - 3주차 발표 정리

모던 리액트 deep dive 스터디 - 3주차 발표 정리 (7장)

 

 

* 본 글은 발표 대본용이라 상세한 정보는 들어가있지 않습니다.

 

 

 

크롬 개발자 도구

 

- 크롬에서 제공하는 개발자용 도구, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있다.

- 제대로 디버깅 하고 싶다면, 시크릿 모드에서 페이지와 개발자 도구를 여는 것을 권장. (브라우저의 각종 확장 프로그램 때문. ex. 웹 애플리케이션이 제공하지 않은 전역객체 같은 다른 정보가 추가될 수 있음)

 

 

 

요소탭

개발자 도구를 켰을때 가장 먼저 노출되는 탭

 

 

요소 화면

 

현재 웹 페이지를 구성하는 HTML을 나타냄.

 

보는 것 뿐만 아니라 수정도 가능하여 코드를 수정하게되면 화면에서 어떻게 보일지를 빠르게 확인할 수 있다.

 

또한, 코드의 중단 위치를 선택할 수 있어서 디버깅도 가능하다.

 

div 태그의 depth 정도, 스타일링 상속 등을 쉽게 확인할 수 있음

 

 

---

요소 정보

요소 탭 오른쪽에서 확인할 수 있는 정보

 

 

스타일: 요소와 관련된 스타일 정보. 클래스, 태그명, 아이디 등으로 설정된 스타일인지 확인 가능

 

계산됨: 해당 요소의 크기, 패딩, 보더, 마진과 각종 CSS 적용 결괏값을 알 수 있는 탭

 

레이아웃: CSS 그리드나 레이아웃과 관련된 정보

 

이벤트 리스너: 현재 요소에 부착된 각종 이벤트 리스너

 

DOM 중단점: 앞서 설명한 중단점이 있는지 알려주는 탭

 

속성: 해당 요소가 가지고 있는 모든 속성값 , .attributes와 비슷하지만 .attributes 직접 할당된 값만 나오고 속성 탭에는 모든 값이 나온다는 차이점이 있다.

 

접근성: 웹 이용에 어려움을 겪는 장애인, 노약자를 위한 스크린리더기

 

 

---

소스 탭

 

 

 

웹 애플리케이션을 불러오기 위해 실행하거나 참조된 모든 파일을 확인할 수 있다.

 

단순히 파일을 보는 것 뿐만 아니라, 소스 중단점을 생성하여 JS 실행을 중단시키고 디버깅을 수행할 수 있다.

 

버그가 의심 되는 지점을 디버깅하거나 실제로 소스코드상에서의 동작을 확인하고 싶을 때 유용하다.

 

 

 

 

감시: 추적하고 싶은 변수를 적어 현재 값이 무엇인지를 추적할 수 있음.

 

중단점: 현재 웹사이트에서 추가한 중단점을 확인할 수 있다.

 

범위: 현재 중단점에서의 스코프, 이 스코프에서 접근할 수 있는 값을 확인할 수 있다.

 

호출 스택: 현재 중단점의 콜스택을 확인할 수 있다.

 

전역 리스너: 현재 전역 스코프에 추가된 리스너 목록

 

XMR/가져오기, DOM, 이벤트 리스너, CSP 위반 중단점: 소스의 중단점 이외의 다양한 중단점을 알 수 있다.

 

 

 

---

 

네트워크 탭

 

 

 

(아마 개발하면서 가장 많이 이용하는 탭이지 않을까?)

 

해당 웹페이지를 접속하는 순간부터 발생하는 모든 네트워크 관련 작동이 기록된다.

 

웹페이지가 외부 데이터와 통신하는 정보를 확인할 수 있음 (HTTP 요청, 웹 소캣 등등)

 

 

API 호출을 제대로 하고 있는지, 의도한 횟수대로 호출을 하고 있는지 확인 가능

 

 

스크린숏 캡처 기능을 통해 네트워크 흐름에 따른 웹페이지가 어떻게 로딩되는지도 확인이 가능하다.

 

우선순위가 높은건 먼저 다운로드 되고 낮은건 그 이후에 다운로드 되는 동작들을 확인할 수 있다.

 

네트워크 탭을 통해 집중적으로 봐야할 것은 다음과 같다.

 

- 불필요한 요청 또는 중복되는 요청이 없는지

- 웹페이지 구성에 필요한 리소스 크기가 너무 크지 않은지

- 리소스를 불러오는 속도는 적절한지 또는 너무 속도가 오래 걸리는 리소스는 없는지

- 리소스가 올바른 우선순위로 다운로드되어 페이지를 자연스럽게 만들어가는지

 

 

---

 

메모리 탭

현재 웹페이지가 차지하고 있는 메모리 관련 정보를 확인할 수 있다.

 

메모리 누수, 속도 저하, 혹은 웹페이지 프리징 현상을 확인할 수 있는 유용한 도구이다.

 

 

 

힙 스냅샷 : 현재 시점의 메모리 상황을 사진 찍듯이 촬영할 수 있다.

 

타임라인의 할당 계측 : 시간의 흐름에 따라 메모리의 변화를 살펴보고 싶을때 사용. 주로, 로딩이 되는 과정의 메모리 변화 또는 페이지에서 어떠한 상호작용을 했을 때 메모리의 변화 과정을 알고 싶을 때 사용

 

할당 샘플링 : 메모리 공간을 차지하고 있는 자바스크립트 함수를 볼 수 있다.

 

 

 

위 3가지에 대해 알아보자.

 

 

힙 스냅샷

 

현재 페이지의 메모리 상태를 확인해 볼 수 있는 메모리 프로파일 도구

 

 

리액트 기반 애플리케이션이 기본적으로 차지하는 내용과 window 객체 등 브라우저가 차지하는 내용이 존재하여 많은 정보들이 나타나는 것을 확인할 수 있다.

 

 

 

 

얕은 크기 : 객체 자체가 보유하는 메모리 바이트의 크기

 

유지된 크기 : 해당 객체 자체뿐만 아니라 다른 부모가 존재하지 않는 모든 자식 객체들의 크기까지 더한 값

 

 

메모리 누수를 찾을 때는 얕은 크기(객체 자체의 크기)는 작으나 유지된 크기(객체가 참조하고 있는 모든 개체들의 크기)가 큰 객체를 찾아야 한다.

 

두 크기의 차이가 큰 객체는 다수의 다른 객체를 참조하고 있다는 뜻이다.

 

 

 

 

참고로, 스냅샷 한 개만 찍어서 비교하기보다 스냅샷 1, 2를 찍어 비교하는 것이 기초 정보들을 제외한 다른 정보들의 변화를 확인하기가 편할 것이다.

 

 

function handleFunction() {
	setState(function 기명함수(prev) {
    	return !prev
    })
}

 

 

기명함수를 사용하면 개발자 도구에서 보다 더 쉽게 확인할 수있음.

 

그렇지 않다면 익명함수는 단순 () 으로 표기되어 확인이 어려울 수 있다.

 

 

---

 

타임라인 할당 계측

 

 

시간의 흐름에 따라 메모리 변화를 확인할 수 있는 기능이다.

 

원하는 기간을 설정하여 확인할 수 있다는 장점이 있다.

 

 

---

 

할당 샘플링

 

 

시간의 흐름에 따라 발생하는 메모리 점유를 확인할 수 있을 뿐만 아니라, 자바스크립트 실행 스택별로 분석할 수 있고 이 분석을 함수 단위로 할 수 있다.

 

타임라인 할당 계측과 유사하지만 프로파일링할 때 브라우저에 주는 부담을 최소화할 수 있어 장시간에 걸쳐 디버깅을 수행해야 할 때 유리하다.

 

 

활용하기 좋은 예)

- 메모리 누수가 짐작되지만 위치를 확인하기 어려워 힙 스냅샷으로 비교하기 어려운 경우

- 오랜 기간 메모리 누수가 의심되어 프로파일링을 장기간 수행해야 하는 경우

 

 

 

---

 

Next.js 환경 디버깅하기

 

 

서버 사이드 렌더링을 수행하는 JS 환경에서 메모리 누수가 발생한다면?

 

=> 서버 자체에 큰 부담

=> 서비스 마비

 

그렇다면, 서버 환경을 디버깅 하려면 어떻게 해야할까?

 

 

Next.js 를 디버그 모드로 실행하기

 

 

"dev": NODE_OPTIONS='--inspect' next dev

 

 

위 코드로 Next.js를 실행하면 디버거가 활성화 된다.

 

 

이후 화면의 개발자 도구를 켜서 프로파일링을 똑같이 수행하여 디버깅을 수행하면 된다.