개발자도구학습
Elements
1. elements 패널의 기능
우선 개발자도구란 말그대로 개발자들이 사용하는 도구이다.
개발자도구는 각각 브라우저에서 기본적으로 제공하며 별도의 설치는 필요하지 않다.
실행은
키보드 f12
브라우저 창에서 우클릭에있는 검사 항목
ctrl+ shift +i 등
여러가지 방법이 있다
elments 패널이란 개발자 도구를 열었을 때 가장 처음 표시되는 도구이다.
elements 패널은 html 코드를 분석하고 수정할 수 있는 도구 패널이다.
css도 조작이 가능하며 사이트의 레이아웃과 디자인을 변경하며 테스트가 가능하다
html과 css 가 잘 출력되고 동작되고있는지 확인 할수 있는 기능을 제공해주는것이다.
- 페이지에서 이루어진 section의 개수
5개의 section으로 이루어짐
html과 css 상태를 확인하는 elements패널을 클릭하면 페이지를 이루고있는 코드들을 확인할 수 있다.
- 인스타그램 피드의 가로 길이
개발자도구를 열면 제일위에 elements 패널 옆에 화살표를 클릭을해 원하는 부분에 커서를 가져다 대면 크기를 쉽게 확인 할 수 있다.
- styles 부분의 순서가 의미하는 것은?
HTML이 실행되었을때 가장 먼저 적용되는 순서대로 배치가 되어있다. 개발자가 기록한 CSS와는 순서가 다르며, 가장 상위태그인 html, ID, CLASS, TAG 순서대로 배치되어 있다.
- user agent stylesheet 란?
사용자 도구 스타일시트로, 브라우저는 기본적으로 디폴트 스타일시트가 존재한다. user agent sheet는 디폴트스타일시트를 의미한다. 웹브라우저 종류에 따라 기본적으로 디폴트 시트가 다르다. Styles시트에서는 가장 아래에 위치해있으며, 해당부분은 수정이 불가하기때문에 필요에 따라 수정이 필요하다. 우선순위가 작성자시트보다 아래이기때문에 작성자가 쓴 시트로 덮어씌워진다. reset.css 로 전체 리셋 선언도 가능하다.
Console panel
1. 콘솔패널의 기능
자바스크립트의 결과값을 확인하고싶을때 사용하는 패널
변수의 어떤값이 들어있는지`
api로 어떤데이터값을 받았는지
-
콘솔값내용을 새로고침을 해도 남기는법
설정에서 콘솔메뉴에 프리저블 로그를 체크하면 그대로 남아있음 -
로그를 모두지울때 사용하는법
clear() 매소드 사용 -
warnings 랑 errors 를 제외하고 보는법
디폴트레벨에서 워닝이랑 에러스 체크해제시 제외되어짐 -
다른패널과 같이보는법
esc키 사용
Network
1. network 패널의 기능
웹컴퓨터가 서버컴퓨터랑 통신을 하는데 웹통신프로토콜 규격 절차에 따라 주고받는것을 확인하는 곳
리소스들이 잘 다운로드되고 업로드 되는지
인디비쥬얼 리소스들의 검사가 필요할때
파일의 사이즈를 확인하고 싶을때
Application
1. 패널의 기능
이미지나 글들을 어디에 저장했는지 관련된 장치
2. local storage, session storage, cookie 의 차이점
스토리지란
서버로 보내는것이아닌 클라이언트에 저장하는것
객체형테로 데이터를 저장하는데 키값과 벨류값으로 저장되어짐
큰차이- 로컬은 지우기전까지 데이터가 남아있음 페이지를 나가도
세션은 페이지를 닫으면 데이터가 사라짐, 보안이 필요한곳, 잠시 사용하는곳
해킹을했을때 빼갈수있는 위험성이 있음
쿠키 서버랑 통신하면서 주고받는 데이터 , 권한을 부여받는다던지 정보를 제공한다던지
시간제한을 없애면 무한정 저장되지만 시간을 정하면 그만큼만 남아있게됨
문자열 형식으로 저장되는 차이점(키값과 벨류값이 아님)
3. 사용 예시 - 어떤데이터를 어디에 저장하면 좋은지
- local storage 에서 특정 데이터를 저장하고 가져오는 법
