DevTools

• 개발자 도구는 브라우저에 제공하는 tool이다
• 웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠르게 더 나은 사이트를 만들게 도움

Panel(tab)

1. Elements panel

• 웹페이지 구성
• DOM과 CSS를 자유롭게 조작해 실시간으로 레이아웃과 디자인을 테스트
• select element로 원하는 정보 클릭 하면 패널에서 어디에 있는지 바로 찾을 수 있다.

Styles부분의 순서 의미

• 하나의 요소에 여러개의 css파일에서 스타일 적용 가능
• 가장 상단부터 css파일의 우선순위 (구체적>>>추상적)에 따른 순서
  CSS specificity - inline style > id > class > tag
  (inline style은 HTML태그 명령어 라인 내부에 스타일 = 요즘은 HTMl과 CSS를 분리하고, 나중에 코드가 쌓이면 찾기 힘들어 거의 사용안함)

user agent stylesheet

• 브라우저의 기본 스타일 값. (브라우저 마다 스타일 기본값이 다르다.)
• 각 브라우저 마다 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서 reset.css , normalize.css파일에서 기본 스타일 값을 모두 초기화 시키고 작업.(브라우저의 종류에 상관 없이 동일 화면 출력

Console panel

• 자바스크립트 코드 즉시 실행.
• 디버깅 = 시스템의 오류나 버그를 찾아내고 그 원인을 밝히고 수정하는 작업과정.
• console는 객체이며 lod메소드를 포함한 다양한 메소드 존재.

활용예시

• 실제 디버깅 시 다른 도구 보다 console.log를 활용하는 경우가 대부분이다.
• 백엔드에서 보낸주는 response(에러 메세지, status코드)도 console.log를 활용해 확인. 그러므로 정확한 response 메세지와 status code를 전달

Network panel

• http 네트워크 통신 확인
• API 크롤링, 페이지 로딩 성능 테스트(특정항목이 어떻게 요청,응답 받았는지 상세하게 확인 가능)
• 이미지, 영상 등의 소스(mock data 활용

내부 기능

• ALL, XHR, JS, CSS, IMG, Media등을 확인할 수 있음
• XHR - (Xml(Extensible Markup Language) Http Request) - 브라우저와 서버가 HTTP 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용한다.
  브라우저에서 서버에 API 호출할때 제대로 호출 했는지, 응답했는지 알 수 있다.
  (브라우저, API,서버 중 어디서 에러 났는지 확인가능.)
  프론트엔드와 백엔드 개발자와 소통하기 때문에 숙지!!!

Application panel

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

내부기능

cookie

• 작은 데이터 파일로 클라이언트가 서버에 보낸 요청을 서버가 확인하고 쿠키를 추가해 응답.
  이후 클라이언트가 서버에 요청 보낼 때 마다 쿠키를 포함하여 통신.
• 용량을 작지만 매 http요청마다 담겨 유효성 확인의 대상이 돼 서버에 부담을 줌.
• 유효기간을 설정할 수 있다.
• 텍스트 타입이라 문자열만 저장 가능.(개당 4kb, 최대 300개)

storage

데이터를 서버에 전송하지 않고 클라이언트 웹브라우저에 저장한다.

• local storage - 사용자가 지우지 않는 이상 클라이언트 웹브라우저에 계속 남음.
• session storage - 브라우저나 탭을 닫을 경우 제거된다, 동일 탭이어도 다른 도메인이라면 별개의 session storge생성(잠시 동안 필요한 정보 저장하기 좋음)

활용 예시

• Local Storage

• 지속적으로 필요한 데이터(ID저장, 비회원 카트)
• UI 정보들(에어비엔비,스카이스캐너- 검색하면 그대로 유지)

• Session Storage

• 잠시 필요한 정보
• 보안이 중요한 정보(은행사이트), specific한 유저 정보, 언어 선택

• Cookie

• 서비스 직접적이지 않은 데이터
• 오늘만 하는 이벤트 팝업, 서비스 약관 동의

주의점
비밀번호 같은 중요정보는 로컬스토리지나 세션스토리지는 클라이언트 사이드이므로 쉽게 해킹당할 수 있다.

데이터 저장하고 가져오는 법

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