44강에서 우리는 쿠키가 fetch 요청 시 자동으로 헤더에 포함된다는 사실을 배웠다.
45강에서는 이 동작을 이론이 아니라 실제로 눈으로 확인해본다.
이번 강의의 목적은 단순하다.
쿠키가 언제 생성되고,
어떤 요청에,
어떤 방식으로 자동 전송되는지 직접 확인한다
1️⃣ 쿠키 테스트 환경
이번 테스트는 CODEPEN을 사용한다.
- 쿠키 설정 버튼
- 일반 form 전송
- fetch 전송
이 세 가지를 통해
👉 쿠키 생성 → 저장 → 자동 전송 흐름을 확인한다.
2️⃣ 테스트용 HTML
<button id="setCookieBtn">쿠키 설정</button>
<form>
<input type="submit" value="전송" />
</form>
<button onclick="fetch('')">전송2</button>쿠키 설정버튼: 쿠키를 직접 생성전송: 일반 form submit전송2: fetch 요청
3️⃣ 쿠키를 설정하는 JavaScript 코드
document.getElementById("setCookieBtn").addEventListener("click", () => {
const name = "myCookie";
const value = "hello";
const days = 7;
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
const expires = "expires=" + date.toUTCString();
document.cookie = `${name}=${value}; ${expires}; path=/; SameSite=Lax`;
alert("쿠키가 설정되었습니다!");
});- 쿠키 이름:
myCookie - 값:
hello - 만료일: 7일 후
- path:
/ - SameSite: Lax
4️⃣ 쿠키 설정 전 상태
Chrome 개발자 도구 → Application 탭 → Cookies
myCookie없음- 쿠키가 아직 생성되지 않은 상태
👉 이 시점에서는 어떤 요청을 보내도
👉 myCookie는 전송되지 않는다.
5️⃣ 쿠키 설정 버튼 클릭 후
쿠키 설정 버튼 클릭
Chrome 개발자 도구 → Application → Cookies
myCookie = hello생성됨- 만료일, Path, SameSite 값 확인 가능
👉 쿠키는 브라우저에 저장되었다.
6️⃣ 일반 form 전송 테스트
전송 버튼 클릭 (form submit)
Chrome 개발자 도구 → Network → 요청 → Headers
Cookie: myCookie=hello; ...👉 별도의 설정 없이
👉 Cookie 헤더에 자동 포함
7️⃣ fetch 요청 테스트
전송2 버튼 클릭 (fetch)
Chrome 개발자 도구 → Network → 요청 → Headers
Cookie: myCookie=hello; ...👉 fetch 요청에서도 동일하게
👉 모든 쿠키가 자동으로 포함
8️⃣ 중요한 결론
이 테스트를 통해 확인한 사실은 명확하다.
- 쿠키는 한 번 설정되면
- 같은 도메인으로 보내는 모든 요청에
- 자동으로 Cookie 헤더에 포함된다
이 동작은
- form 전송
- fetch 요청
- XMLHttpRequest
모두 동일하다.
9️⃣ 이게 왜 중요한가?
이 특성 때문에 쿠키는 인증 정보 저장에 자주 사용된다.
- 프론트엔드에서 매번 헤더를 만들 필요 없음
- 브라우저가 알아서 인증 정보 전송
- HttpOnly 옵션과 함께 사용하면 XSS에도 강함
44강에서 배운 이론을
45강에서 직접 눈으로 검증한 셈이다.
정리
- 쿠키는 브라우저에 저장된다
- 저장된 쿠키는 요청 시 자동 전송된다
- form 전송이든 fetch든 동일하다
- 이 자동 전송 특성이 인증 설계의 핵심이다
“쿠키는 개발자가 신경 쓰지 않아도 브라우저가 대신 전송해준다”
이 문장이 45강의 핵심이다.
