개발자 도구에 있는 다양한 panel(tab)의 종류와 기능 파악
Elements패널을 통해 웹 페이지 구성과 구성 요소들의 스타일 확인Console패널을 통해 자바스크립트 코드를 브라우저에서 즉시 실행Network패널을 통해 네트워크 상으로 주고 받는 데이터 확인Application패널을 통해 브라우저의 저장소에 담긴 데이터 확인
0. 개발자 도구란?
-
개발자 도구는 브라우저에 제공하는 하나의 도구(tool)
- ex. Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구 등
-
웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와줌
1. Elements panel
Elements패널의 기능은?
- HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널
- DOM(웹 페이지의 구성)과 CSS(구성요소의 스타일 속성)를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있음
- 변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인 할 수 있음
Styles 부분의 순서가 의미하는 것은?
- 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능
- 가장 상단부터 css 파일의
우선 순위에 따른 순서
(참고)CSS Specificity- inline style > id > class > tag
user agent stylesheet 란?
- 브라우저의 기본 스타일 값을 의미. 브라우저 마다 스타일 기본값이 다름
- Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서
reset.css혹은normalize.css파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작
- 브라우저의 종류에 상관 없이 동일한 화면 출력 가능
2. Console panel
Console패널의 기능은?
- 자바스크립트 코드 즉시 실행
- 디버깅
console 객체
console은 객체console객체에는log메소드를 포함한 다양한 메소드가 존재
console.log() 실제 활용 예시
- 프론트엔드의 경우 실제로 디버깅 시 다른 도구를 사용하는 것보다
console.log를 활용하는 경우가 대부분 - 백엔드에서 보내주는 response(ex. 에러 메세지, status 코드)도
console.log를 활용해 확인 가능 - 따라서, 백엔드에서는 상황을 명확하게 알려주는
response 메세지와 적절한status code를 전달하는 것이 중요
// 백엔드 API와 통신하는 fetch 함수
fetch('http://localhost:8000/login/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
'id': 'kim',
'password': '1234'
})
})
.then(response => response.json())
.then(response => {
console.log(response) // 백엔드에서 보내준 response를 console.log를 통해 먼저 확인
// 예시 1) token이 있는 경우
if (response.token) {
localStorage.setItem('wtw-token', response.token);
}
// 예시 2) message가 있는 경우
if (response.message === "valid user"){
alert("로그인에 성공하셨습니다")
}
})3. Network panel
Network패널의 기능은?
- HTTP 네트워크 통신 확인
- API 크롤링, 페이지 로딩 성능 테스트
- 이미지, 영상 등의 소스 (mock data 활용)
내부 살펴보기
- All, XHR, JS, CSS, Img, Media 등
-XHR(Xml(Extensible Markup Language) Http Request) : 브라우저와 서버가 HTTP 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용
4. Application panel
Application패널의 기능은?
- 브라우저 저장소
- Local storage, Session Storage, Cookie
Local Storage, Session Storage, Cookie 차이점
- Storage : 브라우저의 저장소
<주의>
- 비밀번호와 같은 중요정보는 스토리지에 저장하면 위험
로컬스토리지나 세션스토리지는 클라이언트 사이드 이기 때문에 쉽게 해킹당할 수 있음
- Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있음
즉, 데이터의 영구성이 보장됨
Key-Value 페어의 객체 형태로 데이터 저장
<활용예시>
- 지속적으로 필요한 데이터(data persistant)
(ex. ID 저장, 비회원 카트)- UI 정보들
(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)
- Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거됨
Key-Value 페어의 객체 형태로 데이터 저장
<활용예시>
- 잠깐 동안 필요한 정보
- 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택
- Cookie : 시간 제한 설정 가능
쿠키는 프론트-백엔드 통신과 관련이 있음(용량이 작을 수 밖에 없음)
Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분)
텍스트 타입이라 문자열만 저장
<활용예시>
- 서비스 직접적이지 않은 데이터
- 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등
<참고>
Local Storage 에 특정 데이터를 저장하고 가져오는 방법
- 데이터 저장
localStorage.setItem("key", "value")sessionStorage.setItem("key", "value")setcookie("key", "value", "지속시간 (초단위)")
- 데이터 호출
localStorage.getItem("key")sessionStorage.getItem("key")document.cookie
- 기타 메소드
- 외에도
removeItem,clear등등의 공통 메소드 존재
- 외에도
<출처> wecode(코딩 부트캠프) 세션
