개발자 도구 활용법(Google Chrome DevTool) 🌈
먼저 읽고 보면 좋은 Youtube 강의 보고 읽으면 더 이해가 잘 될 것!
: css 기록된거랑 순서가 다르다, 가장먼저 적용되는 순서대로 배치가됨, css를 읽고 그안에서 제일먼저 id,class,tag이런식으로 배열되니깐 그렇게 이해하면 됨
: 브라우저마다 defult css가 있다. 그러한 문서가 있으니, 그것을 수정할 수도 있으나, reset하는 방법도 있고 normalize하는 방법이 있는데 전체 웹브라우저의 값을 제로로 만드는 방법도 있다.
element-styles 가서 필터 hover 클릭 한다음 elements 확인
: styles 검색창에서 100%찾기!
: 로고 선택해서 드래그 해서 이동하고 가능함
: new Date()
: setting(톱니바퀴) 클릭 후 preserve log 클릭
: 콘솔로그 찍듯이 안에 값을 넣고 찍으면 error는 빨간색🍎, warn은 노란색🍋으로 출력된다!
: console에 deafult level 에서 warning check해지하면 됨
esc
버튼 누르면 된다: 페이지의 최상단에 top 파일, 가운데는 에디터 , 오른쪽은 디버깅 툴이 되어있고 웬만한 큰회사들은 다 나름의 장치를 해놔서 모든 코드를 쉽게 볼 수는 없음
: 물론 디버깅 탭에서 break 을 걸거나, 실행한 event를 클릭해서 확인 할 수 있으나 우리같은 코생아들은 중간중간에 변수가 맞는지 console.log에 찍어보면서 하는게 중요
: 네트워크탭 all
에는 백과 프론트가 주고받는 데이터가 다 있다.
프론트와 백앤드가 어떻게 통신하자고 약속한것
모든 통신들을 볼수 있음
통신의 상태 확인 가능
사이트라고 부르는 도메인에는 사이트가 세개가 있음
key와 value값으로 저장됨
local storage는 지우지 않는 이상 영구 저장, lifecycle이 길다
tab을닫고 창을 닫으면 날라감
가벼워서 로딩이 쉬운데 불필요한 용량차지가 있음
cookie는 하드에 저장이 되서 expire date가 있어서 설정에 따라 삭제하는 기간이 다름
local storage는
지우지않는한 남아있는 데이터
자동 로그인
최근 검색 기능
**session stroage 브라우저 열면 세션이 실행이 되는데
민감한 정보는 담아두면 안됨
담으면 날라가거나 user specific한 정보만 저장해야함
온라인 쇼핑몰에서 장바구니에 비회원의 경우 웹페이지 장바구니에 넣고 페이지 닫으면 장바구니가 날라가는데 그런거는 session storage라고 볼수있음