CHROME 개발자 도구(dev tools)란?
> 웹 개발에 도움이 되는 도구이며, 크롬뿐만 아니라 인터넷 익스플로러, 사파리 등 브라우저 자체에서 제공하는 도구(tool)이다.개발자 도구
맥 : option + commend + j윈도우: f12
문제가 생겼을 때 콘솔 페널과 네트워크 패널 먼저 확인해야함
user agent stylesheet
브 라우저에 기본적으로 셋팅되어 있는 css 요소 reset css 등으로 브라우저의 css 리셋 후 코딩
elements - styles 부분의 순서
위: 구체적 (element style) -> 아래로 갈 수록 포괄적 (body) inline > id > class > _____
elements 패널
- html, css 등 확인 및 수정 가능conseol 패널
-새로고침을 해도 console 내용이 지워지지 않고 남게 하는 방법은preserve log 설정
-console에서 기록된 로그를 모두 지울 때 사용하는 메소드는?
버튼으로도 가능
console.clear
clear()
network 패널
내가 naver에 접속을 한다면,
- naver 웹페이지를 로드하기 시작하면서 웹페이지를 구성하는 데에 필요한 이미지, 리소스 등을 서버(network)를 통해 가져온다
프론트와 백의 소통창구
프론트에서 요청 -> 백에서 데이터 전송
fetch/XHR
프론트 요청에 대한 답변
200 ok
:통신이 되었을때 상태 코드임
:200이 뜨면 통신이 잘 되었다
오류
400번대 오류: 프론트
500번대 오류: 백엔드
