11.20 TIL

개발자 도구란?

브라우저에서 제공하는 하나의 도구(Tool). 웹 사이트를 즉시 수정하고, 문제 발생시 빠른 원인 파악에 도움을 준다.

### _개발자 도구에는 여러가지 PANEL이 존재_

---

Elements Panel

웹 페이지의 구성(DOM)

구성요소의 스타일 속성 (CSS)

CSS 수정, UI 수정

### Style 부분이 의미하는 것은?

하나의 요소에 여러개의 css 파일에서 스타일 적용 가능

가장 상단부터 css 파일의 우선 순위(구체적 >>> 추상적)에 따른 순서

user agent stylesheet 란?

각 브라우저마다 브라우저 자체에서 설정이 가능함. 즉, reset.css 혹은 normalize.css 파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작. >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능

---

Console panel

JS 코드 즉시 실행 디버깅

---

Network panel

http 네트워크 통신 확인

API 크롤링, 페이지 로딩 성능 테스트
이미지, 영상 등의 소스 (mock data 활용)

---

Application panel

브라우저 저장소

Local storage, Session Storage, Cookie

Local Storage, Session Storage, Cookie 차이점

Storage : 브라우저의 저장소
Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있음.
즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.
Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거. Key-Value 페어의 객체 형태로 데이터 저장.
Cookie : session쿠키(만료일 포함 X) & persistent 쿠키(만료일 포함) .
시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음.
Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분).
텍스트 타입이라 문자열만 저장.