개발자 도구 ) Network panel

Network 탭

XHR브라우저와 서버가 HTTP통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용한다.

편리하게 디버깅을 할 수 있도록 도와줄 수 있다. 각 소스들을 불러올 때 속도, 응답 등 네트워크 측면에서 확인 가능하며, 문제시 비교, 분석을 할 수 있게 해준다.

• http 네트워크 통신 확인
• API 크롤링, 페이지 로딩 성능을 테스트한다.
• 이미지, 영상 등의 소스를 가져온다.
• http 헤더, 콘텐츠, 크기 등 개별 리소스 속성 확인 가능

상단 체크박스

• Disable cache: 캐시 사용 안함
  캐시를 사용하지 않을 경우 어떻게 네트워크 요청이 이뤄지는지 확인해볼 수 있다.

• Offline: 오프라인
  네트워크가 연결되지 않은 상태를 가정하여 페이지를 표시한다. 오프라인 웹 앱을 구성할 때 사용한다.

• Throttling: 트래픽 조절
  느린 네트워크 상황을 가정하여 페이지를 표시한다. Fast / Slow 등의 프리셋이 있으며, 원하는 속도와 지연 시간을 지정하여 사용할 수도 있다.

XHR

프론트엔드와 백엔드 사이에서 API 호출이 제대로 이루어졌는지에 대한 모든 정보를 알 수 있다.

• Name - 리소스들의 이름과 URL 확인 가능
• status - 작동 여부 확인 가능 (ex, 200:정상작동, 500:서버오류)
• type - 파일의 형식
• initiator - 시작지점, (initiator)에서 호출 됐다는 의미
• size - 파일 사이즈
• time - 웹페이지가 요청하고, 응답하는 것 까지의 걸린 시간
• waterfall - 타임라인의 세부 정보

과제 1: Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
과제 2: Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기