<크롬 개발자 도구>

개발자 도구 : 문제 원인 파악 및 해결 위함.

  1. elements pannel : 내가 직접 고쳐보는 것.
  • 기능 : 웹페이지 구성 / 스타일 속성 / 각종 수정 가능
  • css는 우선순위(구체->추상)
  • user agent stylesheet : 브라우저의 기본 스타일값 의미(브라우저마다 다름 ; 크롬, 사파리... )
  1. console pannel : 내가 보낸게 맞는지 값이 궁금할 때 확인해보는 것.(console log ; 파이썬에 print 같은 것)
  • 기능 : 로그된 메시지 보기 / 디버깅 / 실시간 입력 및 실행 -> console은 객체(새로고침 후 지워지지 않게 할 수도 있음)
  • 백엔드와의 관계 : response, statuscode 전달.
  • log level 에 따라 보는 방식이 달라짐
  • 다른 pannel과도 연동해서 볼 수 있다.
  1. 네트워크 패널이란? :
  • 페이지를 표시하는데 필요한 네트워크 작업 결과를 시간 순으로 표시한 것.
  • 서버와 통신 내역을 보여주는 패널로 보이지 않는 리소스를 찾아낼 수 있음. 응답과 요청을 확인 시에 찾을 수 있으며 주로 프론트 - 백엔드 간 API 통신 소통에서 협업 시 많이 사용한다고 함.

<기능>

  • HTTP 네트워크 통신 확인
  • API 크롤링, 페이지 로딩 성능 테스트
  • 이미지, 영상 등 소스 확인

<내부>

  • 구성 : 로그, 상태, 이니테이터, 파일 사이즈, 다운로드 타이밍, 워터폴 + 등등
  • 새로운 요청 시 로그 확인
  • 연결 속도 즉 타이밍은 모바일 환경으로도 통제 가능
  • 각 페이지에 대한 리소스, 코드, 타이밍 모두 확인 가능하며 프리뷰 가능
  • 여러 기능에 대한 검색도 가능(확장자, 정규표현식)
  • 이에 따른 로그 필터링을 제공하며 다른 리퀘스트 차단 가능.
  • XHR(Xml(Extensible Markup Language) Http Request) - 브라우저와 서버가 HTTP 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용한다. ; 프 / 백 상호 작용

과제 1 : 마켓 컬리 창에서 category api 찾기

  • 결과 : XHR을 따로 검색하여 category 이름 찾은 후 api.~ 를 찾는다.

과제 2 : 테슬라 홈페이지에서 달리는 자동차 url 찾기

  • 방법1 : 구획이 div로 나뉘어진 홈페이지였다. 그래서 달리는 자동차 있는 곳을 검사를 한 뒤 search에서 영상 확장자를 찾는다.
  • 방법2 : 달리는 자동차 영상이 나오는 파트까지 스크롤하다가 media가 뜨는 곳에서 확인하고 찾는다.
  1. application pannel : 브라우저의 저장소
  • 로컬 : 사용자가 지우지 않으면 남음.

  • 세션 : 탭 닫으면 지워짐

  • 쿠키 : 시간 제한, 용량 작음

    <용의성> (by 자료)

  • Local Storage

  • 지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)

  • UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)

  • Session Storage :

  • 잠깐 동안 필요한 정보

  • ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택

  • Cookie

  • 서비스 직접적이지 않은 데이터

  • 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.

  • 그럼 비밀번호는? : 브라우저 말고 암호화 되어서 저장이 됨(인증 인가 시간에 다시 배우기로 함)
profile
커피 내리고 향 맡는거 좋아해요. 이것 저것 공부합니다.

0개의 댓글