🍪 쿠키(Cookie)

🍪 쿠키(Cookie)란?

브라우저에 저장되는 작은 크기의 문자열 데이터입니다.
웹 서버와 클라이언트(브라우저) 간의 상태 유지를 위한 수단으로 사용됩니다.

📝 쿠키 용도

• 로그인 유지 (자동 로그인 기능)
• 사용자 맞춤 설정 저장 (다크모드 등)
• 장바구니 정보 유지
• 방문 횟수 기록

---

🧾 쿠키 구성 요소

속성	설명
Name	쿠키의 키 (예: user)
Value	쿠키의 값 (예: wonji)
Domain	쿠키가 유효한 도메인
Path	쿠키가 접근 가능한 경로
Expires / Max-Age	쿠키의 만료일 / 유효 기간
HttpOnly	자바스크립트에서 접근 불가능, 보안 강화용
Secure	HTTPS 환경에서만 전송 가능

---

✍️ 쿠키 사용 방법

1️⃣ 쿠키 쓰기

🔹 클라이언트 측 쿠키 생성 (JavaScript)

document.cookie = "name=wonji; path=/; max-age=3600";

🔹 서버 측 쿠키 생성 (예시)

response.setHeader("Set-Cookie", "name=wonji; path=/; max-age=3600");

서버에서 Set-Cookie 헤더를 사용하여 클라이언트에 쿠키 전송

🔍 쿠키 접근 (읽기)

document.cookie

현재 페이지에서 사용 가능한 모든 쿠키를 문자열 형태로 반환합니다.

❌ 쿠키 삭제

// 쿠키 만료시켜서 삭제
document.cookie = "max-age=0"

max-age=0 또는 expires=과거 날짜로 설정하면 해당 쿠키 삭제됨

📤 쿠키 전송 (요청 시 포함)

// 쿠키를 포함하여 서버에 요청 전송
fetch(URL,{
  credentials : 'include';
});

credentials: 'include' 설정 시, 쿠키를 요청 헤더에 자동으로 포함

---

📍 쿠키 vs 세션 차이점

항목	쿠키 (Cookie)	세션 (Session)
저장 위치	클라이언트(브라우저)	서버
보안성	낮음 (브라우저에 저장되므로 노출 위험 있음)	비교적 높음 (서버에서 관리)
만료 시점	클라이언트가 설정한 expires / max-age 기준	서버에서 설정한 시간 또는 브라우저 종료 시
저장 용량	약 4KB 제한	용량 제한 없음 (서버 용량에 따라 다름)
속도	서버에 접근하지 않으므로 빠름	서버에 접근해야 하므로 비교적 느림
사용 목적	로그인 유지, 사용자 설정, 장바구니 등	로그인 상태 유지, 사용자 인증 정보 저장 등
유지 방식	클라이언트가 모든 요청에 쿠키를 자동 전송	클라이언트는 세션 ID만 저장하고 서버가 데이터 보관

💡 일반적으로 보안이 중요한 정보는 세션,
간단한 사용자 설정 정보는 쿠키에 저장하는 것이 좋습니다.