개발자 도구로 React 애플리케이션 분석

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.)

모던 리액트 Deep Dive

 

크롬 개발자 도구란?

개발자 도구란 무엇일까?

 

개발자 도구
웹페이지에서 일어나는 거의 모든 일을 확인할 수 있는 강력한 개발 도구

 

도구 더보기 → 개발자 도구 를 눌러 확인하거나, 마우스 오른쪽 버튼 클릭 → 검사 를 눌러 개발자 도구를 볼 수 있다.

( Mac 단축키: cmd + option + i )

 

만약 웹사이트를 제대로 디버깅 하고 싶다면 시크릿 모드에서 하는 걸 추천한다. 왜냐하면 각종 확장 프로그램이 깔려 있지 않아 순수하게 웹페이지와 관련된 정보를 확인할 수 있기 때문이다.

 

요소 탭

크롬 개발자 도구의 첫 번째 탭은 바로 요소 탭이다. 여기서 현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있다.

왼쪽에는 현재 웹페이지의 HTML 트리, 오른쪽에는 왼쪽에서 선택한 요소와 관련된 정보가 나타난다.

 

요소 화면

원하는 태그를 클릭하면 브라우저 페이지에 해당 요소가 강조되고, 해당 태그와 관련된 정보를 확인할 수 있다.

 

이는 단순히 보는 것 뿐만 아니라 수정하고 싶은 요소를 수정하고, 수정된 내용이 어떻게 보이는지 미리 확인할 수 있다.

 

요소 정보

요소 탭 오른쪽에 해당 요소와 관련된 정보를 얻을 수 있다.

• 스타일: 요소와 관련된 스타일 정보
• 계산됨: padding, margin, border 와 각종 CSS 적용 결과값 
• 레이아웃: CSS 그리드 or 레이아웃 관련 정보
• 이벤트 리스너: 현재 요소에 부착된 각종 이벤트 리스너
• DOM 중단점: 중단점 설정 후 해당 요소가 변경될 때마다 변경사항 분석 및 디버깅
• 속성: 해당 요소가 가지고 있는 모든 속성값
• 접근성: 스크린 리더기 등이 활용하는 값

 

소스 탭

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

 

그리고 소스 탭에서 파일 열기를 실행하면원하는 파일을 찾아 실제 코드 내용까지 확인할 수 있다.

 

또한 중단점을 생성해, 자바스크립트 실행을 중단시키고 디버깅을 수행할 수 있는데 이는 코드에서 debbugger 를 선언하는 것과 거의 동일하다.

 

소스 탭 오른쪽에서는 다음 정보를 확인할 수 있다.

• 감시: 감시하고 싶은 변수를 선언하고 해당 변수 정보 확인
• 중단점: 현재 웹사이트에서 추가한 중단점 확인
• 범위: 현재 중단점에서의 스코프
• 호출 스택: 현재 중단점의 콜스택
• 전역 리스너: 전역 스코프에 추가된 리스너 목록
• XHR/가져오기, DOM, 이벤트 리스너, CSP 중단점: 소스 중단점 이외의 다양한 중단점

 

네트워크 탭

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

 

스크린샷 기능으로 활용해서 네트워크 요청 흐름에 따라 웹페이지가 어떻게 로딩되고 있는지 확인할 수 있다.

 

그래서 네트워크 탭을 통해 다음 내용을 확인해 봐야 한다.

• 불필요한 요청 또는 중복되는 요청이 없는지
• 웹페이지 구성에 필요한 리소스 크기가 너무 크지 않는지
• 리소스를 불러오는 속도는 적절한지 또는 너무 속도가 오래 걸리는 리소스는 없는지
• 리소스가 올바른 우선순위로 다운로드되어 페이지를 자연스럽게 만들어가는지

 

메모리 탭

메모리 탭은 애플리케이션에서 발생하는 메모리 누수, 속도 저하, 웹페이지 프리징 현상을 확인할 수 있는 유용한 도구이다.

 

프로파일 유형에는 3가지가 있다.

• 힙 스냅샷: 현재 메모리 상황 알고 싶을 때 사용
• 타임라인의 할당 계측: 시간의 흐름에 따라 메모리의 변화를 살펴보고 싶을 때 사용. 주로 로딩 or 상호작용 했을 때 메모리 변화 과정
• 할당 샘플링: 메모리 공간을 차지하고 있는 자바스크립트 함수 볼 수 있음

 

자바스크립트 VM 인스턴스 선택

현재 실행 중인 자바스크립트 VM 인스턴스를 확인할 수 있으며 디버깅하고 싶은 환경을 선택하면 된다.

힙 크기는 실제 해당 페이지가 자바스크립트 힙을 얼마나 점유하고 있는지 나타내며 자바스크립트 실행에 따라 실시간으로 바뀌기 때문에 불필요하게 늘어나지 않는지 눈여겨볼 필요가 있다.

 

힙 스냅샷

현재 페이지의 메모리 상태를 확인해 볼 수 있는 메모리 프로파일 도구이며, 이는 사진으로 촬영하듯 메모리 현황을 보여준다.

그래서 주로 두 개 이상의 스냅샷으로 차이를 비교해 어떤 변수가 메모리를 크게 차지하는 지 확인할 수 있게 된다.

 

타임라인 할당 계측

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

범위를 좁힐 수 있으며, 이를 통해 메모리 변화를 일으킨 변수가 무엇인지, 해당 편수가 어느 정도 차지하고 있는지 등을 확인할 수 있다.

 

할당 샘플링

시간의 흐름에 따라 발생하는 메모리 점유를 확인할 수 있다.

할당 샘플링은 타임라인 할당 계측과 비슷하지만, 자바스크립트 실행 스택별로 분석할 수 있고 분석을 함수 단위로 한다는 차이가 있다.

할당 샘플링은 메모리 누수가 짐작되지만 정확히 어디에서 발생하는지 확인하기 어렵거나 오랜 기간 메모리 누수가 의심되어 프로파일링을 장기간 수행해야 하는 경우에 사용하는 것이 좋다.

 

Next.js 환경 디버깅 하기

서버 사이드 렌더링 SSR 을 수행하는 환경에서 메모리 누수가 발생한다면 서버 자체에 부담이 되기 때문에 이를 방지하기 위해 디버깅을 해야 한다.

 

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

Next.js 프로젝트의 package.json 에서 dev 를 아래 코드처럼 수정하고 npm run dev 를 입력해 실행을 한다.

그러면 디버거에 연결될 준비가 끝났다.

 

그 다음 크롬 브라우저에서 chrome://inspect/ 로 이동하고 Open dedicated DevTools for Node 를 클릭한다. 그러면 새로운 창에서 개발자 도구가 나타나는 것을 확인할 수 있다.

 

Next.js 서버에 트래픽 유입시키기

사용자의 트래픽이 서버로 몰리는 상황을 오픈소스 도구인 ab(apache bench) 로 시뮬레이션 할 수 있다.

터미널에 한 번에 50개의 요청을 총 10,000 회 시도하는 명령어를 입력한다.

그러면 단순히 요청을 수행하는 것뿐만 아니라 요청으로부터 응답받는 데 걸린 시간, 바이트 크기 등 다양한 정보를 확인할 수 있다,

 

Next.js의 메모리 누수 지점 확인하기

누수 지점을 확인하기 위해 디버그 모드로 실행하고 메모리 탭에서 이를 확인하면 된다.