[TIL] 개발자도구

이나현·2021년 7월 9일

개발지식

목록 보기

6/14

개발자도구

해당 브라우저 회사에서 만듦

Elements panal

기능

html 코드를 분석하고 수정할 수 있는 도구 패널
dom과 css 를 통해 직접 수정 가능

style 부분의 순서

html > ID > Class > tag 순서
css 속성에 밑줄이 그어져있다면, 우선 순위를 빼앗긴 것
user agent stylesheet 기본 브라우저 적용

Console panal

내가 의도한 값이 잘 나오는 가 확인하기 위해서 console 사용

기능

javascript가 연동
javaScript가 돌아가는 대로 로그되는 메세지를 볼 수 있음
javascript와 상호작용을 하며 확인할 수 있음

그 외

새로고침 시 기록했던 내용이 사라지는데, setting 부분 > console >'preserve log ~~' 누르면 됌
console 클리어: 윈도우 - 'ctrl + l'
반환되는 값이 있으면 return/ 없으면 undefined

network panal

웹사이트 내 정보나 리소스를 보여주는 패널
프로젝트 할 때 빈번하게 체크할 수 있음
프론트와 백의 데이터 전달에 확인을 할 수 있는 패널
=> status code에서 확인할 수 있음
(200: 성공/ 400: 프론트 잘못 / 500: 서버단 잘못)
- 네트워크 탭 디버깅 해보면 network pana을 꼭 이용하기
XHR: 프론프에서 백앤드 호출 /응답 등이 다 보임 (header와 preview에러 확인이 가능)
인증정보 등 문제가 생길 때 네트워크 패널 중 header에서 확인!

application panal

storage: 정보들이 저장되는 공간과 확인하는 패널
프로젝트 시, application을 많이 사용할 예정

1) local storage : 로그인 예시로 계속 저장
2) session storage: 창을 끄고 키면 나가져있는 로그인이 필요할 때
3) cookie: http only를 사용하면 자바스크립트로 접근이 어려워서 보안에 안전함

=> 보안과 관련한 이슈는 나중에!
1. Application 패널의 기능은?

브라우저에서 저장할 저장소
storage 구성
0) login - user 정보 저장
1) cookies
2) session storage
3) local storage

Local Storage, Session Storage, Cookie 차이점? & 활용
0) Storage: 브라우저 저장소
1) Local Storage(장기기억) : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계혹 브라우저에 남아있다. 즉 데이터의 영구성이 보장된다. Key-value 페어의 객체 형태로 데이터 저장
=> 활용

지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
UI 정보들( ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아를 검색하면 그대로 유지)
=> 데이터 저장법
위치: window.localStorage
방법: 키 - 밸류 (localStorage.setItem("key", "value"))
값: 문자열, 불린, 숫자, null, undefined 등 가능 but 모두 문자열로 변환 => 문자열 관련 해결은 json으로 가능
=> 실제
페이지가 생성될 때마다 정보들을 가져옴 (ex. 다른 페이지로 ㅣ동이나 로그인)

2) Session Storage(단기기억): 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어 객체 형태로 데이터 저장
=> 활용
잠깐 동안 필요한 정보
ex. 보안이 중요한 정보(ex. 은행 사이트), specific한 유저 정보, 언어 선택
=> 데이터 저장법
위치: window.sessionStorage (데이터 영구 보관 x)
방법: 키 - 밸류 (localStorage.setItem("key", "value"))
local 스토리지와 모든 메소드가 비슷
=> 서버로 보내는 세션 EX) tracking

3) Cookie: 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있다. 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.
=> 활용
서비스, 직접적이지 않은 데이터
오늘만 하는 이벤트 팝업, 서비스 약관 동의 등
=> 오늘 보지 않겠어 하면, 프론트에서 쿠키에 저장