쿠키 / 세션 / JWT / 캐시 차이

1. 쿠키(Cookie)

정의:

• 클라이언트(브라우저)에 저장되는 작은 데이터 조각 방식.
• 서버가 이 클라이언트는 누구인지 식별할 수 있도록 돕는 역할을 함 

왜??? 

stateless니깐 HTTP는 누가 요청했는지 기억을 못함 그래서 브라우저에 " 나 이거 갖고있다" 처럼 신분증 같은걸 저장하는게 쿠키

 

특징:

• 클라이언트 측에 저장됩니다.
• 주로 사용자 인증, 세션 유지, 사용자 맞춤 설정에 사용됩니다.
• 서버와의 통신 시, HTTP 요청에 자동으로 포함되어 전송됩니다.

속성:

• 크기 제한: 약 4KB.
• 유효기간 설정 가능:
  • 만료 기간이 설정된 쿠키는 일정 시간 동안 유지됩니다.
  • 세션 쿠키는 브라우저 종료 시 삭제됩니다.

장점:

• 서버 부하 감소(클라이언트에 저장되므로).
• 간단한 데이터 저장 가능.

단점:

• 보안 취약: 데이터가 평문으로 저장될 수 있어 민감한 정보는 저장하지 않음. 사용자 컴퓨터(브라우저)에 그대로 저장됨 개발자도구로 보면 다 보임,,, 즉 노출되기 쉬운 위치에 있음 / 쿠키는 요청마다 서버에 자동 전송함 / 쿠키는 변조도 가능(개발자도구에서 쿠키 값 바꿀 수 있음)
• 브라우저 제한: 크기와 개수 제한.

예시:

• 로그인 유지: 쇼핑몰에서 로그인 후, 페이지를 닫았다가 다시 열어도 로그인 상태가 유지되는 것.
• 사용자 설정 저장: 웹사이트에서 다크 모드를 선택했을 때, 다음 방문 시에도 다크 모드가 유지됨.

동작방식

1) 클라이언트가 페이지 요청

2) 서버에서 쿠키를 생성

3) HTTP 헤더에 쿠키를 포함시켜 응답

4) 브라우저가 종료되어도 쿠키 만료기간이 있다면 클라이언트에서 보관하고 있음

5) 같은 요청을 할 경우 HTTP헤더에 쿠키를 함께 보냄

6)서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP헤더에 포함시켜 응답

 

 

🧠 작동 원리

1. 서버가 응답할 때 Set-Cookie 헤더를 보냄:
2. Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Max-Age=3600
3. 브라우저는 이 쿠키를 저장하고
4. 다음 요청부터 자동으로 서버에 보냄: Cookie: sessionId=abc123

즉, 서버는 쿠키 값을 보고 "아~ 너 abc123 사용자구나" 하고 판단함

---

2. 세션(Session)

정의:

• 서버에서 사용자 상태 정보를 관리하는 방식.

왜?? 
쿠키에 중요한 정보 직접 넣으면 위험하니깐 브라우저는 그냥 sessionId만 저장하고,

실제 사용자 정보는 서버가 메모리/DB에 보관하는 방식 

 

특징:

• 쿠키와 달리 서버 측에 저장됩니다.
• 클라이언트는 세션 ID를 쿠키를 통해 저장하고 서버에 전달.
• 로그인과 같은 사용자 인증 정보를 유지하는 데 사용됩니다.

동작 방식:

1. 사용자가 로그인하면, 서버는 세션을 생성하고, 고유한 세션 ID를 발급.
2. 이 세션 ID는 클라이언트의 쿠키에 저장되어 요청마다 서버에 전송.
3. 서버는 해당 세션 ID를 통해 사용자의 상태를 확인

장점:

• 보안성: 민감한 데이터는 클라이언트가 아닌 서버에 저장되므로 안전함.
• 데이터 용량 제한 없음.

단점:

• 서버 자원 소모: 서버 메모리에 사용자별로 세션을 저장해야 함. 즉 사용자가 많아질 수록 서버 메모리 많이 차지 
• 브라우저 종료 시 기본적으로 세션이 만료

예시:

• 온라인 뱅킹: 은행 사이트에 로그인한 후, 일정 시간(예: 10분) 동안 아무런 활동이 없으면 자동 로그아웃.
• 장바구니: 쇼핑몰에서 물건을 장바구니에 담았는데, 브라우저를 닫으면 장바구니가 초기화됨.

 

🧠 작동 원리

1. 로그인 성공 시 서버가 세션 생성:
   sessionId: abc123 → { userId: 1, name: 'jye' } 저장
2. 이 sessionId를 쿠키로 클라이언트에게 보냄
   Set-Cookie: sessionId=abc123
3. 클라이언트가 이 쿠키를 들고 다시 요청하면
   서버는 abc123을 찾아 사용자 정보 꺼냄

---

3. 캐시(Cache)

정의:

• 클라이언트(브라우저) 또는 서버에 정적 자원(HTML, CSS, JS, 이미지 등)을 임시로 저장하여 재사용하는 방식.

특징:

• 자주 사용하는 데이터를 저장해 페이지 로딩 속도를 향상.
• 브라우저나 CDN(Content Delivery Network)에서 사용.

동작 방식:

• 한 번 다운로드된 정적 파일을 브라우저가 저장하고, 동일한 요청이 있을 경우 서버에 재요청하지 않고 저장된 데이터를 사용.

장점:

• 성능 향상: 네트워크 트래픽 감소, 빠른 로딩 속도 제공.
• 서버 부하 감소.

단점:

• 오래된 데이터 문제: 데이터가 업데이트되었음에도 캐시된 오래된 데이터를 불러올 수 있음.
• 유효성 관리 필요: 만료 헤더 설정이나 캐시 무효화 전략이 필요.

예시:

• 이미지 로딩: 자주 방문하는 웹사이트의 로고나 배너 이미지가 빠르게 로딩됨.
• 유튜브: 같은 동영상을 다시 재생할 때 처음보다 빠르게 재생됨.

 

🧠 작동 원리

1. 서버가 응답할 때 캐시 설정을 헤더로 알려줌:
2.  
3. Cache-Control: max-age=3600
4. 브라우저는 이걸 1시간 동안 저장함
5. 같은 요청이 다시 오면:
   • 브라우저가 저장한 값을 보여주거나,
   • 조건부 요청으로 "변한 거 있어?" 하고 묻기만 함

---

4. JWT (JSON Web Token)이란?

정의 : JSON포맷으로 된 자신을 증명하는 토큰이다. 쉽게 말해서 사용자 정보를 담은 "작은 증명서"와도 같은 것 

서버가 사용자 인증 정보를 담아서 클라이언트에 주고 클라이언트가 이 토큰을 다시 서버에 보내서 자신을 증명하는 방식 

 

특징: 

1. 자체적으로 정보 포함

 - 토큰 안에 사용자 ID 권한 같은 정보가 암호화(아니면 서명) 되어 들어있다.

 - 그래서 서버가 따로 세션 저장소를 관리할 필요가 없을 수도 있다.(stateless)

2. 서명으로 위변조 방지 

- 토큰은 "서명"이 있어서 누군가 토큰을 바꾸면 서버가 금방 알아챌 수 있다. 

 

비교 요약:

항목	쿠키(Cookie)	세션(Session)	캐시(Cache)
저장 위치	클라이언트(브라우저)	서버	클라이언트(브라우저) 또는 서버
목적	사용자 상태 유지 (로그인, 설정 등)	사용자 세션 상태 관리	정적 자원 재사용 (속도 향상)
유효기간	설정 가능 (만료 시간 지정)	기본적으로 브라우저 종료 시 만료	만료 기간 설정 가능
보안성	비교적 낮음 (데이터가 클라이언트에 저장됨)	높음 (데이터가 서버에 저장됨)	보안 관련 없음
데이터 크기	약 4KB 제한	제한 없음	제한 없음