<크롬 개발자 도구>
개발자 도구 : 문제 원인 파악 및 해결 위함.
- elements pannel : 내가 직접 고쳐보는 것.
- 기능 : 웹페이지 구성 / 스타일 속성 / 각종 수정 가능
- css는 우선순위(구체->추상)
- user agent stylesheet : 브라우저의 기본 스타일값 의미(브라우저마다 다름 ; 크롬, 사파리... )
- console pannel : 내가 보낸게 맞는지 값이 궁금할 때 확인해보는 것.(console log ; 파이썬에 print 같은 것)
- 기능 : 로그된 메시지 보기 / 디버깅 / 실시간 입력 및 실행 -> console은 객체(새로고침 후 지워지지 않게 할 수도 있음)
- 백엔드와의 관계 : response, statuscode 전달.
- log level 에 따라 보는 방식이 달라짐
- 다른 pannel과도 연동해서 볼 수 있다.
- 네트워크 패널이란? :
- 페이지를 표시하는데 필요한 네트워크 작업 결과를 시간 순으로 표시한 것.
- 서버와 통신 내역을 보여주는 패널로 보이지 않는 리소스를 찾아낼 수 있음. 응답과 요청을 확인 시에 찾을 수 있으며 주로 프론트 - 백엔드 간 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가 뜨는 곳에서 확인하고 찾는다.
- application pannel : 브라우저의 저장소
-
로컬 : 사용자가 지우지 않으면 남음.
-
세션 : 탭 닫으면 지워짐
-
쿠키 : 시간 제한, 용량 작음
<용의성> (by 자료)
-
Local Storage
-
지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
-
UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)
-
Session Storage :
-
잠깐 동안 필요한 정보
-
ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택
-
Cookie
-
서비스 직접적이지 않은 데이터
-
오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.
- 그럼 비밀번호는? : 브라우저 말고 암호화 되어서 저장이 됨(인증 인가 시간에 다시 배우기로 함)