11.20 TIL

sunnu16·2020년 11월 22일
0

TIL

목록 보기
3/8
post-thumbnail

개발자 도구란?

브라우저에서 제공하는 하나의 도구(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

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

profile
고영희를 모시고 있는 Backend 개발자 🐈

0개의 댓글