TIL. 개발자도구, 써봤어?

• 썸네일 어떠신가요?ㅋㅋㅋ 자괴감이 들지않나요 제가 그렇습니다. 수많은 온라인 무료 툴중에 가장 많이 쓰이는 것 중 하나는 배워보도록 할까요?? 그 중 하나, 오늘은 바로 개발자도구입니다!!

개발자 도구는 공짜입니다.
아주 강력한 공짜.
말이 좀 이상한데, 4가지 패널이 존재합니다.
웹의 구조를 파악하며,
네트워크를 볼수있고,
명령어(자바스크립트)를 입력하여 수정 보완할 수도있고
저장도 가능해요.
그중 저장이 가능한 패널은 어플리케이션 패널!
자세히 한번 살펴봐요.

💡 Application 패널의 기능

• 현재 로딩된 웹 페이지에서 사용된 리소스를 열람할 수 있는 패널
  (리소스 : 이미지, 스크립트, 데이터)
• 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사
• 로그인과 관련해서 유저정보에 대한 부분에도 많은 부분을 차지하기 때문에 꼭 알아두어야 할 패널

💡 Local Storage, Session Storage, Cookie 차이점

• Local Storage
  : 브라우저의 저장소로 사용자가 데이터를 지우지 않는 이상 브라우저에 계속 남아있다.
  : key-value 페어의 객체 형태로 데이터 저장
• Session Storage
  : 현재 떠 있는 탭이나 브라우저 내에서 유지되며 탭이나 브라우저를 종료하면 데이터는 사라진다.
• Cookie
  : key-value 페어의 문자열 형태로 데이터 저장
  : 시간제한이 설정되어있는 데이터 저장소
  : 프론트-백 통신과 관련이 있어 용량이 작을 수 밖에 없다.

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

• Local Storage
  : 지속적으로 필요한 데이터를 저장 ex) ID저장 등
• Session Storage
  : 잠깐동안 필요한 데이터를 저장 ex) 보안이 중요한 정보(은행사이트) 등
• Cookie
  : 빠른 처리가 필요한 임시 데이터 ex) 광고 팝업 등

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

• 저장
  : localStorage.setItem("key","value")
• 조회
  : localStorage.getItem("key")
• 삭제
  : localStorage.removeItem("key")
• 전체 삭제
  : localStorage.clear()

마지막으로 주의할 점.
한번 배운 것, 익힌 것을 제대로 정리해놓지 않고 넘어가면 나중에 속도를 내야할 때 분명히 다시 돌아와야 합니다. 그건 지금 빨리 정리하는 것이 중요하지 않고 꼼꼼하게 하나씩 씹어넘겨야 한다는 말과 같아요.
빨리 파이썬 문법을 해결하려하지말고 이해하고 넘어가요. 나중에 다시 오기 싫으니까요.