이번 내용은 너무 어렵다...
실제로 많이 사용해보지 못한 것들이 많아서 이해하는 것이 여간 어려운 것이 아니다...
많은 내용들을 찾아보다가
너무 잘 설명한 다른 블로그를 찾을 수 있었다.

🔗 Leesu님의 velog

이제 TIL 형식으로 학습해보자...
너무 어려워 ~

TIL로 이해하기

HTTP 프로토콜이란?

http 프로토콜에 대해서 간단하게 알아보자.
본격적으로 들어가기 전에 이해하는데 큰 도움을 줄거야!

기본적으로 HTTP 프로토콜의 환경은 비연결성지향(connectionless), 무상태(stateless)한 특성을 가지기 때문에 요청만으로는 서버는 클라이언트를 구별할 수 없다.

여기서 비연결성지향(connectionless)란?

• HTTP는 먼저 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성이다.

즉, 여러 요청을 보낸다면 응답하고 끊고, 응답하고 끊고 한다는 것!
계속 연결되어 있지 않다!!!

• 무상태(stateless)
  연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다.

즉, 비연결지향성로 인해서 응답 후 연결이 끊어지고 그 순간 어떠한 상태 정보도 갖지 않는 것이다.
클라이언트의 로그인 정보나 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화되는 것!
"일 다했으면 갈길가~, 난 너가 누군지 몰라~, 다음에 만나면 새로운 사람!"

이러한 문제점을 해결하기 위해 데이터 저장에 사용되는 것이 쿠키,세션,웹스토리지 이다.

---

쿠키

• 클라이언트(브라우저) 로컬에 저장되는 키와 값 형태의 작은 파일로, 이름, 값, 만료시간, 경로정보가 들어있다.

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

• 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있으며, 하나의 쿠키 값은 4KB 까지 저장이 가능하다.

• Response Header 에 set-cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.

• 만들어진 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 사이에 Request Header 를 넣어서 자동으로 서버에 전송한다.

• 주로 아래 세 가지 목적을 위해 사용된다.

  • 세션관리: 서버에 저장해야할 로그인, 장바구니, 게임 스코어 등의 정보 관리
  • 사용자 맞춤: 사용자가 선호하는 옵션이나 테마 등의 세팅
  • 사용자 추적: 사용자의 행동을 분석하고 기록하는 용도

세션

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

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

• 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정 가능하다.

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

클라이언트가 Request 를 보내면 Response 에 set-cookie 를 통해 클라이언트의 유일한 ID 값을 생성해 부여하고,
이를 통해 사용자 정보는 안전한 서버에 존재하며 클라이언트와 서버간에는 id 값만을 전달해 보안 위협을 감소시켜 준다.

쿠기와 세션의 차이점

항목	쿠키	세션
저장 위치	클라이언트(브라우저)	서버
보안	스니핑 위험, 상대적 낮음	쿠기를 이용한 ID만 저장 -> 상대적 높음
라이프사이클	브라우저를 종료해도 만료기간이 남으면 존재	브라우저 종료 시 만료기간에 상관없이 종료
속도	상대적 빠름	상대적 느림

---

웹 스토리지

• 클라이언트(브라우저)에 데이터를 저장할 수 있도록 HTML5 부터 추가된 저장소
• 간단한 Key-Value 스토리지 형태
• 오리진(Origin)(도메인, 프로토콜, 포트) 단위로 접근이 제한되는 특성 덕분에 CSRF 로부터 안전
• 쿠키보다 큰 저장 용량 지원(모바일 2.5MB, 데스크탑 5~10MB)
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음(자바스크립트 내에서만 수행가능)
• 오직 문자형(String) 데이터 타입만 지원

로컬 스토리지

• 사용자각 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있다 => 영구성
• 단, 동일한 브라우저를 사용할 때만 해당
• 지속적으로 필요한 데이터 저장(자동 로그인 등)
• 예시

localStorage.setItem('test', 1);

설정 후 브라우저를 닫고 열어보자. 다른 창에서도 본 페이지를 열어봐도 된다. 그럼 아래와 같은 결과가 나온다.

alert( localStorage.getItem('test') ); // 1

오리진(도메인, 포트, 프로토콜)만 같다면 URL 경로는 달라도 동일한 결과를 볼 수 있다.
localStorage는 동일한 오리진을 가진 모든 창에서 공유되기 때문입니다. 따라서 한 창에 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다.

세션 스토리지

• 데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에 윈도우나 브라우저 탭을 닫을 경우 제거된다.
  (현재 떠 있는 탭 내에서만 유지된다)
• 따라서 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 제거.
• 일시적으로 필요한 데이터 저장(일회성 로그인 정보, 입력폼 저장 등)
• 예시

sessionStorage.setItem('test', 1);

이제 페이지를 새로 고침 해봐도 데이터가 여전히 남아있는 것을 볼 수 있다.

alert( sessionStorage.getItem('test') ); // 새로 고침 후: 1

하지만 다른 탭에서 본 페이지를 열고 바로 위 예시만 실행해보면 '아무것도 찾을 수 없다’는 뜻을 가진 null이 반환된다.

이렇게 sessionStorage는 오리진뿐만 아니라 브라우저 탭에도 종속되어 있다. 이런 제약 때문에 sessionStorage는 잘 사용되지 않는다.

왜 사용함???

쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는걸까?

• 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다.
  이러한 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있으며 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다.
• 쿠키와 또 다른 점은 위에 적혀있 듯 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것이다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서만 수행된다.