ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 캐시 vs 쿠키
    프론트엔드/HTTP 2024. 12. 31. 12:44
    728x90

    캐시 vs 쿠키

     

    캐시(Cache)와 쿠키(Cookie)는 모두 웹 브라우저와 서버 간의 데이터 저장 및 관리를 통해 성능과 사용자 경험을 향상시키기 위한 기술이지만, 사용 목적과 작동 방식에 차이가 있습니다.


    1. 캐시(Cache)

    정의

    • 웹 브라우저 또는 프록시 서버에 저장된 데이터로, 자주 사용하는 리소스(HTML, CSS, JavaScript, 이미지 등)를 저장하여 재사용합니다.
    • 주로 성능 최적화와 네트워크 사용량 감소를 목표로 합니다.

    특징

    • 용도: 리소스 로드 속도를 개선하고, 네트워크 트래픽을 줄임.
    • 저장 위치: 브라우저 캐시, 서버 캐시, CDN 캐시 등 다양한 계층에서 관리.
    • 수명: HTTP 헤더(Cache-Control, Expires)를 통해 제어.
    • 데이터 크기: 비교적 큰 데이터(이미지, 동영상 등) 저장 가능.
    • 자동 관리: 브라우저가 캐시된 데이터의 유효성을 자동으로 검사하고, 만료된 경우 다시 로드.

    작동 방식

    1. 브라우저가 리소스를 요청하면, 먼저 캐시에 해당 리소스가 있는지 확인.
    2. 캐시에 있으면 네트워크를 거치지 않고 로컬에서 데이터를 반환.
    3. 캐시에 없거나 만료된 경우, 서버에서 새 데이터를 가져와 캐시에 저장.

    예시

    • 웹 페이지 로드 시, 브라우저가 CSS, JS 파일을 캐시하여 재방문 시 로딩 시간을 줄임.

    2. 쿠키(Cookie)

    정의

    • 클라이언트 측에 저장되는 작은 데이터 조각으로, 서버와 클라이언트 간에 상태 정보를 유지하기 위해 사용됩니다.
    • 주로 사용자 식별 및 세션 관리를 위해 사용됩니다.

    특징

    • 용도: 사용자 정보 저장(로그인 상태, 세션 ID, 사용자 설정 등).
    • 저장 위치: 브라우저에 저장.
    • 수명: Expires 또는 Max-Age 속성을 통해 수명을 설정.
      • Session Cookie: 브라우저를 닫으면 삭제.
      • Persistent Cookie: 유효 기간이 설정된 쿠키로, 브라우저를 닫아도 유지.
    • 데이터 크기: 제한적(도메인당 약 4KB).
    • 수동 설정: 서버나 클라이언트에서 명시적으로 설정.

    작동 방식

    1. 서버가 응답 시 Set-Cookie 헤더를 통해 클라이언트에 쿠키를 저장.
    2. 이후 클라이언트가 동일한 서버에 요청할 때 해당 쿠키를 Cookie 헤더에 포함하여 전송.

    예시

    • 쇼핑몰에서 장바구니 정보 유지.
    • 사용자의 로그인 상태 유지.

    캐시와 쿠키의 비교

    특징 캐시(Cache) 쿠키(Cookie)
    목적 리소스 재사용 및 성능 최적화 상태 유지 및 사용자 식별
    저장 데이터 정적 리소스(CSS, JS, 이미지 등) 세션 ID, 사용자 설정, 인증 정보
    데이터 크기 크기 제한 없음 (파일 크기 제한은 서버 설정) 약 4KB로 제한
    수명 HTTP 헤더를 통해 설정 Expires 또는 Max-Age로 설정
    저장 위치 브라우저 캐시, CDN, 프록시 서버 등 브라우저의 클라이언트 저장소
    관리 주체 브라우저가 자동 관리 서버 또는 클라이언트가 수동 관리
    보안 민감한 정보 저장 부적합 민감한 정보는 HttpOnly, Secure 속성으로 보호 가능
    전송 여부 일반적으로 서버 요청 시 전송되지 않음 서버 요청 시 Cookie 헤더로 항상 전송

    요약

    • 캐시는 성능 최적화를 위해 자주 사용하는 리소스를 저장하여 빠르게 로드하는 데 중점을 둡니다.
    • 쿠키는 사용자 상태를 유지하고 서버와 클라이언트 간 상호작용을 관리하는 데 사용됩니다.

    두 기술은 상호 보완적으로 사용되며, 각자의 목적에 맞게 설계 및 활용됩니다.

     

    728x90

    '프론트엔드 > HTTP' 카테고리의 다른 글

    초간단 서버 클라이언트 예시  (0) 2025.01.03
    cURL 윈도우 설치 방법  (0) 2024.12.31
    웹페이지 성능 최적화  (0) 2024.12.31
    [HTTP 보안]CORS  (0) 2024.12.29
    [HTTP 보안]CSP vs SOP  (0) 2024.12.29
Designed by Tistory.