개발자 도구 실행
- 보기 -> 개발자 정보 -> 개발자 도구 (Mac)
- 페이지 요소를 오른클릭하고 검사를 선택
- Ctrl+Shift+I (Windows)나 Cmd+Opt+I (Mac)
Elements panel
Elements Tab > Styles 부분의 순서의 의미
css 우선순위대로 나옴
인라인 > 아이디 > 클래스 > 태그
-> 하나의 요소에 여러개의 css파일에서 속성을 지정할 수 있다
구체적인거부터 추상적인 순서대로 위에서부터.
user agent sheet
브라우저에서 부여한 기본값
-> 브라우저의 css 디폴트속성값. 브라우저마다 디폴트값이 다름
reset.css normalize.css 파일을 통해 이값을 초기화시키고 작업을 해주어야함
css 속성 중 100% 지정되어 있는 속성을 갖는 요소 찾기
cmd + F - 100% 검색하면 나옴
-> 필터
header에 있는 로고 요소 복사해서 footer에 추가
Drag and Drop : 왼쪽 모서리의 셀렉트 누르고 옮기고 싶은 요소를 마우스로
클릭해서 누른상태로 드래그(원하는 곳으로)
-> 디자인을 급하게 수정할때 사용 / 어디가 이쁠지? 바로 확인하고 싶을때
Console panel
화면을 새로고침해도 콘솔이 지워지지 않고 남게 하기
설정 - Preserve log 누르면 됨
-> 디버깅할때 많이 사용
console.log() / console.error() / console.warn()
console.log() - 자료나 데이터가 잘작동되는지 확인하기위해서
-> 대화형 쉘 프롬프트로도 활용(중요!)
console.error() - 에러가 잇는지 없는지 확인(빨간색) -> 에러메세지
console.warn - 에러와 색이 다름(노란색) -> 경고메세지
콘솔에서 warn 내용만 제외하고 보는 방법
오른쪽 상단의 Default levels 눌러서 Warnings 체크 해제
다른 패널(ex. Elements panel)에서 콘솔 패널 같이 보는 방법
esc 키 누르면 됨
Network panel
Network 탭 내부
All, XHR, JS, CSS, ...
XHR - 브라우저와 서버가 HTTP 통신을 할 때 request 전문이 어떻게 구성되어 서버로 전달되는지, 서버로부터 요청에 따른 Response 결과를 확인할 때 사용
Market Kurly 카테고리 정보 가져오는 API 찾아보기
XHR - categories1
Application panel
브라우저의 저장소 확인할수 잇음
Local Storage, Session Storage, Cookie 차이점
1. Local Storage
만료기간이 없다. 직접 삭제하지 않는 한 영구보존 된다.
2. Session Storage
윈도우나 브라우저 탭을 닫을 경우 제거된다.
3. Cookie
만료기한이 있는 키-값 저장소
저장 가능한 공간의 크기가 가장 작고, 하나의 텍스트 형태로 저장됨.
만료일 설정 가능하다 (영구적인 쿠키의 경우, 만료일자를 설정할 수 있다)
암호화되지 않아서 보안에 취약하다.
프론드-백엔드 통신과 관련있음
Local storage, Session Storage, Cookie 사용 예시
1. Local storage
정보가 계속 저장되는 것
ex) 자동 로그인 - 아이디, 비밀번호는 서버에 저장. 여기서 자동로그인이라는 것은 자동로그인을 설정했는지 안했는지가 저장된다는 말
2. Session strorage
잠깐 필요한 정보
직방에서 아파트 지역, 지하철명 등 검색하면 나오는 내용들
은행 사이트
언어 선택
3. 쿠키
직접적이지 않은 데이터
오늘만 하거나 일주일 동안 하는 이벤트 팝업, 서비스약관에 동의했는지 등
Local storage에 데이터를 저장하고, 저장한 데이터를 접근해서 가져오는 방법
1. 세팅하는 법
localStorage.setItem("key", "value")
sessionStorage.setItem("key", "value")
2. 스토리지 접근해서 값 가져오는 법
localStorage.getItem("key")
sessionStorage.getItem("key")
