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