Elements panel

• Elements 패널의 기능은?
  : html, css의 요소와 구성을 확인할 수있는 도구

• 해당 페이지는 몇 개의 section 으로 이루어져있나요?

• Instagram 피드의 가로 길이는?

• Styles 부분의 순서가 의미하는 것은?
  중요도 inline - id -class

• user agent stylesheet 란?
  :브라우저가 기본으로 가지고 있는 스타일.
  의도하지 않게 디자인이 들어갈 수있어서 모두 리셋하고 시작!
  ex) margin :0 ;
  padding : 0;

Console panel

Network panel

Network 패널의 기능은?
해당 웹사이트에서 통신하고 있는 모든 정보가 표시된다.
무슨 요청으로 호출했고 응답은 어떻게 되고 있는지 확인 가능하다.

Network 패널의 여러 가지 탭의 종류와 기능 살펴보기
XHR : Xml http Request => 프론트엔드에서 백엔드에 API 호출할때의 정보
XMLHttpRequest(XHR)은 AJAX(실시간으로 서버와 브라우저가 네트워크가 가능한 기능 ex:인스타좋아요!) 요청을 생성하는 JavaScript API입니다.브라우저가 가지고있는 XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법.

Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기

Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기

API란?

API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체

1. API는 서버와 데이터베이스에 대한 출입구 역할을 한다.
: 데이터베이스에는 소중한 정보들이 저장되는데요. 모든 사람들이 이 데이터베이스에 접근할 수 있으면 안 되겠지요. API는 이를 방지하기 위해 여러분이 가진 서버와 데이터베이스에 대한 출입구 역할을 하며, 허용된 사람들에게만 접근성을 부여해줍니다.

Application panel

• Application 패널의 기능은?

• Local Storage, Session Storage, Cookie 차이점은?
  : 저장기간의 차의

• Storage : 브라우저의 저장소

• Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.

• Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.

• Cookie : 만료 기한이 있는 저장소. 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분).

Local Storage, Session Storage, Cookie 활용 예시

:: 어떤 데이터를 어디에 저장하면 좋을까?

• Local Storage
• 지속적으로 필요한 데이터(data persistant)(ex. 자동 로그인 여부)
• UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)
• Session Storage :
• 잠깐 동안 필요한 정보
• ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택
• Cookie
• 서비스 직접적이지 않은 데이터
• 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.

❗️ 비밀번호와 같은 중요정보는 스토리지에 저장하면 위험합니다. 로컬스토리지나 세션스토리지는 클라이언트 사이드 이기 때문에 쉽게 해킹당할 수 있기 때문입니다. 사이트/서비스의 특성, 회사의 방침에 따라 user data 를 어떻게 처리 하는지 전부 다르기 때문에 서비스 특성이나 기획에 맞게 적절하게 처리합니다.

Local Storage 에 특정 데이터를 저장하고 가져오는 방법

• 데이터 저장
  • localStorage.setItem("key", "value")
  • sessionStorage.setItem("key", "value")
  • setcookie("key", "value", "지속시간 (초단위)")
• 데이터 호출
  • localStorage.getItem("key")
  • sessionStorage.getItem("key")
  • document.cookie
• 기타 메소드
  • 외에도 removeItem, clear 등등의 공통 메소드 존재