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