자바스크립트 메모리, 네트워크, 소스, 실제 HTML 및 CSS등 리액트가 아닌 일반적인 웹 애플리케이션 환경의 디버깅을 수행하려면 리액트 개발 도구가 아닌 좀 더 범용적인 도구를 활용해야 한다.
7.1 크롬 개발자 도구란?
크롬에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있는 강력한 개발 도구다. 웹사이트를 제대로 디버깅 하고 싶다면 시크릿 모드 또는 프라이빗 모드라 불리는 개인정보 보호 모드에서 페이지와 개발자 도구를 여는 것을 권장한다.
확장 프로그램을 꺼두지 않고 디버깅한다면 불필요한 정보를 마주할 수 있다.
7.2 요소 탭
개발자 도구에서 첫번째로 노출되는 탭이다. 현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있다.
요소 화면
왼쪽 화면은 현재 웹페이를 구성하는 HTML을 나타내고, 오른쪽에서는 왼쪽에서 선택한 요소와 관련된 각종 정보가 나타난다.
요소화면에서는 직접 코드를 수정해서 웹페이지에서 어떻게 보이는지 빠르게 확인할 수 있다. 만약 배너와 같이 코드에 의해 클래스나 속성값이 동적으로 제어되는 DOM이 있다면 요소의 중단점을 사용해 디버깅할 수 있다. 디버깅하고 싶은 요소를 선택하고 마우스 오른쪽 버튼을 클릭한 후 중단위치를 선택하고 중단을 원하는 옵션을 클릭해보자.
중단위치를 설정해두면 중단과 관련된 작업이 일어날 때마다 브라우저가 렌더링을 중단하고 해당 요소 변경을 일으킨 소스코드를 보여준다.
요소 정보
스타일, 각종 CSS 적용 결과값, 레이아웃, 이벤트 리스너, DOM 중단점, 속성, 접근성 등의 정보를 확인할 수 있다.
7.3 소스 탭
웹 애플리케이션을 불러오기 위해 실행하거나 참조된 모든 파일을 확인할 수 있다.
소스 탭은 파일을 선택하기 전까지 특별히 살펴볼 것이 존재하지 않는다. 소스탭에서 유용한 것을 살펴보려면 디버깅하고 싶은 파일을 직접 열어야 한다.
소스 탭의 장점은 단순히 파일을 볼 수 있다는 데서 그치지 않는다. 앞서 요소 탭에서 DOM 중단점을 만들어 DOM이 변경되는 과정을 디버깅해 볼 수 있었던 과 마찬가지로 여기서도 소스 중단점을 생성해 자바스크립트 실행을 중단시키고 디버깅을 수행할 수 있다. 이는 코드에 debugger를 선언하는 것과 동일한 역할을 하지만, 소스코드를 오염시키지 않기 때문에 유용하다.
오른쪽에서 제공하는 정보는 다음과 같다.
- 감시 : 말그대로 감시하고 싶은 변수를 선언하고 해당 변수의 정보를 확인할 수 있다. 왼쪽에서 제공하는 변수 외에 디버깅 시점에서 특정 변수의 값을 알고 싶다면 이 감시를 활용하면 된다.
- 중단점 : 현재 웹사이트에서 추가한 중단점을 확인할 수 있다. 현재 열려 있는 파일 뿐만 아니라 웹페이지 전체에 걸쳐 소스 탭에서 추가한 모든 중단점을 확인할 수 있다.
- 범위 : 이름 그대로 현재 중단점에서의 스코프를 의미한다.
- 호출스택 : 현재 중단점의 콜스택을 확인할 수 있다. 이 메뉴를 활용하면 자바스크립트 코드가 실행되며 생성되는 실행 콘텍스트가 어떻게 저장되어 현재 어떤 모습을 하고 있는지 직접 볼 수 있다.
- 전역 리스너 : 현재 전역 스코프에 추가된 리스너 목록을 확인할 수 있다.
- XHR/가져오기, DOM, 이벤트 리스너, CSP 위반 중단점 : 소스의 중단점 이외에 다양한 중단점을 확인할 수 있다.
7.4 네트워크 탭
해당 웹페이지를 접속하는 순간부터 발생하는 모든 네트워크 관련 작동이 기록된다. HTTP 요청부터 웹 소켓에 이르기까지, 웹페이지가 외부 데이터와 통신하는 정보를 확인하고 싶다면 네트워크 탭을 참조하면 된다.
웹페이지는 최초에 HTML을 다운로드하고, HTML을 파싱하는 과정에서 만난 자바스크립트를 다운로드 한다. 개발자 모드로 실행됐기 때문에 웹 소켓을 통해 핫 리로딩되는 것까지 확인이 가능하다. 하단에는 페이지를 불러오는 기간 동안 발생한 총 요청 건수와 총 다운로드한 업로드 리소스의 크기를 확인할 수 도 있다.
스크린숏 캡쳐 기능을 활용하면 네트워크 요청 흐름에 따라 웹페이지가 어떻게 로딩되고 있는지 확인할 수 있다.
네트워크 탭에서 시간이 지남에 따라 배경이 없었던 화면에 이미지 다운로드가 완료되면서 배경이 완성되는 것을 볼 수 있다. 코드 내부에서 발생하는 fetch 요청 이외에도 외부 CDN에서 가져오는 이미지 리소스 요청 등도 확인 할 수 있기 때문에 사용자에게 먼저 노출되거나, 노출되는 영역이 큰 중요한 콘텐츠가 우선적으로 다운로드 되는지, 우선순위가 낮은 이미지가 나중에 다운로드되는지 등을 확인 할 수 있다.
네트워크 탭을 활용해 집중적으로 확인해야 하는 점은 다음과 같다.
- 불필요한 요청 또는 중복되는 요청이 없는지
- 웹페이지 구성에 필요한 리소스 크기가 너무 크지 않은지
- 리소스를 불러오는 속도는 적절한지 또는 너무 속도가 오래 걸리는 리소스는 없는지
- 리소스가 올바른 우선순위로 다운로드되어 페이지를 자연스럽게 만들어가는지
7.5 메모리 탭
현재 웹페이지가 차지하고 있는 메모리 관련 정보를 확인할 수 있다. 애플리케이션에서 발생하는 메모리 누수, 속도 저하, 웹페이지 프리징 현상을 확인할 수 있는 유용한 도구다.
메모리 탭을 열면 프로파일링 작업을 거쳐야 원하는 정보를 볼 수 있다. 프로파일 유형에는 3가지가 있는데 다음과 같은 특징이 있다.
- 힙 스낵샵 : 현재 메모리 상황을 사진 찍듯이 촬영할 수 있다.
- 타임라인의 할당 계측 : 현재 시점의 메모리 상황이 아닌, 시간의 흐름에 따라 메모리의 변화를 살펴보고 싶다면 타임라인의 할당 계측을 사용하면 된다.
- 할당 샘플링 : 메모리 공간을 차지하고 있는 자바스크립트 함수를 볼 수 있다.
자바스크립트 인스턴스 VM 선택
개발자가 디버깅하고 싶은 자바스크립트 VM 환경을 선택하면 된다.
힙 스냅샷
현재 페이지의 메모리 상태를 확인해 볼 수 있는 메모리 프로파일 도구다. 스냅샷 촬영을 제대로 활용하려면 하나의 스냅샷을 가지고 파악하는 것보다 스냅샷을 두개 이상을 촬영한 다음, 그 차이만 비교하는 것이 훨씬 수월하다.
두 스냅샨 간 의 비교와 정렬을 통해 어떠한 변수가 메모리를 크게 잡아먹고 있는지 확인할 수 있다. 그뿐만 아니라 메모리를 크게 차지하고 있는 것이 객체(배열)이라는 점, 그리고 이 액션이 handleClick이라는 함수를 통해 빚어졌다는 점도 파악할 수 있다.
타임라인 할당 계측
시간의 흐름에 따라 메모리 변화를 확인할 수 있는 기능이다. 시간의 흐름에 따라 메로리의 변화를 모두 기록하기 때문에 상대적으로 많은 부담이 발생한다.
버튼을 누를때마다 배열에 새로운 아이템이 생기며, 리액트는 이 배열을 모두 DOM에 그려야 한다. 따라서 리액트가 1:1 구조로 생성하는 FiberNode와 해당 배열을 담아야 하는 array가 엄청난 크기로 커진 것을 알 수 있다.
타임라인 할당 계측의 또 다른 장점은 기간을 좁혀 확인해 볼 수 있다는 것이다. 상단 그래프에서 검색을 원하는 범위로 좁히면 해당기간에 메모리에 할당된 내용만 골라서 볼 수 있다.
할당 샘플링
시간의 흐름에 따라 발생하는 메모리 점유를 확인할 수 있다는 점에서 할당 계측과 비슷하지만 자바스크립트 실행 스택별로 분석할 수 있고, 이 분석을 함수 단위로 한다는 차이점이 있다.
타임라인 할당 계측과 유사하지만 프로파일링할 때 브라우저에 주는 부담을 최소화할 수 있어 장시간에 걸쳐 디버깅을 수행해야 할 때 유리하다. 메모리 누수가 짐작되지만 정확히 어디에서 발생하는지 확인하기 어려워 힙 스낵샵을 촬영해 비교하기 어려운 경우, 오랜 기간 메모리 누수가 의심되어 프로파일링을 장기간 수행해야 하는 경우에는 할당 샘플링을 활용하는 것이 좋다.
7.6 Next.js 환경 디버깅하기
만약 서버 사이드 렌더링을 수행하는 자바스크립트 환경에서 메모리 누수가 발생한다면 어떻게 될까? 서버 자체에 부담이 발생할 것이고, 서버의 부담은 곧 모든 사용자가 서비스를 사용할 수 없는 심각한 상황을 초래하게 될 것이다.
Next.js 프로젝트를 디버그 모드로 실행하기
NODE_OPTIONS='--inspect' 이라는 인수와 함께 next dev를 실행하면 다음과 같이 디버거가 활성화되면서 디버그 모드가 켜진 것을 확인할 수 있다.
chrome://inspect으로 이동 후 Open dedicated DevTools for Node를 클릭하면 개발자 도구가 나타난다.
Next.js 서버에 트래픽 유입시키기
서버 사이드 렌더링과 같이 서버에서 제공되는 서비스의 경우 서버를 실행한 뒤 사용자가 서서히 유입되면서 메모리 누수가 발생하는 경우가 많다. 따라서 서버에 직접 트래픽을 발생시켜서 확인하는 편이 제일 확실한 방법이다.
아파치 재단에서 제공하는 웹서버 성능 검사 도구 ab를 활용하면 단순 요청을 수행하는 것뿐만 아니라 요청으로부터 응답받는 데 걸린 시간, 바이트 크기 등 다양한 정보를 확인할 수 있다.
Next.js의 메모리 누수 지점 확인하기
getServerSideProps가 있는 Next.js 페이지로서 getServerSideProps가 실행될 때마다 전역 변수로 선언된 access_user에 끊임없이 push를 수행한다.
getServerSideProps는 페이지 접근 요청이 있을 때마다 실행되는 함수이므로 최대한 부수효과가 없는 순수함수로 만들어야 한다. 만약 이함수 내부에서 외부 스코프의 변수에 의존하는 작업을 한다면 지금과 같은 메모리 누수 상황을 마주할 수 도 있을 것이다.
