개발자 도구 - network panel

Network panel?

• 해당 웹 사이트에서 통신하고 있는 모든 정보가 표시되는 곳
• Network (서버) 가 웹 페이지 안의 정보를 가져오는 데 소요한 시간, 순서, 어떤 요청으로 호출했는지 응답은 어떻게 했는지 등의 정보를 표시

Network panel 의 여러가지 탭의 종류와 기능

• 상단 탭은 파일 형식에 따라 나누어져 있다.

• XHR (Xml Http Request) : 브라우저와 서버가 통신할 때 작성된 요청 전문을 확인하고, 서버로부터 요청에 따른 응답 결과를 확인하기 위해 사용하는 Javascript API

  • 프론트엔드에서 백엔드 쪽으로 API 를 호출할 때 정보
  • API : 프로그램들이 서로 상호작용하는 것을 도와주는 매개체

• AJAX (실시간으로 서버와 브라우저가 네트워크가 가능한 기능, 브라우저가 가지고 있는 XHR라는 객체를 이용해서 전체 페이지를 새로고침하지 않아도, URL 로부터 데이터를 받아올 수 있다 - 비동기적) 프로그래밍에 주로 사용된다.