- 개발자 도구는 브라우저에 제공하는 하나의 도구(tool)입니다.
(Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구. etc) - 웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와줍니다.
- (특히 프론트엔드 개발자는 개발자 도구를 계속 켜놓고 작업하는 경우가 많습니다!)
- 개발자 도구에는 여러 개의 panel(tab)이 존재합니다.
1. Elements panel
- 웹 페이지의 구성 (DOM)
- 구성요소의 스타일 속성 (CSS)
- CSS 수정, UI 수정 ...
HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널입니다.
DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있습니다.
💡 웹 페이지의 구조를 눈으로 파악 & 조작할 수 있다.
변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인 할 수 있다.
Styles 부분의 순서가 의미하는 것은?
- 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능
- 가장 상단부터 css 파일의 우선 순위(구체적 >>> 추상적)에 따른 순서
- cf)
CSS Specificity- inline style > id > class > tag
밑줄이 생긴 이유는?
우선순위가 밀려서 적용이 안된것!!
user agent stylesheet 란?
- 브라우저의 기본 스타일 값을 의미. 브라우저 마다 스타일 기본값이 다름.
- Chrome, Safari, IE 등 브라우저의 종류에 따라 기본적으로 설정되어 있는 속성 값이 다르기 때문에 개발 시작 단계에서
reset.css,normalize.css파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작. >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능
브라우저의 기본 스타일 값을 모두 초기화 시키기는 css파일
👉 reset.css 👉 normalize.css
normalize가 reset보다 약간의 디자인적 요소가 되어있음.
2. Console panel
- 자바스크립트 코드 즉시 실행 / 디버깅
- console은 객체
(console 객체에는 log 메소드를 포함한 다양한 메소드가 존재합니다.)
console.log() 실제 활용 예시
- 백엔드에서 보내주는 response(ex. 에러 메세지, status 코드)도 아래 예시와 같이
console.log를 활용해 확인 가능하다.
⭐️ 그렇기 때문에 백엔드에서는 상황을 명확하게 알려주는 response 메세지와 적절한 status code를 전달하는 것이 중요합니다!
💡 화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?
개발자 도구에서 console 설정에서 Preserve log를 눌러주면 된다.
콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
console.clear();
"Preserve log"를 누른 상태로 console.clear();하면 실행이 되지 않는다.
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
-
Storage : 브라우저의 저장소
Local Storage
로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.
로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장한다.
ex ) 자동 로그인 저장 , 비회원 장바구니 카트 담기...
Local Storage 특징
- http요청에서 데이터를 주고 받지 않고 Local Storage를 이용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 역폭을의 양을 줄일 수 있다.
- 데이터가 유저의 로컬 디스크에 저장되어 있기때문에 인터넷이 끊어져도 데이터가 삭제되거나 지워지지 않기 때문이다.
- Local Storage의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. ( 데이터의 영구성이 보장된다 )
- Local Storage는 검색어를 유지하여 사용자가 관심있어할 정보를 띄울 때 UI 정보들을 저장하는 곳으로 사용할 수 있다.
- Key-Value 페어의 객체 형태로 데이터 저장.
Local Storage 한계
- 브라우저 저장소이기에 클라이언트 사이드이며 쉽게 해킹당할 수 있다. 따라서 사용자 정보(비밀번호 등)를 이곳에 저장하여서는 안된다. 서비스의 특성이나 기획에 맞게 데이터를 처리해야 한다.
XSS(Cross-Site Scripting) 이란 웹 애플리케이션에서 일어나는 취약점으로 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법입니다.
대부분 사용자가 글을 쓰고 읽을 수 있는 게시판에 많이 발생하지만, 사용자의 입력 값을 웹 페이지에 보여주는 곳에서도 발생합니다.
-
Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.
-
Cookie : 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.
Cookie와 Local Storage 차이점:
쿠키의 많은 사용 방법들은 로컬스토리지의 사용으로 대체가능하다.
쿠키와 로컬스토리지의 차이점은 http요청에서 데이터를 주고 받을 필요가 없다는점
Local Storage, Session Storage, Cookie 활용 예시
:: 어떤 데이터를 어디에 저장하면 좋을까?
- Local Storage
- 지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
- UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지) - Session Storage :
- 잠깐 동안 필요한 정보
- ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택 - Cookie
- 서비스 직접적이지 않은 데이터
- 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.
❗️ 비밀번호와 같은 중요정보는 스토리지에 저장하면 위험합니다. 로컬스토리지나 세션스토리지는 클라이언트 사이드 이기 때문에 쉽게 해킹당할 수 있기 때문입니다. 사이트/서비스의 특성, 회사의 방침에 따라 user data 를 어떻게 처리 하는지 전부 다르기 때문에 서비스 특성이나 기획에 맞게 적절하게 처리합니다.
Local Storage 에 특정 데이터를 저장하고 가져오는 방법
- 데이터 저장
localStorage.setItem("key", "value")sessionStorage.setItem("key", "value")setcookie("key", "value", "지속시간 (초단위)")
- 데이터 호출
localStorage.getItem("key")sessionStorage.getItem("key")document.cookie
- 기타 메소드
- 외에도
removeItem,clear등등의 공통 메소드 존재
- 외에도
