TIL | 개발자 도구 Network Panel의 기능

- 크롬 개발자 도구란?

• Web 개발에 도움이 되는 도구로서 'Element', 'console',
  'Sources', 'Network', 'Performance', 'Memory',
  'Application', 'Security', 'Lighthouse' 패널 등의 브라우저에서 제공하는 툴.

- Network 패널이란?

Network 패널은 웹페이지를 로드하기 시작했을 때부터 웹페이지 안에 포함되어있는 이미지, 리소스 등을 Network(서버)를 통해서 각각의 이미지, 리소스를 가져오는지, 어떤 요청과 응답이 오갔는지 등, 웹페이지와 서버 사이의 데이터 흐름을 분석하고, 문제 발생시 해결책을 찾을수 있는 패널을 일컫는다.

- Network 패널의 기능은?

• 현재 접속중인 페이지에서 일어나고 있는 모든 통신을 나타내준다. (백엔드와 프론트 사이의 관계 프론트와 유저 사이의 관계)

- Network 패널의 여러 가지 탭의 종류와 기능 살펴보기

• Network 패널엔 많은 탭이 있지만 그 중에 가장 중요한것은 'XHR'이라고 할 수 있다.
  XHR (Xml http Request) => 프론트엔드에서 백엔드에 API 호출할때의 정보
  
  
• XHR은 AJAX(실시간으로 서버와 브라우저가 네트워킹되는 기능 Ex: 좋아요 버튼) 요청을 생성하는 JavaScript API입니다.
  브라우저가 가지고있는 XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 것.

- Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기

• 마켓컬리 홈페이지 - F12 or option + command + j - Network panel에서 XHR - categories 파일
  (오류가 나서 수정하고 싶거나 찾고싶은 부분은 Filter에 검색으로 빠르게 찾을 수 있다.)

- Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기

• 영상이 틀어져있는 곳을 띄워두고 Network panel - filter 아래 media - mp4로 되어 있는 영상 링크 복사해서 url 가져올 수 있다.