"Network 패널의 기능"
크롬 개발자 도구!?
먼저 크롬은 구글에서 만든 웹 브라우저이며 개발을 도와주는 다양한 도구를 사용자에게 제공합니다.
개발자, 디자이너, 엔지니어 등이 사용하며 현재 띄워진 웹을 분석하거나 이슈가 있을 경우 디버그 용도
윈도우는 F12 , 맥 fn + F12
Network 패널이란!?
현재 보고있는 페이지에서 일어나고 있는 모든 통신 을 나타낸다.
각 소스들을 불러올 때 네트워크 측면(속도, 응답 등)에서 확인 가능하며 네트워크 측면 문제가 있을 시 비교/분석 가능하다.
쉽게 백엔드와 프론트사이의 관계, 프론트와 유저사이의 관계 라고 이해하면 된다.
Network 패널의 여러 가지 탭의 종류와 기능 !?
상단탭
All, Js, Media, XHR
하단탭
Filmstrip,Name, Status, type, Initiator, Size, Time, Waterfall
Network 패널엔 많은 탭이 있지만 그 중에 가장 중요한것은 'XHR'
XHR (Xml http Request) : 프론트엔드에서 백엔드에 API 호출할때의 정보이면서 AJAX를 요청을 생성하는 JavaScript API입니다
_여기서 API, AJAX 란?
API 란 프로그램들이 서로 상호작용하는 것을 도와주는 매개체이자 접근성을 허용할지 말지 확인하는 것.
브라우저가 가지고있는 XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 것.
AJAX 란 실시간으로 서버와 브라우저가 네트워크가 가능한 기능 ex:인스타좋아요!
즉, XHR이 API이며 그 XHR의 기능이 AJAX 라는 것이다.
Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
개발자 도구 > network > Fetch / XHR 탭 클릭
Name 탭에서 categories?ver=1 클릭
우측 상단의 Preview 클릭해서 json 형식의 파일을 펼쳐보면 api호출을 통해 가져온 데이터를 확인할 수 있다.
(오류가 나서 수정하고 싶거나 찾고싶은 부분은 Filter에 검색으로 빠르게 찾을 수 있다.)
Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기
영상이 틀어져있는 곳을 띄워두고 > 개발자 도구 > network > Midea 탭 클릭 > mp4로 되어 있는 영상 링크 복사해서 url
