🥥 개발자 도구

css 수정 같은 데 많이 쓸 듯

자바에서 제일 많이 쓰는 곳. 코드 실제로 쓰고 수정하기 전에 실험해보는 느낌

통신 속도, 성능 같은 거 볼 때!

4. application panel

어떤 데이터 파일이 어디 저장되어 있는가?

보안 취약

Storage : 브라우저의 저장소

Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.

Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.

Cookie : 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.

쿠키

쿠키는 클라이언트(접속자 pc) 로컬에 저장되는 키와 값이 들어있는 데이터 파일

document.cookie 하면 현재 쿠키 정보가 나옴

사용자 인증이 유효한 시간을 명시할 수 있으며, 만료 시간이 정해지면 브라우저가 종료되어도 인증이 유지됨.

쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.

쿠키 구성

이름(Name) : 각각의 쿠키를 구별하는 데 사용되는 이름
값(Value) : 쿠키의 이름과 관련된 값
유효시간(Expires) : 쿠키의 유지시간
도메인(Domain): 쿠키를 전송할 도메인
경로(Path): 쿠키를 전송할 요청 경로

쿠키의 동작 방식

1. 클라이언트(접속자 pc) 가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 헤더에 쿠키를 포함 시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

쿠키는 언제 사용하는가?

Cookie
서비스 직접적이지 않은 데이터
오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.
서비스 직접적이지 않은 데이터

오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.

• 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
• 쇼핑몰의 장바구니 기능
• 자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크

쿠키는 만료 기한이 있는 키-값 저장소입니다.

서버는 요청 자체만으로는 그 요청이 누구에게서 오는 지 알 수 없기에, 응답을 보낼 수 없음. 이 때 쿠키에 나에 대한 정보를 담아서 서버로 보내면 서버는 쿠키를 읽어서 내가 누군지 파악.
쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송된다. 그래서 만약 4kb 용량 제한을 거의 다 채운 쿠키가 있다면, 요청을 할 때마다 기본 4kb의 데이터를 사용해야함. 4kb 중에는 서버에 필요하지 않은 데이터들도 있음 -> 데이터 낭비

암호화 존재 x -> 사용자 정보 도난 위험

매 HTTP요청마다 포함되어 api호출로 서버에 부담.

바로 그런 데이터들을 이제 로컬 스토리지와 세션 스토리지에 저장한다.

로컬 스토리지와 세션스토리지

쿠키의 단점을 보완해 HTML5에서 '웹스토리지'라는 기술 탄생

웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다.

웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장.

간단한 키와 값을 저장할 수 있습니다. key-value storage의 형태

이 두 저장소의 데이터는 서버로 자동 전송되지 않음.

두 스토리지는 모두 window 객체 안에 들어 있음. Storage객체를 상속받기 때문에 메소드가 공통적으로 존재.
도메인 별 용량 제한도 있음(프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유)
모바일은 2.5mb, 데스크탑은 5mb~10mb라고 생각하시면 됨.
이게 부족하다면 50mb를 기본적으로 저장할 수 있는IndexedDB를 씀.

장점 : 용량이 크다. (약 5Mb, 브라우저마다 차이 존재)
단점 : HTML5를 지원하지 않는 브라우저의 경우 사용 불가

언제 쓰는가?
Local Storage
지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)

Session Storage :
잠깐 동안 필요한 정보
ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택

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

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

기타) 세션 ( Session )

세션 스토리지랑 아예 다른 거 같음 이름만 비슷한 거

세션이란?

유저가 인증을 할 때, 서버는 이 기록을 서버에 저장을 해야합니다. 이를 세션 이라고 부릅니다

세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.

서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지

사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 됨.

동접자 수가 많은 웹 사이트인 경우 서버에 과부하를 주게 되므로 성능 저하의 요인이 됨.

클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는 데 이것이 세션ID.

세션의 동작 방식

• 클라이언트가 서버에 접속 시 세션 ID를 발급.
• 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
• 클라리언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용.
• 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라언트 정보를 가져옴.
• 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답.

​