개발자 도구
- 개발자 도구는 브라우저에 제공하는 하나의 도구(tool)이다.
(Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구. etc)- 웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와준다.
- 단축키
f12맥 :command+option+I
✨1. element 패널
- HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널
- DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있다. 즉, 스타일 검사 및 편집이 가능하다.
- 변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인 가능하다.
1.1. html
ctrl + f 를 눌러서 찾길 원하는 태그를 입력하면 그 개수와 위치 정보를 알 수 있다.
1.2. CSS
1.2.1. element-style
element-style {
하나의 요소의 스타일을 바꾸어줄때 작성
}
1.2.2. Styles 부분의 순서가 의미하는 것은?
- 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능하다.
- 가장 상단부터 css 파일의 우선 순위(구체적 >>> 추상적)에 따른 순서에 따른다.
- cf)
CSS Specificity- inline style > id > class > tag
1.2.3. user agent stylesheet 란?
- 브라우저의 기본 스타일 값이다. 각 브라우저 마다 스타일 기본값이 다르다.
- Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서 reset 값을 주어 기본 스타일 값을 초기화 시키고 작업한다.
- cf)
reset.css혹은normalize.css파일 - 브라우저의 종류에 상관 없이 동일한 화면 출력 가능하다.
✨2. console 패널
- js 가 돌아가는 환경이다.
- js를 즉시 실행하여 test 할 수 있다.
- js를 확인해야 할 때는 console 패널을 열어서 확인하자
(vs code 열지말고 코드 그대로 입력해서 console로 확인하는 습관 기르기) - 줄바꿈은
shift+enter - 개발은 속도전이다. 손을 움직여서 바로 확인하는 습관을 기르자. ( 눈으로 보지말고..!!👀)
2.1. console 객체
console은 객체이다.console객체에는log메소드를 포함한 다양한 메소드가 존재한다.
console.log() 실제 활용 예시
- 프론트엔드의 경우 실제로 디버깅 시 다른 도구를 사용하는 것보다
console.log를 활용한다. - 백엔드에서 보내주는 response(ex. 에러 메세지, status 코드)도
console.log를 활용해 확인 가능하다. - ✨ 그렇기 때문에 백엔드에서는 상황을 명확하게 알려주는 response 메세지와 적절한 status code를 전달하는 것은 매우 중요하다!
3. Sources 패널
- 폴더 구조를 가지고 있다.
3.1 디버깅
- 디버깅 : 어떤 에러가 났을 때, 문제가 무엇인지 파악을 하고 그것을 수정하는 것이다.
- 디버거(라인 클릭) 하면 해당 라인 부터 코드부터 작동하지 않는다.
(아래 파란색으로 표시된 부분으로 디버거 할 수 있다.)
유의사항
코드 압축화, 난독화 하지 않으면 개인 정보 유출 높으니 유의하여 개발하자.
✨4. Network
4.1 기능
- http 네트워크 통신 확인
- API 크롤링, 페이지 로딩 성능 테스트
- 이미지, 영상 등의 소스 (mock data 활용)
즉, 통신하고 있는 내용을 모두 보여준다고 생각하면 된다.
4.2 종류
- 종류 : All, XHR, JS, CSS, Img, Media
-
XHR
브라우저와 서버가 HTTP 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용한다.
Network Pannel에서는 XHR이 가장 중요하다. 왜냐하면 프론트에서 백으로 API 호출한 URL 확인 가능허기 때문에. 함께 협업할 때 소통할 수 있는 키라고 생각한다. XHR을 통하여 호출할때 어디서 문제인지 알 수 있기 때문이다.
항상 서버 통신에서 문제가 발생한다면, Network Pannel을 열어서 해더, 프리뷰를 보고 통신이 제대로 되었는지 통신을 제대로했는지, 응답을 제대로 했는지 확인하는 습관을 기르자.
- JS, CSS, Img, Media
다른 탭들은 문자 그대로 전달된 JS, CSS, Img, Media를 보여준다.
✨5. Application
5.1. Application 패널의 기능
- 브라우저 저장소
- Local storage, Session Storage, Cookie 탭이 있다.
- Storage : 브라우저의 저장소
5.2. Local storage, Session Storage, Cookie
1. Local Storage
로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터가 저장된다.
2. Session Storage
세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장된다.
3. Cookie
시간 제한 설정 가능하다. 용량이 작을 수 밖에 없다. 쿠키는 프론트-백엔드 통신과 관련이 있다. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분)한다. 텍스트 타입이라 문자열만 저장한다.
5.3 Local Storage, Session Storage, Cookie 활용 예시
어떤 데이터를 어디에 저장하면 좋을지에 대한 고민이 필요하다.
1. Local Storage
- 지속적으로 필요한 데이터(data persistant)
- UI 정보
2. Session Storage
- 짧은 시간 동안 필요한 정보
- 보안이 중요한 정보, specific한 유저 정보, 언어 선택
3. Cookie
- 서비스 직접적이지 않은 데이터
- 오늘만 하는 이벤트 팝업, 서비스 약관에 동의 등
❗️ 비밀번호와 같은 중요정보는 스토리지에 저장하면 위험하다. 로컬스토리지나 세션스토리지는 클라이언트 사이드이기 때문에 쉽게 해킹당할 수 있기 때문이다.
5.4. Local Storage 에 특정 데이터를 저장하고 가져오는 방법
- 데이터 저장
localStorage.setItem("key", "value")
sessionStorage.setItem("key", "value")
setcookie("key", "value", "지속시간 (초단위)") - 데이터 호출
localStorage.getItem("key")
sessionStorage.getItem("key")
document.cookie - 기타 메소드
외에도removeItem,clear등등의 공통 메소드 존재한다.
