개발자 도구 활용법(Google Chrome DevTool) 🌈
먼저 읽고 보면 좋은 Youtube 강의 보고 읽으면 더 이해가 잘 될 것!
🍕elements tab
Elements Tab > Styles 부분의 순서가 의미하는 것은?
: css 기록된거랑 순서가 다르다, 가장먼저 적용되는 순서대로 배치가됨, css를 읽고 그안에서 제일먼저 id,class,tag이런식으로 배열되니깐 그렇게 이해하면 됨
user agent sheet란?
: 브라우저마다 defult css가 있다. 그러한 문서가 있으니, 그것을 수정할 수도 있으나, reset하는 방법도 있고 normalize하는 방법이 있는데 전체 웹브라우저의 값을 제로로 만드는 방법도 있다.
hover 했을 시 적용되는 css 확인 방법
element-styles 가서 필터 hover 클릭 한다음 elements 확인
특정 요소의 css 속성 중 100% 지정되어 있는 속성 찾기
: styles 검색창에서 100%찾기!
header에 있는 로고 요소 복사해서 footer에 추가 해보기
: 로고 선택해서 드래그 해서 이동하고 가능함
🍔 console tab
오늘 날짜를 콘솔에 나타나게 해주세요.
: new Date()
화면을 새로고침 해도 콘솔이 지워지지 않고 남게 해주세요.
: setting(톱니바퀴) 클릭 후 preserve log 클릭
console.log() / console.error() / console.warn()
: 콘솔로그 찍듯이 안에 값을 넣고 찍으면 error는 빨간색🍎, warn은 노란색🍋으로 출력된다!
콘솔에서 warn 내용만 제외하고 보는 방법
: console에 deafult level 에서 warning check해지하면 됨
- 다른 탭(ex. Elements Tab)에서 콘솔탭을 같이 보는 방법
:esc버튼 누르면 된다
옆에 side bar를 통해 알수 있다.
🍫sources tab
사이트의 폴더 및 파일 구성 살펴보기
: 페이지의 최상단에 top 파일, 가운데는 에디터 , 오른쪽은 디버깅 툴이 되어있고 웬만한 큰회사들은 다 나름의 장치를 해놔서 모든 코드를 쉽게 볼 수는 없음
Debugging이란? Sources Tab 사용해서 디버깅 하는 방법.
: 물론 디버깅 탭에서 break 을 걸거나, 실행한 event를 클릭해서 확인 할 수 있으나 우리같은 코생아들은 중간중간에 변수가 맞는지 console.log에 찍어보면서 하는게 중요
🥖network tab
Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
: 네트워크탭 all에는 백과 프론트가 주고받는 데이터가 다 있다.
API, Endpoint 개념의 차이점
Network 탭의 XHR탭 살펴보기
프론트와 백앤드가 어떻게 통신하자고 약속한것
모든 통신들을 볼수 있음
통신의 상태 확인 가능
🌭application tab
Local Storage, Session Storage, Cookie 차이점
사이트라고 부르는 도메인에는 사이트가 세개가 있음
key와 value값으로 저장됨
local storage
local storage는 지우지 않는 이상 영구 저장, lifecycle이 길다
session storage
tab을닫고 창을 닫으면 날라감
cookie
가벼워서 로딩이 쉬운데 불필요한 용량차지가 있음
cookie는 하드에 저장이 되서 expire date가 있어서 설정에 따라 삭제하는 기간이 다름
Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?
local storage는
지우지않는한 남아있는 데이터
자동 로그인
최근 검색 기능
**session stroage 브라우저 열면 세션이 실행이 되는데
민감한 정보는 담아두면 안됨
담으면 날라가거나 user specific한 정보만 저장해야함
온라인 쇼핑몰에서 장바구니에 비회원의 경우 웹페이지 장바구니에 넣고 페이지 닫으면 장바구니가 날라가는데 그런거는 session storage라고 볼수있음
자세한것은 개발하면서 더 배워나갈 예정, 쓰면서 배우기!!!!!!!!!!!😁
