세션, 토큰, 캐시, 쿠키, 로컬 스토리지, 세션 스토리지

웹에서 데이터를 저장 및 관리하는 기술에는 쿠키, 세션, 토큰, 캐시, 로컬 스토리지, 세션 스토리지 등이 있다.

위 6가지는 가장 기본적이고 중요한 기술이기 때문에 반드시 알아둬야 한다.

하나씩 자세히 정리해보자!

---

세션 (Session)

서버에서 사용자의 상태나 데이터를 저장하는 방식.

클라이언트와 서버 간의 "상태를 유지하기 위해" 사용되고, 주로 로그인 정보 같은 민감한 데이터를 관리하는데 사용한다.

• 작동 원리: 사용자가 웹사이트에 접속하면 서버는 고유한 세션 ID를 생성하고, 이 세션 ID를 쿠키나 URL을 통해 클라이언트에게 전달한다. 서버는 이 세션 ID를 통해 사용자의 상태나 데이터를 저장하고 관리한다. 클라이언트가 서버에 요청하면 세션 ID를 통해 사용자 정보를 확인한다. 세션 ID로 저장된 사용자의 상태나 데이터는 ID의 유효기간 동안 유지된다.
• 사용 예시: 로그인 상태 유지, 장바구니 내용 저장 등.
  1. 홍길동이 아이디, 비번 입력해서 Gmail 로그인 시도
  2. 로그인 성공하면 서버는 세션ID를 사용자에게 전달하고, 메모리에 누가 로그인했는지 기록
  3. 이후에 홍길동이 '받은메일함 보기'를 사용하려고 하면, 클라이언트가 세션ID를 쿠키에 실어서 전달
  4. 서버에서는 쿠키에 들어있는 세션ID를 통해 홍길동이 로그인 했다는걸 알고, 홍길동의 메일함을 열어준다.
• 장점: 정보가 서버에 저장되고, 세션이 종료되면 정보가 사라지기 때문에 보안이 상대적으로 좋다.
• 단점: 서버의 메모리를 사용하기 때문에 동시 사용자가 많으면 서버에 과부하가 생길 수 있고, 세션 기간이 만료되면 정보를 잃어버릴 수 있다.

---

토큰 (Token)

인증 정보를 담고 있는 데이터 조각으로, 주로 JSON Web Token (JWT) 형태로 사용된다.

토큰에는 사용자 정보가 인코딩되어 있어 서버에서 별도의 상태를 저장할 필요가 없다.

• 작동 원리: 사용자가 인증을 받으면, 서버는 인증 정보를 담은 고유한 토큰을 생성하고 클라이언트에게 전달한다. 클라이언트는 이 토큰을 저장하고, 이후 서버에 요청할 때마다 해당 토큰을 전송하여 인증을 받는다. 서버는 전송된 토큰을 검증하여 요청이 유효한지 확인한다.
  1. 홍길동이 아이디, 비번 입력해서 Gmail 로그인 시도
  2. 로그인 성공하면 서버가 '홍길동'만 사용하는 고유한 토큰(과 검증 알고리즘)을 만들어서 전달
  3. 클라이언트는 이 토큰을 쿠키에 저장
  4. 홍길동이 해당 페이지에서 다른 기능을 사용하려고 할 때마다, 토큰은 요청과 함께 서버로 보내진다. ("지금 홍길동이 로그인했고, 이런 기능을 사용하려고 해")
  5. 토큰은 고유하기 때문에 서버는 자기가 발급한 토큰인걸 알아보고 홍길동의 요청을 허락해준다.
• 장점: 클라이언트에서 상태를 관리하고 토큰 자체에 인증 정보가 포함되어, 서버에서 상태를 저장하지 않아 부담이 적다.
• 단점: 토큰이 탈취되면 유효기간 동안 악용될 수 있어 보안 위험이 있다.
• 사용 예시: API 접근 권한 부여/인증, OAuth 소셜 로그인.
  예를 들어, 사용자가 API를 통해 데이터를 요청할 때, 클라이언트는 저장된 토큰을 요청 헤더에 포함시켜 서버에 보내고, 서버는 이 토큰을 검증하여 요청을 처리한다.

useEffect(() => {
  const token = '저장된_토큰_값'; // 로컬 스토리지나 다른 곳에서 토큰을 가져옵니다.

  fetch('/api/data', {
    method: 'GET', // 기본값은 'GET'이므로 생략 가능
    headers: {
      'Authorization': `Bearer ${token}`, // 토큰을 헤더에 포함
      'Content-Type': 'application/json', // JSON 데이터 요청
    },
  })
    .then(response => {
      if (!response.ok) {
        throw new Error('네트워크 응답에 문제가 있습니다.');
      }
      return response.json();
    })
    .then(data => setData(data))
    .catch(error => console.error(error));
}, []);

텍스트 설명만 보기에는 부족한 느낌이라 예시 코드를 가져왔다.

1. fetch()로 API 주소에서 데이터를 불러오는 과정에서, "JSON 데이터를 가져올거고 토큰으로 인증 요청을 할거야"라고 클라이언트가 헤더에 적어서 서버에 보냈다.

2. 그리고 이어지는 then(resp)에서 데이터가 정상적으로 로드되지 않으면 에러 메시지 표시, 정보 가져오는거 성공하면 JSON으로 변환하겠다고 명시했다.

3. then(data)에서 그렇게 가져온 정보를 어떻게 사용할지 작성했고, catch()로 에러 발생할 경우 콘솔에 에러 메시지를 출력하겠다고 작성했다.

4. 이렇게 하면 서버는 토큰을 검증해서, 각각 상황에 맞는 결과를 출력한다.

---

캐시 (Cache)

서버나 클라이언트(브라우저)가 자주 사용되거나, 다시 필요할 가능성이 높은 데이터를 임시로 저장해두는 것.

같은 정보를 나중에 다시 확인할 때, 캐시를 활용한다면 데이터를 불러오는 과정이 없어서 속도가 빨라질 수 있다.

• 작동 원리: 클라이언트가 서버에 요청할 때, 서버는 자주 요청되는 데이터를 캐시에 저장하고, 클라이언트가 동일한 데이터를 요청하면 새로 전송하지 않고 캐시된 데이터를 제공하여 속도를 높인다.
• 사용 방법: 웹사이트 이미지, CSS 파일, JS 파일을 캐시에 저장해 빠르게 로딩. 혹은 API 결과를 캐시에 저장하여 빠른 데이터 제공.
• 장점: 서버 응답 속도를 크게 개선하고, 대역폭 사용을 줄여 웹사이트 성능이 높아진다.
• 단점: 캐시된 데이터가 오래된 경우 최신 정보가 제공되지 않을 수 있어, 캐시를 무효화하고 새로 고침하는 방법이 필요하다.

---

쿠키 (Cookie)

웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 파일. (공개 가능한 정보)

• 작동 원리: 사용자가 웹사이트를 방문하면, 서버는 HTTP 응답에 쿠키를 포함시켜 브라우저에 전송한다. 브라우저는 이 쿠키를 저장하고, 이후 사용자가 같은 웹사이트를 방문하면 브라우저가 저장된 쿠키를 자동으로 서버에 전송한다.
• 사용 예시: 웹사이트의 테마나 언어 설정 저장.
  1. 홍길동이 웹사이트를 방문했고, 언어를 한국어로 설정했다.
  2. 서버는 '언어 설정' 정보를 쿠키에 넣어서 클라이언트에 전송한다.
  3. 클라이언트는 쿠키를 브라우저에 저장한다.
  4. 이후 홍길동이 사이트에 다시 방문하면, 저장된 쿠키를 클라이언트가 자동으로 서버에 전송해서 언어 설정이 유지된다.
  
• 장점: 브라우저에 저장되어 서버 부담이 적고, 간단한 사용자 정보 저장에 적합하다. 브라우저가 자동으로 쿠키를 전송해 상태를 유지할 수 있다.
• 단점: 사용자 본인 외에 제3자도 조회할 수 있어 민감한 정보 저장에는 부적합하며, 사용자가 쿠키를 삭제할 수 있다.

---

로컬 스토리지 (Local Storage)

사용자 설정, 테마, 최근 검색어 처럼 재방문 시 유지되어야 하는, 비밀이 아닌 데이터를 저장할 때 사용한다.

데이터를 영구적으로 저장하는 방식이어서, 브라우저를 닫거나 새로 고침해도 데이터가 유지된다.

도메인 별로 5MB ~ 10MB 정도의 용량을 제공한다.

• 장점: 사용자가 사이트를 재방문해도 저장된 데이터가 유지되어 UX를 개선할 수 있다.
  데이터를 쉽게 읽고 쓸 수 있으며, JSON 형식으로 저장할 수 있다.
• 단점: 보안이 취약하여 비밀번호 같은 민감한 정보를 저장하기엔 적합하지 않다.
  데이터가 만료되지 않아 관리가 필요하다.
• 작동 원리: localStorage.setItem('key', 'value')로 데이터를 저장하고, localStorage.getItem('key')로 불러온다.
• 사용 예시:
  1. 홍길동이 웹사이트에 접속해서 테마를 '다크 모드'로 설정했다.
  2. 브라우저는 로컬 스토리지에 테마 정보를 저장한다.
  3. 홍길동이 웹사이트를 다시 방문하면, 로컬 스토리지에서 테마 정보를 가져와서 '다크 모드'로 설정한다.
  4. 테마 설정은 해당 도메인에서 영구적으로 유지되기 때문에, 브라우저를 닫아도 설정이 유지된다.

쿠키, 로컬 스토리지 모두 언어나 테마 등 사용자 설정을 저장하는데 사용하는 기술이라는 부분은 같지만, 어떤 방식으로 사용자 설정을 유지하는지는 차이가 있다.
- 쿠키: 서버가 클라이언트에 사용자 설정 정보를 쿠키에 넣어서 보내고, 클라이언트가 쿠키를 저장했다가 다음 방문 시 자동으로 서버에 쿠키를 전송하는 방식으로 설정을 유지한다.
- 로컬 스토리지: 서버와 통신하지 않고, 클라이언트 측에 정보를 저장했다가 재접속 시 로컬 스토리지에서 직접 데이터를 꺼내와서 사용한다.

---

세션 스토리지 (Session Storage)

사용자 로그인 상태, 일시적인 데이터, 폼 입력 중 유지해야 하는 데이터 등을 저장할 때 사용한다. 정보를 세션 단위로 저장하기 때문에, 브라우저 탭이나 창을 닫으면 데이터가 사라진다. 사용자가 해당 세션 동안만 필요한 정보를 유지하고자 할 때 적합한 방식. 도메인 별로 5MB ~ 10MB 정도의 용량을 제공한다.

• 장점: 사용자가 특정 세션 동안만 필요한 데이터를 저장하는데 적합하다. 탭 간 데이터가 격리되어, 하나의 탭에서 변경한 데이터가 다른 탭에 영향을 미치지 않는다.
• 단점: 브라우저를 닫거나 탭을 닫으면 데이터가 사라지므로, 재방문 시 데이터가 유지되지 않는다. 보안이 취약하여 민감한 정보 저장에는 적합하지 않다.
• 작동 원리: sessionStorage.setItem('key', 'value')로 데이터를 저장하고, sessionStorage.getItem('key')로 불러온다.
• 사용 예시:
  1. 홍길동이 쇼핑몰 페이지에서 상품을 장바구니에 담았다.
  2. 브라우저는 세션 스토리지에 장바구니 정보를 저장한다.
  3. 홍길동이 해당 탭을 보고있는 동안에는 장바구니 정보가 유지된다.
  4. 만약 홍길동이 해당 탭이나 화면를 닫으면, 데이터가 사라진다.

---

https://hongong.hanbit.co.kr/%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%ED%86%A0%ED%81%B0-%EC%BA%90%EC%8B%9C-%EA%B7%B8%EB%A6%AC%EA%B3%A0-cdn/

완벽 정리! 쿠키, 세션, 토큰, 캐시 그리고 CDN

https://velog.io/@moonblue/%EC%84%B8%EC%85%98Session-%EA%B3%BC-%EC%BF%A0%ED%82%A4Cookie

https://velog.io/@jung5318/%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%ED%86%A0%ED%81%B0%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

https://ko.javascript.info/localstorage

localStorage와 sessionStorage