개발자도구 - Application

Moolbum·2021년 11월 4일
0

공부

목록 보기
2/5
post-thumbnail

Application 패널의 기능은?

브라우저 저장소의 기능을 담당. 즉, 현재 로딩된 웹 페이지에서 사용된 모든 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 검사할 수 있는 패널.

  • 프로그레시브 웹 앱 디버그
  • 스토리지, DB 및 캐시 검사 및 관리
  • 쿠키 검사 및 삭제
  • 리소스 검사

서버와 클라이언트가 통신을 할 때 통신이 연속적으로 이어지지 않고 한 번 통신이 되면 끊어진다. 따라서 서버는 클라이언트가 누구인지 계속 인증을 해줘야 한다. 하지만 그것은 매우 귀찮고 번거로운 일이다. 또한 웹 페이지의 로딩을 느리게 만드는 요인이 되기도 한다. 그런 번거로움을 해결하기 위해 쿠키, 세션스토리지, 로컬 스토리지를 사용한다. 

공통 사항 : 스토리지는 브라우저의 저장소. 값의 성격에 따라 다르게 사용이 된다. 두 스토리지 모두 html5 에서 새로운 저장 옵션으로 도입이 된 개념이다. key - value 페어 객체 형태로 데이터가 저장된다.


Storage : 쿠키의 단점을 보완해서 만든 기술이다, 쿠키보다 보안이 우수하며 용량이 크다 .

Local Storage : 사용자가 지우지 않는 이상 데이터의 영구성이 보장된다. 사용자가 지우지 않는 이상 계속 클라이언트 웹브라우저에 남아있다. storage 3가지 중 허용 용량이 가장 크다(10mb).지속적으로 필요한 정보를 저장하기에 좋다.

Session Storage : 윈도우나 브라우저 탭을 닫을 경우 사라진다. 즉 데이터의 영구성을 보장하지 않는다. 일회성의 데이터

Cookie : 스토리지 개념 도입 이전 저장소로 사용이 되던 것 4kb까지만 저장이 가능하다. 지속 시간을 설정할 수 있다(만료 기간 설정 가능). 직접적이지 않는 데이터를 저장할 때 사용된다. 쿠키는 사이트에서 방문한 페이지를 저장하거나 유저 로그인 정보를 저장하는 등, 다양한 방법으로 사용이 되지만 문자열만 저장할 수 있다는 제한이 있다.


Local Storage : ex) 자동 로그인 정보 / 장바구니
Session Storage : ex) 일회성 로그인 / 잠깐 동안 필요한 정보
Cookie : ex) 3일간 다시 보지 않음 팝업 창

예전에는 토큰을 저장할 곳이 쿠키 밖에 없었지만, 지금은 LocalStorage에도 저장하는 일이 많아졌다. 하지만, LocalStorage는 말 그대로 데이터가 다 남아있으니 보안상 취약해지기 쉽기 때문에 프로젝트 성향에 맞춰 저장 장소는 그때그때 달라져야 한다.

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

setItem 메서드를 이용해 key값과 value값을 지정해주고
getItem 메서드를 이용해 key값을 호출 할 수 있다.

localStorage.setItem("key", "value")
sessionStorage.setItem("key", "value")
setcookie("key", "value", "지속시간 (초단위)")
데이터 호출
localStorage.getItem("key")
sessionStorage.getItem("key")
document.cookie
기타 메소드
외에도 removeItem, clear 등등의 공통 메소드 존재

profile
Junior Front-End Developer 👨‍💻

0개의 댓글