내가만든 Cookie~~

✅ HTTP 쿠키(웹 쿠키, 브라우저 쿠키)

• 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각
• 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재요청 시 Request Header에 저장된 데이터를 함께 서버에 전송
• 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용
  => 이를 이용하면 사용자의 로그인 상태를 유지
  => 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문
• 클라이언트(브라우저)에 300개 까지 쿠키 저장 가능,
• 하나의 도메인당 20개의 값까지 가질 수 있으며,
• 하나의 쿠키값은 4kb까지 저장 가능

🔸 쿠키의 목적

1. 세션 관리(Session management)
   => 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리

2. 개인화(Personalization)
   => 사용자 선호, 테마 등의 세팅

3. 트래킹(Tracking)
   => 사용자 행동을 기록하고 분석하는 용도

• 과거에는 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용
• 쿠키를 사용하는 게 데이터를 클라이언트 측에 저장할 수 있는 유일한 방법이었을 때는 이 방법이 타당
• but 지금은 modern storage APIs를 사용해 정보를 저장하는 걸 권장
• 모든 요청마다 쿠키가 함께 전송되기 때문에, (특히 mobile data connections에서) 성능이 떨어지는 원인이 될 수 있음

🔸 쿠키를 사용해보쟈

• HTTP 요청을 수신할 때, 서버는 응답과 함께 Set-Cookie (en-US) 헤더를 전송할 수 있음
• 쿠키는 보통 브라우저에 의해 저장되며,
• 그 후 쿠키는 같은 서버에 의해 만들어진 요청(Request)들의 Cookie HTTP 헤더안에 포함되어 전송됨
• 만료일 혹은 지속시간(duration)도 명시될 수 있고, 만료된 쿠키는 더이상 보내지지 않음
• 추가적으로, 특정 도메인 혹은 경로 제한을 설정할 수 있음

🔹 In JavaScript

• 생성
  • 쿠키는 이름-값 쌍의 형태
  • document.cookie는 접근자 속성
  • 새로운 쿠키가 기존 쿠키를 덮어쓰지 않음

  document.cookie = "name=doyoung";

• 변경

  document.cookie = "name=Yu";

🔹 구성요소

• expires: 쿠키 만료 날짜를 설정, 설정하지 않으면 브라우저를 닫을 때 쿠키가 만료
• max-age: 쿠키가 생성된 시간부터 시작하여 만료되어야 하는 시간(초)을 설정
• path: 쿠키에 접근할 수 있는 절대 경로를 설정
• secure: 쿠키가 https를 통해서만 전송
• samesite: 쿠키가 다른 웹 사이트에 전송되지 않도록 함

🔸 Secure & HttpOnly

🔹 Secure Cookie

• Secure 쿠키는 HTTPS 프로토콜 상에서 암호화된(encrypted ) 요청일 경우에만 전송

🔹HttpOnly

• Cross-site 스크립팅 (XSS (en-US)) 공격을 방지
  - XSS(Cross Site Scripting): 서버 측에서 제공되는 Script가 아닌 권한이 없는 사용자가 웹사이트에 Script를 삽입하여 의도치 않은 동작을 일으키는 공격
• HttpOnly쿠키는 JavaScript의 Document.cookie (en-US) API에 접근 불가, 서버에 전송만 됨
• 간단히 말해, 클라이언트 측에서 HTTP통신 외에는 쿠키에 접근이 불가하도록 하는 것.

🤔 session은요?

• 쿠키와 달리 사용자 정보를 서버 측에서 관리
• 서버에서 클라이언트를 구분하기 위해 세션 ID 부여해 클라이언트(대게 쿠키 이용)에 저장
• 웹 브라우저가 서버에 접속해서 일반적으로 브라우저를 종료할 때까지 인증상태 유지

🤔🤔 Web Storage는요?

• 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소
• 간단한 Key-Value 스토리지 형태
• 쿠키와 달리 자동 전송의 위험성이 없음
• 쿠키보다 큰 저쟝 용량 지원(모바일 2.5MB, 데스크탑 5~10MB)
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음
• 오직 문자형(string) 데이터 타입만 지원

🔹 로컬 스토리지(localStorage)

• 사용자가 동일한 브라우저에서, 데이터를 지우지 않는 이상 브라우저나 OS를 종료해도 계속 브라우저에 남아있음
• 지속적으로 필요한 데이터 저장(자동 로그인 등)

🔹 세션 스토리지(sessionStorage)

• 데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거
• 일시적으로 필요한 데이터 저장(일회성 로그인 정보, 입력폼 저장 등)