오늘은 몸이 너무 찌뿌둥한 나머지 침대에서 늦게 일어나 헬스장을 가지 못했다.
다음주 평일에는 무슨 일이 있어도 아침 운동 후 출근하겠다.
개발자 도구
개발자 도구는 브라우저에 제공하는 하나의 도구이다.
(Chrome, IE, Safari 등 다양한 브라우저에 존재하며 특히 프론트엔드 개발자는 개발자 도구를 켜놓고 작업하는 경우가 많음!)
개발자 도구를 여는 단축키로는 맥북의 경우 cmd + option + i
elements panel을 열때는 cmd + option + c
console panel을 열때는 cmd + option + j
개발자 도구에는 여러 개의 panel이 존재하며 가장 자주 사용되는 panel 4개를 살펴보겠다.(Chrome 기준)
Elements panel
웹 페이지의 구성(DOM)
구성요소의 스타일 속성(CSS)
CSS 수정, UI 수정 등..
HTML 코드를 분석, 실시간으로 수정할 수 있는 도구 패널이며 DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트할 수 있다.
Styles 부분의 순서가 의미하는 것은?
- 하나의 요소에 여러 개의 CSS 파일에서 스타일 적용 가능
- 가장 상단부터 CSS 파일의 우선 순위(구체적 >>> 추상적)에 따른 순서
user agent stylesheet란?
브라우저의 기본 스타일 값을 의미하며, 브라우저마다 스타일 기본값이 다름.
값이 다르기 때문에 개발 시작 단계에서 reset.css 혹은 normalize.css 파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작
reset.css 예시
->
reset.css를 웹페이지의 css에 바로 붙여넣기 하는 것보단 @import "reset.css"; 이런식으로 reset.css파일을 별도로 만든다음 reset.css 파일의 경로만 추가하는 식으로 운영하면 좀 더 깔끔한 CSS 환경이 된다.
Console panel
자바스크립트 코드 즉시 실행
디버깅
console은 객체!
console 객체에는 log 메소드를 포함한 다양한 메소드가 존재
참고 https://developer.mozilla.org/ko/docs/Web/API/Console
특히 프론트엔드의 경우 실제로 디버깅 시 다른 도구를 사용하는 것보다 console.log를 활용하는 경우가 대부분
Network panel
http 네트워크 통신 확인
API 크롤링, 페이지 로딩 성능 테스트
이미지, 영상 등의 소스(mock data 활용)
network panel 내부에는 All, XHR, JS, CSS, Img, Media등이 있다.
XHR(Xml(Extensible Markup Language) Http Request)
브라우저와 서버가 HTTP 통신할 때 request 전문이 어떻게 구성되어 서버로 전달되는지, 서버로부터 요청에 따른 response 결과를 확인할 때 사용
Application panel
브라우저 저장소
Local Storage, Session Storage, Cookie
- storage : 브라우저의 저장소
- Local Storage : 데이터의 영구성이 보장, Key-value 페어의 객체 형태로 데이터 저장
- Session Storage : 윈도우나 브라우저의 탭을 닫을 경우 제거, Key-value 페어의 객체 형태로 데이터 저장
- Cookie : 시간 제한 설정 가능, 프론트 - 백엔드 통신과 관련이 있어 용량이 작을 수 밖에 없다. Key-value 페어의 문자열 형태로 저장(세미콜론으로 구분), 텍스트 타입이라 문자열만 저장
활용 예시
Local Storage
- 지속적으로 필요한 데이터(ex. ID 저장)
- UI 정보들(ex. 구글에 검색했던 검색 기록 유지)
Session Storage
- 잠깐 동안 필요한 정보
- 보안이 중요한 정보(ex. 은행 사이트)
Cookie
- 서비스가 직접적이지 않은 데이터
- 오늘만 하는 이벤트 팝업, 서비스 약관 동의 여부
Local Storage에 특정 데이터를 저장하고 가져오는 방법
데이터 저장
- localStorage.setItem("key", "value")
- sessionStorage.setItem("key", "value")
- setcookie("key", "value", "지속시간(초단위)")
데이터 호출
- localStorage.getItem("key")
- sessionStorage.getItem("key")
- document.cookie
기타 메소드
- 외에도 removeItem, clear 등등의 공통 메소드 존재
