1. 개발자 도구란?

말 그대로 개발자들이 쓰는 도구를 뜻한다.프론트엔드 개발하는데 도움이 될만한 여러가지 기능을 제공한다.개발자 도구는 각각의 브라우저가 기본적으로 제공하며 별도의 설치가 필요없다.프론트엔드 개발자의 경우 업무를 보는 하루 종일 웹페이지 한쪽에 개발자 도구를 띄워놓고 개발을 할 만큼 굉장히 필수적이고, 백엔드 개발자의 경우 데이터를 크롤링 할 때 태그를 분석해야하므로 사용할 줄 알아야한다. 윈도우 f12 ctrl + shift + i 맥 커맨드 옵션 i

Application 패널의 기능은?

브라우저 저장소의 기능을 담당한다. 현재 로딩된 웹 페이지에서 사용된 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 열람할 수 있는 패널이다.
웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키,어플리케이션 캐시, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사한다.
스토리지, DB 및 캐시 검사 및 관리
쿠키 검사 및 삭제
리소스 검사

Local Storage, Session Storage, Cookie 차이점은?

공통 사항 : 스토리지는 브라우저의 저장소. 값의 성격에 따라 다르게 사용이 된다. 두 스토리지 모두 html5 에서 새로운 저장 옵션으로 도입이 된 개념이다. 그 전에는 쿠키라는 저장소를 사용했었다. key - value 페어 객체 형태로 데이터가 저장된다.
로컬 스토리지 : 사용자가 지우지 않는 이상 데이터의 영구성이 보장된다.허용 용량이 가장 크다(10mb).
세션 스토리지 : 윈도우나 브라우저 탭을 닫을 경우 사라진다. 즉 데이터의 영구성을 보장하지 않는다.
쿠키 : 4kb까지만 저장이 가능하다. 지속 시간을 설정할 수 있다(만료 기간 설정 가능). 직접적이지 않는 데이터를 저장할 때 사용된다. 쿠키는 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등, 다양한 방법으로 사용이 되지만 문자열만 저장할 수 있다는 제한이 있다. 스토리지 개념 도입 이전 저장소로 사용이 되던 것이어서 여러 가지 성격이 섞여 있는 것으로 생각이 된다.

쿠키는 작은 데이터 파일으로, 클라이언트가 서버에 보낸 요청을 서버가 확인하고 나서 쿠키를 추가해 응답한다. 이후 클라이언트가 서버에 요청을 보낼 때마다 쿠키를 포함하여 통신한다. 용량은 작지만 매 http 요청마다 담겨 유효성 확인의 대상이 되니 서버에 부담을 준다.
유효기간을 설정할 수 있다. 텍스트 타입이라 문자열만 저장할 수 있다. 개당 4kb, 최대 300개까지 저장할 수 있다

쿠키는 매번 서버로 전송된다.
웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다

Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?

로컬 : 저장하려는 데이터의 성격이 브라우저를 사용하면서 지속적으로 사용해야 하는 종류라면 로컬 데이터 / 자동 로그인 정보 / 동영상 시청기록
세션 : 브라우저를 닫을 경우 사라지니 영구성을 보장하지 않아도 되는 데이터 종류 / 일회성 로그인 / 잠깐 동안 필요한 정보 / 비로그인 장바구니 기능 / 휴대폰인증
쿠키 : Cookie는 사이트에서 로그인 상태를 유지하고 사이트 환경설정을 기억하는 용도로 사용 / 팝업창에서 “오늘 하루 동안 보지 않기“, “일주일 동안 보지 않기“같은 기능에 필요.

처리 예시
로그인 후 작성하는 form 형식이 들어있는 페이지를 가정한다.

1. 매번 새로 로그인하는 게 싫다면 자동 로그인 기능이 필요하고, user token 등을 local storage에 저장해야만 나중에 브라우저 창을 새로이 열었을 때도 로그인 상태가 유지된다.

2. form에 작성한 정보는 다 입력한 뒤 button click event 등으로 서버에 넘어갈 예정이라면 그 전까진 전송이 불필요하다. 하지만 탭을 새로고침 하거나 켠 채로 냅두는 동안 작성해둔 정보가 날아가면 안 된다. 이런 정보는 session storage에 저장해야 된다.

3. form 페이지에 오늘까지만 하는 이벤트 팝업을 띄우고 싶다. 그러면 쿠키의 유효 기간 설정을 통해 필요한 기간 동안만 정보를 전달할 수 있다.

Local Storage 에 특정 데이터를 저장하고 가져오는 방법

localStorage.getItem(key)
localStorage.getItem(key)는 key의 데이터를 조회한다.
localStorage.setItem(key, value)
localStorage.setItem(key, value)는 key에 저장되어있는 내용을 value로 설정한다.
localStorage.clear()
localStorage.clear()는 스토리지 전체를 비워줍니다.