이 Codelab에서는 다소 복잡한 샘플 애플리케이션의 모든 네트워크 트래픽을 해석하는 프로세스를 안내합니다. 연습이 끝나면 자체 웹 애플리케이션에서 로드하는 항목과 각 요청을 실행하는 시점을 파악하는 데 필요한 기술을 갖게 됩니다.
네트워크 패널로 이동합니다.
네트워크 패널로 이동하여 데모 애플리케이션의 네트워크 트래픽을 확인합니다.
사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면
을 누릅니다.`Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
네트워크 탭을 클릭합니다.
페이지를 새로고침하여 네트워크 트래픽을 확인합니다.
네트워크 패널에는 초기 탐색으로 인해 로드된 모든 애셋이 표시됩니다.
항목 해석 방법
기록된 네트워크 트래픽의 각 행은 단일 요청 및 응답 쌍을 나타냅니다.
유형이 document인 첫 번째 행은 웹 앱의 HTML에 대한 초기 탐색 요청입니다. 폭포식 구조의 소스입니다. 추가 확장 소재 (기본 문서의 하위 리소스라고 함)에 대한 후속 요청은 이 원본 소스에서 전송됩니다.
CSS stylesheet 및 로드 중인 script 하위 리소스를 보여주는 두 번째 및 세 번째 행은 기본 문서에서 시작된 종속 요청입니다.
이러한 요청이 이루어지는 시점을 살펴보면 폭포식 다이어그램에서 이러한 요청이 탐색 요청에 응답하는 프로세스의 맨 마지막 단계에서야 시작된다는 것을 알 수 있습니다.
초기 탐색 중에 전체 페이지를 표시하려면 HTML 문서, CSS, JavaScript 요청을 모두 사용해야 합니다.
런타임 요청 추가로 만들기
네트워크 패널이 열려 있고 녹화 중인 상태에서 이제 많은 웹 앱에서 공통적으로 발생하는 상황을 시뮬레이션해 보겠습니다. 초기 탐색이 완료된 후 페이지에 데이터를 추가하는 데 사용되는 추가 API 요청입니다.
앱에서 나 찾기를 클릭한 다음 표시되는 팝업에서 허용을 클릭하여 이러한 추가 요청을 트리거합니다. 이렇게 하면 사이트에서 현재 위치에 액세스할 수 있습니다.
웹 앱에 작업할 위치가 있으면 근처 위키백과 항목 찾기를 클릭하면 여러 네트워크 요청이 추가로 발생합니다. 다음과 같이 표시됩니다.
새 항목 해석
이전과 마찬가지로 기록된 네트워크 트래픽의 각 행은 단일 요청 및 응답 쌍을 나타냅니다.
새 항목의 첫 번째 행은 fetch 유형의 요청을 나타내며, 이는 웹 앱이 Wikipedia API에서 데이터를 요청하는 방식에 해당합니다.
다음 행은 모두 위키백과 항목과 연결된 이미지 (png 또는 jpeg)입니다. 스크린샷에서는 약간 보기 어렵지만 폭포식 열의 항목은 API 응답에서 직접 흐릅니다.
이러한 모든 추가 요청의 시점은 근처 Wikipedia 항목 찾기를 클릭하기 전에 페이지를 열어 두었던 시간에 따라 달라집니다. 여기서 가장 중요한 점은 when이 초기 탐색 요청에서 연결 해제된다는 것입니다. 폭포식 구조 디스플레이에 표시되는 큰 간격을 통해 이를 알 수 있습니다. 이 간격은 초기 로드와 Wikipedia API 요청이 이루어진 시점 사이에 경과한 시간을 나타냅니다.
탐색 후 일정 시간이 지난 후에 이루어진 요청은 페이지를 처음 탐색할 때 페이지를 표시하는 데 사용된 초기 요청 세트와 달리 '런타임 요청' 카테고리에 속합니다.
요약
이 Codelab의 단계를 완료하면 모든 웹 애플리케이션에서 로드되는 항목을 분석하는 데 사용할 수 있는 도구에 익숙해집니다.
네트워크 패널을 사용하면 이름 열의 URL과 유형 열의 데이터를 통해 로드되는 항목과 폭포식 디스플레이를 통해 로드되는 시점을 파악할 수 있습니다.
또한 웹페이지에서 이루어진 요청은 일반적으로 다음 두 가지 카테고리 중 하나로 그룹화될 수 있습니다.
- 새 페이지로 이동한 직후 HTML, JavaScript, CSS (및 기타 애셋일 수 있음)에 대해 이루어지는 초기 요청입니다.
- 사용자가 페이지와 상호작용한 결과로 발생한 런타임 요청입니다. 이는 종종 API 요청으로 시작하여 검색된 API 데이터를 기반으로 여러 후속 요청으로 이어질 수 있습니다.