쿠키, 캐시, 세션 이란 ? 각 개념들과 차이점에 대해 쉽게 알아보자.

 

쿠키, 캐시, 세션에 대해 설명하기 전에 먼저 HTTP의 특징에 대해 짚고 넘어가야합니다.

HTTP에 대한 설명은 아래 포스팅 참고하시면 좋습니다.

HTTP와 HTTPS의 개념 및 차이점에 대해 알아보자.

 

HTTP에 대한 특징을 간단하게 설명하자면.. 

HTTP는 Stateless ( 무상태성 ) 프로토콜로 데이터를 주고 받아도 데이터를 유지하지 않습니다.

HTTP는 통신 후, 통신이 끝나면 클라이언트와 바로 연결을 끊어 버린다.
그렇기 때문에 데이터가 유지 되지않든다.

하지만 ,데이터 유지가 필요한 경우가 많기 때문에 데이터를 유지할 필요가 있습니다.

 

정보가 유지되지 않으면, 매번 페이지를 이동할 때마다 로그인을 다시 하거나, 상품을 선택했는데 구매 페이지에서 선택한 상품의 정보가 없거나 하는 등의 일이 발생하고,

쇼핑몰에서 옷을 구매하려고 로그인을 했음에도, 페이지를 이동할 때 마다 계속 로그인을 해야 하는 번거로움이 발생할겁니다.

 

예를들어, 우리가 🍎아이폰이나 🌠갤럭시를 사용하면서앱에 접속하거나 사이트에 접속할 때 로그인 방식을 봅시다.

🍎아이폰은 "키 체인" 으로 생체인증 ( Face ID ) 만하면 바로 한번에 로그인이 가능하고,

아이폰 키 체인

🌠갤럭시의 경우에는 "Samsung Pass"를 통해 생체인증 ( 지문 인증 ) 만 하면 바로 한번에 로그인이 됩니다.

Samsung Pass

이러한 기술이 없다면 어떨까요 ? 어디 접속할때마다 일일히 아이디, 비밀번호를 쳐서 로그인버튼을 눌러야 하는 번거로움과 불편함이 있을겁니다.

 

❗ 따라서, HTTP의 Stateful를 대처하기 위해서 쿠키와 세션을 사용합니다.

 

 

---

💡 쿠키 ( Cookie )

사용자의 브라우저( 로컬 )에 저장되는, 키와 값이 들어있는 작은 데이터 파일입니다. ( 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다. )

웹사이트는 쿠키를 통해 어떤 기기로 접속했는지 인식하고, 일부 데이터를 저장합니다.  

쿠키는 데이터 저장 만료일을 지정할 수 있으며, 만료일이 지나면 저장된 데이터는 삭제됩니다.

만료일이 정해지면, 만료일이 끝나기전까지 브라우저가 종료되어도 인증이 유지됩니다.

 

Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있습니다.

쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송합니다.

 

쿠키는 브라우저에 직접 저장되기 떄문에 보안성에 취약해 개인 정보의 저장에는 사용하지 않습니다.

 

쿠키의 구성 요소

이름	각각의 쿠키를 구별하는 데 사용되는 이름
값	쿠키의 이름과 관련된 값
유효시간 ( 만료일 )	쿠키의 유지시간
도메인	쿠키를 전송할 도메인
경로	쿠키를 전송할 요청 경로

 

쿠키 동작 방식

출처 : Ryan

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성하고 HTTP 헤더에 쿠키를 포함 시켜 응답
3. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
4. 클라이언트가 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
5. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

 

쿠키 사용 예시

• 검색기록 등 웹 사이트에서 어떤 행동을 했는지 기록.
• 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
• 쇼핑몰의 장바구니 기능
• 자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크
• 쿠키에는 만료일을 지정할수있다. 만료일이 지나면 알아서 삭제된다.

 

---

💡 세션 ( Session )

서버에 저장되는 쿠키로, 주로 중요한 데이터를 저장 시 (  로그인 정보 유지 ) 사용합니다.

사용자 로컬이 아닌 서버에 직접 저장되므로, 세션 내의 데이터를 탈취하는 것은 어려워 보안성이 비교적 높습니다.

하지만, 사용자에 대한 정보를 서버에 두기 때문에 사용자가 많아질 수록 서버 메모리를 많이 차지하게 되어, 과부하로 성능 저하가 발생합니다.

 

세션의 특징

• 세션은 데이터들이 접속 중인 웹 서버에 저장됩니다.
• 저장데이터에 제한이 없습니다.
• 유저가 접속할 때 부여되는 세션ID를 사용해서 클라이언트를 구분합니다.
   ( 세션 ID : 라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 부여하는 유일한 ID )
• 화면을 이동해도 로그인이 풀리지 않고 로그아웃하기 전까지 유지되며, 브라우저를 닫거나 서버에서 세션을 삭제하면 없어집니다.

 

세션의 동작 방식

출처 : www.youhavetosleep.dev

1. 클라이언트가 서버에 ID와, Password를 입력해 로그인합니다.
2. 서버는 DB를 확인하여 일치한다면 세션 객체를 생성하고 세션 ID를 부여한 뒤 서버 메모리에 저장한다.
3. 서버는 응답으로 쿠키에 세션ID를 담아 사용자에게 보냅니다.
4. 클라이언트는 세션 ID를 쿠키에 저장하여 가지고 있습니다.
5. 클라리언트는 서버에 요청을 보낼 때, 이 쿠키와 세션 ID를 같이 서버에 전달해서 요청합니다.
6. 서버는 로그인 정보를 다시 확인하지 않고 세션ID를 통해 확인합니다.
7. 세션 ID가 유효하다면 세션 ID로 세션에 있는 클라언트 정보를 가져와서 해당 요청의 응답을 사용자에게 보냅니다.

---

💡 쿠키와 세션 차이점

쿠키와 세션의 큰 차이점은 크게 상태 정보의 저장 위치입니다.

쿠키는 '클라이언트(= 로컬 = 사용자브라우저)'에 저장, 세션은 '서버' 에 저장 합니다.

 

	쿠키	세션
저장위치	클라이언트	서버
보안	변질 우려로 인해 보안 취약	비교적 보안성이 좋음
라이프 사이클	만료 기간 지정, 브라우저 종료 시에도 유지	브라우저 종료시 삭제 (기간 지정이 가능하긴 함)
속도	빠름 ( 서버의 자원 사용 x )	느림 ( 서버의 자원을 사용, 서버에서 처리가 필요 )

 

쿠키와 세션 중 뭐가 나을까 ?

쿠키는 자동완성이나, 팝업 일주일간 보지 않기 등 사용자의 편의를 위하는 것이지만

지워져도 되고, 조작되거나 가로채이더라도 큰 지장이 없는 수준의 정보들을 저장하는데 사용됩니다.

 

세션은  서버안에서 사용자나 다른 누군가에게 노출되면 안되는 중요한 정보들을 다룹니다.

 

쿠키로 노출시켜서는 안될 정보들이 있고, 세션을 남발하면 서버에 부담이 되어 과부하가 일어나기 때문에

웹을 설계할 때는 이 정보는 쿠키에 저장할 지 세션에 저장할 지 적절한 판단을 내려 

쿠키와 세션을 적절한 요소 및 기능에 병행 사용하여 서버 자원의 낭비를 방지하며 웹사이트의 속도를 높일 수 있습니다.

---

💡 캐시 ( Cache )

웹 페이지 요소를 저장하기 위한 임시 저장소

“같은 웹 페이지에 접속할 때 사용자의 PC에서 로드하므로 서버를 거치지 않아도 된다.”

우리가 웹 페이지를 보다 보면, 각종 이미지며 UI 등이 브라우저를 통해서 잔뜩 보여지는데, 그러한 것들이 하나같이 서버에서 내 개인PC로 전송되는 데이터의 일종입니다.

그런데 이러한 데이터들을 매~번 서버에서 전송해주는 것은 일정 수준의 부하를 요구하니까,

사용자가 웹 페이지에 접속했을 때 사용자의 컴퓨터에 캐시라는 저장 공간을 따로 마련하여 해당 웹페이지의 데이터들을 거기에 저장해두는 것입니다.

그런 다음부턴 사용자가 웹 페이지를 열 때마다 서버가 아니라 캐시에 저장되어 있는 데이터를 사용하는 것입니다.

물리적으로 캐시에서 데이터를 가져오는 게 서버에서 가져오는 것보다 훨씬 빠르기 때문에 성능 향상을 꾀할 수 있습니다.

→ 페이지 로딩 속도를 개선 ( 이미지, 비디오 오디오, CSS/JS 등... )

 

캐시의 특징

• 캐시는 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소이다.
• 저장 공간이 작지만 성능이 빠르다.
• 캐시에 미리 데이터를 복사해 놓으면 데이터에 빠르게 접근할 수 있다

---

 

💡 쿠키, 세션, 캐시 간단 정리

쿠키, 세션	캐시
사용자의 정보를 저장하기 위해 사용	웹 페이지 요소를 저장하기 위해 사용
사용자 인증을 도와준다.	웹 페이지를 빠르게 렌더링 할 수 있다.

 

---

참고자료
https://youhavetosleep.dev/session/
https://interconnection.tistory.com/74
https://ryusae.tistory.com/7