[스프링부트 #14] 개발자도구로 보는 웹 로그인 흐름

Aug 23, 2025

Contents

1. 전체 흐름 2. Network 탭 - 요청과 응답 확인 쿠키, 세션ID 간단요약

웹에서 로그인 기능을 구현할 때, 서버와 클라이언트는 다양한 정보를 주고 받는다. 특히, 세션 기반 인증에서는 세션 기반 인증에서는 Set-Cookie, JSESSIONID, Accept, Content-Type등의 HTTP 헤더와 브라우저의 쿠키 저장소가 핵심적인 역할은 한다.

실제로 로그인 요청을 디버깅하며 확인할 수 있는 정보들을 Request/Response Headers, Application 탭(Cookies) 중심으로 정리하였다.

1. 전체 흐름

로그인 요청 → 서버에서 세션 생성

서버는 Set-Cookie로 세션ID(JSESSIONID)를 브라우저에 전달

브라우저는 쿠키를 저장하고 이후 요청마다 자동 전송

로그아웃 시 Set-Cookie로 세션 쿠키 삭제

2. Network 탭 - 요청과 응답 확인

로그인 완료 후

Response Headers → Set-Cookie 확인: 서버가 JSESSIONID 발급

Set-Cookie는 서버가 쿠키를 브라우저에 저장시키는 명령
JSESSIONID는 클라이언트와 서버의 세션을 연결하는 열쇠

Application > Cookies: 브라우저에 쿠키가 저장됐는지 확인

Application 탭에서 쿠키 상태를 직접 확인하며 디버깅 가능

로그인 이후 요청 시

Request Headers → Cookie: 세션ID 포함되어 전송되는지 확인

브라우저는 저장된 쿠키를 다음 요청에 자동으로 포함

❗

참고로 쿠키는 두 개 이상이면 ; 으로 구분.

로그아웃 시

Response Headers → Set-Cookie로 쿠키 만료 설정 (Max-Age=0)

Application > Cookies: 쿠키가 삭제되었는지 확인

요청과 응답 확인의 핵심 몇가지

Request Headers (클라이언트 → 서버)

항목	설명
`Accept`	클라이언트가 받고 싶은 응답 타입 (e.g., `text/html`, `application/json`)
`Cookie`	브라우저가 보유한 쿠키를 서버에 자동으로 포함해서 보냄 (e.g., `JSESSIONID=abc123`)

Response Headers (서버 → 클라이언트)

항목	설명
`Content-Type`	서버가 보내는 응답의 콘텐츠 타입 (e.g., `text/html`, `application/json`)
`Set-Cookie`	브라우저에 저장할 쿠키를 지정 (주로 세션 ID 전달용)
`Location`	리다이렉션 주소 (`302 Found` 응답 시 사용됨)
`Keep-Alive`	연결 재사용을 위한 힌트 (성능 최적화용, 주로 무시 가능)

쿠키, 세션ID 간단요약

항목	설명
세션	서버가 사용자의 상태(state)를 일시적으로 저장해두는 공간 (라커)
세션 ID	서버가 생성한 고유 번호 (사용자 식별용, 라커 열쇠 번호)
쿠키	클라이언트에 저장되는 name=value 형태의 저장소 (라커 번호를 들고 다니는 수단, 가방)
Set-Cookie	서버 → 브라우저로 쿠키를 전달하는 HTTP 헤더
→ 관계	세션 ID는 쿠키에 담겨서 클라이언트에 저장됨 (`JSESSIONID=세션ID`)