cookie,session,cache

Cookie,Session,Cache에 대한 정리

쿠키와,세션, 캐시는 웹개발 시, 많이 사용되는 용어입니다. 이것은 어떻게 웹사이트에서 정보를 저장하고 관리하는지에 대한 것과 연관이 있습니다. 우선 하나하나 cookie,session,cache가 무엇인지 살펴보겠습니다.

chatGPT4에게 이것들의 차이가 무엇인지 쉽게 설명해달라고 물어봤는데 예시를 들어가며 쉽게 설명을 해주었네요~! chatGPT4가 테마파크를 예를 들어 정리해준 쉬운 설명과 실제 useCase는 어떤 것이 있고, 어떤방식으로 적용할 수 있는지에 대한 예시를 간단하게 정리해보았습니다.

Cookies

ChatGPT4) 테마파크에 갔다고 생각해보세요.
그곳에서 이름,좋아하는 놀이기구,살 수 있는 스낵에 대한 정보를 적을 수 있는 작은 카드를 받게 됩니다. 이러한 것은 당신의 경험을 더욱 개인 맞춤형으로 할 수 있게 해줍니다.
예를 들면, 당신의 이름으로 반겨주거나 당신이 가장 좋아하는 스낵을 추천해줄 수도 있습니다.
웹사이트에서 쿠키는 매우 비슷한 역할을 합니다.
쿠키는 개개인의 컴퓨터에 저장된 작은 데이터 조각이라고 볼 수 있습니다. 쿠키는 당신의 쇼핑카트에 있는 username, item 정보를 기억합니다. 그래서 매번 사이트를 방문할 때마다 다시 집어넣지 않아도 되게 되는 것이죠!

실제 useCase: 쇼핑 웹사이트를 개발할 때, 유저의 쇼핑 카트 데이터를 저장하기 위해 쿠키를 사용할 수 있습니다. 유저가 그들의 카트에 아이템을 추가하면, 이 정보를 쿠키에 저장할 수 있습니다. 유저가 페이지를 나갔다 다시 들어와도 이 아이템은 쇼핑 카트에 남아있습니다.

적용 예시: 자바스크립트로 쿠키를 생성할 수 있습니다.

document.cookie = "shoppingCart=Item1&Item2; expires=Fri, 31 Dec 2021 12:00:00 UTC; path=/";

Session

ChatGPT4)이제 테마파크에서 밴드팔찌를 받았다고 생각해봅시다. 이 밴드팔찌는 방문한 날에만 특별한 것이라고 볼 수 있습니다. 이 팔찌는 당신이 어떤 기구를 타는지, 어떤 게임을 하는지 추적할 수 있습니다. 테마파크를 떠나는 날, 반납하는 것이고 다시는 사용되지 않습니다.
웹사이트에서 세션은 이 밴드팔찌와 같습니다. 당신이 사이트에 방문하는 동안 무엇을 하는지 추적할 수 있는 일시적인 저장소입니다.
웹사이트를 닫거나, 일정 시간동안 활동을 하지 않는다면 session은 끝나게 됩니다. 마치 테마파크를 떠날 때 팔찌를 반납하는 것처럼요.

실제 useCase: 유저가 로그인 해야하는 웹 애플리케이션을 만들어야 한다고 생각해봅시다. 유저가 인증되면 유저에 대한 정보( userID,userName등)을 session에 저장할 수 있습니다. 그래서 다른 페이지로 이동해도 유저가 다시 인증할 필요가 없습니다. 세션에 저장된 정보를 다시 사용하면 되니까요.

적용 예시: PHP를 예로 들면 session_start();을 사용해서 $_SESSION["username"] = "JohnDoe"; 이렇게 데이터를 저장할 수 있습니다.

Cache

ChatGPT4)테마파크에 있는 당신을 상상해보세요. 입구에 기구와 놀거리를 보여주는 지도가 있습니다.
지도를 확인할 때마다 입구에 항상 가는 것 대신에 핸드폰으로 사진을 찍어서 확인할 수 있습니다.
이제 입구에 항상 되돌아가는게 아니라 보고싶을 떄마다 언제나 쉽게 볼 수 있게 되었습니다.
이렇게 되니 시간과 노력을 아낄 수 있게 되죠.
비슷하게, cache는 지도에 대한 사진과 같습니다. 당신의 웹브라우저가 웹페이지,이미지,다른 데이터에 대해 저장하는 방법입니다. 그래서 다음에 같은 사이트를 방문할 때 모든 것을 다시 다운로드 할 필요가 없기에 더 빠른 로딩을 할 수 있게 됩니다.
cache에 저장된 사본만 사용하게 됩니다.

실제 useCase: 매 시간마다 업데이트 하는 뉴스 웹사이트를 개발하고 있다고 가정해봅시다. 유저가 방문하는 시간마다 데이터를 가져오는 대신에 웹페이지를 cache할 수 있습니다. 이 뜻은, 특정 시간동안 유저는 로딩이 더 빠르게 되는 버전의 페이지를 보게 됩니다.

적용 예시: 자바스크립트의 service worker를 사용해서 데이터를 캐싱할 수 있습니다.

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
        '/images/logo.png',
      ]);
    })
  );
});

요약

Cookie는 웹사이트가 당신의 경험에 맞춤화하여 기억할 수 있는 것입니다.
Session은 당신이 웹사이트를 방문하는 동안 일시적으로 추적할 수 있는 것입니다.
Cache는 데이터의 사본을 저장하여 웹사이트 로딩을 빠르게 만들어주는 것입니다.

쿠키와 세션은 정보를 저장하는 역할을 하며 쿠키는 client-side에서 세션은 server-side에서 합니다.
반면에 캐시는 로딩 타임을 줄여 성능을 개선하기 위해 일시적으로 컨텐츠를 저장하여 사용하는 것으로 볼 수 있습니다.