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