개발자도구란?!
개발자도구는 브라우저내에서 개발을 위해 지원되는 툴이며 자주 사용하게 됨.
웹사이트를 즉각적으로 수정하고 문제발생시 원인을 파악하여 더 나은 사이트를 만들게 도와줍니다.
오픈 방법은 f12키 또는 우클릭후 검사(inspect) cmd+option+i 등이 있다.
일단 google Devtools위주로 알아보자
개발자도구의 여러가지 탭
1. Elements panel
Elements tab
Elements tab내의 style tab의 순서는 가장 상단부터 우선순위에 따라 구체적인 적용에서 추상적인적용 속성이 나타난다.
ex) Inline > id > class > tag /선택자의 우선요소라 생각하면 좋을 것 같다.
UserAgentSheet
브라우저의 css default속성 값, 브라우저마다 다른 값을 가졌으므로 원하는 모양을 어느 브라우저든 똑같이 나타내려면 reset.css, normalize.css를 사용해야한다.
Filter
Filter 를 통해 검색이 가능하다
ex) css 속성 중 100%로 지정되어 있는 속성을 갖는요소를 찾기 등
html태그 만지기
필요 태그블락을 drag&drop을 통해 옮길수 있다
2. Console panel
Check Preserve log
화면을 새로고침하여도 기입된 콘솔이 지워지지 않고 유지 될 수 있다.
console.log()/console.error()/console.warn()
console은 객체로서 log말고도 다양한 메서드가 존재한다.
error, warn, dir(console.dir(window.document))등
콘솔에서 warn내용만 제외하고 보는 방법은
info Only를 이용하면 된다
다른패널에서 콘솔패널을 같이 보는 방법은
esc창을 누르면 콘솔창이 밑에 생기며 나머지 위는 원하는 탭을 볼 수 있다.
3. Sources panel
Sources panel에서 할 수 있는 기능
Application의 폴터 및 파일 구성, JS와 css의 편집 ,Debugging
페이지를 구성하는 다양한 파일들이 실제로 노출되어있다(HTML,CSS,JS)그래서
난독화와 압축화를 거쳐 배포를 한다
4. Network panel
ALL, XHR, JS, CSS, IMG..
- XHR :XMl Http request: 브라우저와 서버가 http 통신을 할 때 request전문이 어떻게 구성되어 서버로 전달되는지, 서버로부터 요청에 따른 response결과를 확인할 때 사용한다.
미디어 Js file등 다양하게 페이지를 구성하는 요소들을 볼 수 있고 실제로 다운받는 것도 가능하다.
API
API(API주소. 기분조수로를 말한다)는 다양한 개념이 있으나 XHR형식의 파일로 전달되고 API주소를 크롬에 붙여 실행하면 응답 확인이 가능하다.
EndPoint:기능 단위별 접점으로 원래 정해진 기본 주소에 구체적으로 '특정'데이터를 받기위해 마지막에 붙은 path이다.
항상 JSON형식으로 백엔드에서 넘어오며 프론트에서는 항상 객체 형태로 받는다.
Http request: api.nope.com/v2/categorie?what=1
API: api.nope.com/v2
Endpoint:/categorie?what=1
5. Application Tab
Cookie vs Local Storage vs Session Storage
- Storage : 브라우저의 저장소로 ket&value의 페어형태로 간단한 키와 값을 저장할 수 있다.
-
Local Storage: 로컬스토리지의 데이터는 사용자가 지우지 않는한 계속 브라우저에 남아있으며 데이터의 영구성이 보장된다.
-> 따라서 지속적으로 필요한데이터(자동로그인) UI정보들이 저장되면 좋다 -
Session Storage: 해당 스토리지의 데이터는 윈도우나 브라우저탭을 닫을 경우 제거된다.
-> 잠깐동안 필요한정보 또는 예민한 유저정보(은행사이트의 구체적 정보), 언어선택창의 정보 등 -
Cookie: 만료기한이 있는 키-값 저장소이며 프론트 백엔드 통신시 계쏙 함께 움직인다.
(그래서 용량이 작을 수 밖에없다)
-> 서비스 직접적이지 않은 데이터등으로 이벤트팝업, 서비스약관동의 유무등을 저장하면 좋다.
