개발자 도구에 있는 다양한 패널의 종류와 기능에 대해 파악하자

1. Elements 패널을 통해 웹 페이지의 구성과 구성 요소들의 스타일을 확인할 수 있다.
2. Console 패널을 통해 자바스크립트 코드를 브라우저에서 즉시 실행할 수 있다.
3. Network 패널을 통해 네트워크 상으로 주고받는 데이터를 확인할 수 있다.
4. Application 패널을 통해 브라우저의 저장소에 담긴 데이터를 확인할 수 있다.

1. Elements 패널

1. Elements 패널의 기능은?

HTML, CSS 등 웹 페이지 구성 요소들을 확인할 수 있는 패널
실제 코드를 수정하지 않고도 Elements 패널에서 임시로 수정하고 그 결과를 확인해 볼 수 있다.

2. 해당 페이지는 몇 개의 section으로 이루어져 있을까?

해당 페이지 > 어느 개발자 분의 이력서 홈페이지

총 5개의 section으로 이루져 있는 것을 확인할 수 있다.

3. Instagram 피드의 가로 길이는?

확인 결과 614px인 것이 보인다.

4. Styles 부분의 순서가 의미하는 것은?

위에서 아래로 갈 수록 포괄적인 부분이다.

또한 HTML에서 바로 스타일을 넣는 것을 인라인 방식이라고 하는데, 이는 모든 순서에서 우위를 가지며, 어쩔 수 없는 상황이 아닌 이상 지양하는 것이 좋다.

5. user agent stylesheet란?

각 웹 브라우저에 Default값으로 설정되어 있는 CSS 속성
=> 따라서 이 CSS들을 초기화 시킨 후 CSS작성 요망

2. Console 패널

1. Console 패널의 기능은?

로그를 확인할 때 사용하거나 웹 브라우저에서 자바스크립트 코드를 직접 작성할 수 있는 패널

2. 화면을 새로고침해도 console 내용이 지워지지 않고 남게 하는 방법은?

콘솔 패널 설정 화면에서 로그 보존(혹은 Preserve log)를 선택하면 사라지지 않는다.

3. 콘솔에 기록된 로그를 모두 지울 때 사용하는 method는?

이에 대해서는 몇가지가 있는데,

1. console.clear(); / clear(); 입력
2. command+K / control+L 단축키
   1번의 방법은 지워지긴 하지만
   
   삭제되었다는 기록이 남게된다.
   하지만 2번의 방법은 기록 없이 깔끔하게 전부 지워진다.

4. 콘솔에서 Warnings, Errors 내용을 제외하고 보는 방법은?

필터 창 오른쪽에 위치한 기본 수준 탭에서 경고와 오류를 체크 해제하면 된다.

5. 다른 패널(ex. Elements 패널, Network 패널 등)에서 Console 패널과 같이 보는 방법은?

다른 탭에서 esc키를 누르면 콘솔 탭이 나타났다가 사라졌다가 한다.

3. Network 패널

1. Network 패널의 기능은?

프론트 엔드와 백엔드의 소통 창구가 될 수 있고, 요청에 따라 어디에서 API정보가 오고 가는 지 확인할 수 있는 패널이다.

2. Network 패널의 여러가지 탭 종류와 기능 살펴보기

Fetch, JS, 이미지, 미디어 등의 파일들을 확인할 수 있고, 통신 상태 또한 확인할 수 있다.

3. 마켓컬리 카테고리 정보 가져오는 API 찾아보기

4. 테슬라 홈페이지에서 신나게 달리는 자동차 동영상 URL 가져오기

미디어 탭 들어간 뒤 파일 명에서 .mp4 파일을 확인해 볼 수 있다.

4. Application 패널

1. Application 패널의 기능은?

브라우저 저장소
Local Storage, Session Storage, Cookie

2. Local Storage, Session Storage, Cookie의 차이점은?

Local Storage: 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남는다. 즉, 데이터의 영구성이 보장되며 Key-Value 페어의 객체 형태로 데이터가 저장된다.
Session Storage: 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터가 저장된다.
Cookie: 시간 제한 설정이 가능하다. 쿠키는 프론트 - 백엔드 통신과 관련이 있으며 용량이 작을 수밖에 없고, Key-Value 페어의 문자열 형태로 데이터가 저장된다.

3. Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?

Local Storage: 지속적으로 필요한 데이터 / UI정보들 등
Session Storage: 잠깐 동안만 필요한 정보 / 보안이 중요한 정보(은행 사이트, 개인정보 등) / 언어 선택 등
Cookie: 직접적이지 않은 서비스 데이터 / 하루짜리 이벤트 팝업, 서비스 약관 동의 여부 등

• 비밀번호와 같은 정보는 스토리지에 저장하면 위험함. 콘솔탭에서 쉽게 접근이 가능하며, 해킹당할 수 있음. 각 회사의 지침을 따르는 것이 중요
  

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

1. 데이터 저장
   localStorage.setItem("key", "value")
   sessionStorage.setItem("key", "value")
   setcookie("key", "value", "지속시간 (초단위)")

2. 데이터 호출
   localStorage.getItem("key")
   sessionStorage.getItem("key")
   document.cookie

3. 기타 메소드
   외에도 removeItem, clear 등등의 공통 메소드 존재

여담이지만 : 웹 브라우저 점유율 현황

결론 : 크롬 사용을 생활화 하자