Elements
-
Elements패널의 기능은?
👉🏽 페이지와 스타일 검사 및 편집 그리고 스타일 수정을 할 수 있게 도와주는 패널이다 -
해당 페이지는 몇 개의
section으로 이루어져있나요?
👉🏽 5개 -
Instagram 피드의 가로 길이는?
-
Styles 부분의 순서가 의미하는 것은?
👉🏽 CSS 파일의 입력 순서가 아닌 브라우저가 읽는 순서.
예를 들면 id, class를 먼저 읽어, 순서의 위로 올라오게 된다. -
user agent stylesheet란?
👉🏽 웹 브라우저 별로 해당 태그의 기본 속성값을 가지고 있는데 그것을 말한다.
Reset도 가능하고 수정도 가능하지만 아무런 속성값을 주지 않으면 브라우저가 가지고 있는 값을 보여준다.
Console
-
Console패널의 기능은?
👉🏽 자바 스크립트가 돌아가는 환경 그대로인 화면. 자바스크립트를 입력하여 브라우저에서 바로바로 확인 가능하게 해준다. -
화면을 새로고침 해도
console내용이 지워지지 않고 남게 하는 방법은?
👉🏽 크롬의 개발자 도구에서는 console 옆 설정에서 "Preserve log"를 눌러주면 된다. -
콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
👉🏽 console.clear -
콘솔에서
Warnings,Errors내용을 제외하고 보는 방법은?
👉🏽 개발자 도구 console의 설정과 filter 사이에 있는 Log level에서 체크하거나 체크를 해제한다. -
다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?
👉🏽 ESC를 누르면 다른 패널 사용중에도 console 사용 가능하다.
Network
-
Network패널의 기능은?
👉🏽 해당 웹사이트에서 통신하고 있는 모든 정보가 표시된다.
무슨 요청으로 호출했고 응답은 어떻게 되고 있는지 확인 가능하다. -
Network패널의 여러 가지 탭의 종류와 기능 살펴보기
👉🏽 XHR : Xml http Request =>프론트엔드에서 백엔드에 API 호출할때의 정보
JS : 확장자가 js인 -
Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
-
Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기
Application
-
Application패널의 기능은?
👉🏽 브라우저에서 저장할 많은 저장소들과 캐시, 스토리지들이 많이 있다. 로그인과 관련해서 유저 정보에 대한 부분에도 많은 부분을 차지하기 때문에 꼭 알아두어야 할 패널이다. -
Local Storage,Session Storage,Cookie차이점은?
👉🏽 Storage : 브라우저의 저장소. Key-Value 페어 형태로 간단한 키와 값을 저장할 수 있다.
👉🏽 Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다.
👉🏽 Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.
👉🏽 Cookie : 만료 기한이 있는 키-값 저장소다. 시간 제한이 설정되어 있는(저장 기간 설정 가능) 데이터 저장소이며, 쿠키는 프론트-백엔드 통신과 관련이 있기 때문에 용량이 작을 수 밖에 없다. -
Local Storage,Session Storage,Cookie사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?
👉🏽 Local Storage : 보안이 중요한 영구 데이터 (자동 로그인). 영구적으로 저장되어도 상관 없는 데이터들
👉🏽 Session Storage : 보안이 중요한 임시 데이터 (은행 로그인). 민감한 데이터.
👉🏽 Cookie : 빠른 처리가 필요한 임시 데이터(광고 팝업) -
Local Storage에 특정 데이터를 저장하고 가져오는 방법
👉🏽 세팅하는 법
- localStorage.setItem("key", "value")
- sessionStorage.setItem("key", "value")
👉🏽스토리지 접근해서 값 가져오는 법
- localStorage.getItem("key")
- sessionStorage.getItem("key")
