쿠키와 세션에 대해서 알아보자!

오재짱·2021년 8월 18일
40

JavaScript

목록 보기
3/4

쿠키라고는 군침이 싹 도는 쿠키밖에 모르는 👶응애 개발자 지망생👶에게 쿠키와 세션의 차이를 설명하기에는 역부족이었습니다... 그래서 정리를 해볼까 합니다!

모든일에는 이유가 있다!

쿠키에 대해서 알아보기전에 쿠키가 생겨나게된 배경에 대해서 알아볼 필요가 있습니다.

모든 일에는 이유가 있고, 이유를 알게 되면 보다 더 자세히 이해를 할 수 있기 때문입니다.

쿠키를 공부하기 전에 간단한(?) HTTP에 대한 개념이 필요합니다.

HTTP가 모죠!? 👶

HTTP는 Hypertext Transfer Protocol 의 줄임말로 웹에 관심이 있다!는 사람들은 꼭 알아둬야 할 프로토콜입니다.

프로토콜은 특정 기기 간의 데이터를 주고받기 위해 상호간에 정의한 규칙입니다.

만약 상호간에 약속을 하지 않았다면 기기간 호환성을 맞추기가 갱장히🔥 힘들겁니다.

웹은 클라이언트와 서버의 데이터 통신을 위해 HTTP 프로토콜을 사용하고 있는데,

이 HTTP 프로토콜의 아주 매정한(?) 특징이 존재합니다 😒

매정한 HTTP...💧

1. 비연결 지향성

HTTP는 비연결을 지향(Connetionless라고도 부릅니다.)하고 있습니다.

Connetionless란 클라이언트가 서버에 리소스를 요청한 후 서버가 응답을 보내고 난 뒤에는 연결을 끊어버리는 특징을 이야기 합니다.

2. 무상태(Stateless)

HTTP의 또 다른 특징으로는 무상태성이 있습니다.

클라이언트와 서버가 첫 번째 통신에서 만약 데이터를 주고 받았다고 해도,

두 번째 통신에서의 서버는 첫 번째 통신의 클라이언트 상태 정보를 가지고 있지 않습니다.

그렇다는 말은?

서버와 클라이언트간의 통신이 끝나는 순간 서로의 연결 또한 끊어지고 서버는 이전 클라이언트의 상태를 알 수 없습니다.

이 특징 때문에 사용자는 로그인을 한 상태라도 다른 페이지로 이동할때마다 계속해서 로그인을 진행해야 합니다.

쿠키와 세션.... 거마웡...🧡

이런 번거로움을 덜기 위해 유저의 인증을 계속해서 유지해야 하는 상황에서 이를 해결해줄 쿠키와 세션이 등장하게 됩니다! 👍

쿠키와 세션은 사용자의 상태를 알 수 있게 만들고 이를 유지시켜 줄 수 있도록 하는 역할을 합니다.

1. 쿠키 🍪

쿠키는 클라이언트의 로컬에 저장되는 Key-Value 쌍의 데이터입니다.

웹 사이트 방문시 서버에서 클라이언트에 저장하는 정보 파일로,

필요시 참조나 재사용이 가능하게 됩니다.

쿠키가 동작하는 순서는 아래와 같습니다.

  1. 클라이언트와 서버의 첫 통신시 서버에서 쿠키를 생성하고 이를 응답으로 response 한다.

  2. response된 쿠키는 클라이언트에 저장한다.

  3. 요청시 만약 쿠키가 있는 경우 쿠키를 담아 request를 보낸다.

  4. 서버는 받은 쿠키를 통해서 클라이언트의 상태를 파악하는것이 가능하다.

쿠키는 저장 기간(만료 기간)이 끝나면 사라지게 되므로 이를 잘 설정하는것이 중요합니다.

하지만 편리한 만큼 보안적인 문제도 존재합니다.

MDN 에서도 위와같이 기밀 혹은 민감한 정보에 대해서는 쿠키에 저장하지 않는것을 권장하고 있습니다.

클라이언트에 정보가 저장되기 때문에 XSS 공격이나 CSRF 공격에 취약하기 때문입니다.

2. 세션

반대로 세션은 클라이언트가 아닌 서버에서 정보를 저장하고 있습니다.

또한 브라우저가 종료되면 소멸되는 특징을 가지고 있습니다.

이 때문에 클라이언트에 정보를 저장하는 쿠키보다 보안성이 높다고 할 수 있습니다.

하지만 서버가 상태 데이터를 가지고 있기 때문에 부하가 늘어날 수 있습니다.

만약 서버가 감당할 수 없는 만큼의 세션을 관리하게 되면 서버가 터질 수도 있습니다 🔥

세션은 클라이언트에 고유 세션 id를 부여해 이를 통한 클라이언트 구분을 진행합니다.

따라서 서버에서 데이터를 바로 처리하는 쿠키와 다르게 세션을 읽는 과정과 데이터를 읽는 과정을 거쳐야 하므로 쿠키보다 느리게 동작합니다.

세션의 동작 순서는 아래와 같습니다.

  1. 클라이언트가 request를 보내면 세션 id를 확인한다.

  2. 존재하지 않으면 세션 id를 생성해 클라이언트에 돌려준다.

  3. 받은 세션 id를 클라이언트의 쿠키로 저장한다.

  4. 이후 쿠키를 이용해 세션 id를 서버에 전달한다.

마무리......가 아니네? 🔥🔥🔥🔥🔥🔥🔥🔥

이렇게 쿠키와 세션에 대해 정리해보면서 개념과 차이점에 대해서 알 수 있었습니다.

뿌듯함을 느끼고 있던 중에 MDN 문서에서 보이는 한가지의 문구...

다음 이야기 - 로컬 스토리지와 세션 스토리지

선생님들 트렌딩 감쟈합니당,,,,,,,

profile
'설명하지 못하면 이해한게 아니다'라는 마음가짐을 가진 프론트엔드 지망생에서 프론트엔드 개발자가 됬습니당!

8개의 댓글

comment-user-thumbnail
2021년 8월 19일

쿠키와 세션에 대해서 너무 잘 정리해놓았네요! 1 따봉 드리며 다음 이야기 기대하겠읍니다

1개의 답글
comment-user-thumbnail
2021년 8월 23일

군침이 싹 도....네이션

1개의 답글
comment-user-thumbnail
2021년 8월 25일

군침이 싹 도는 글이네요

1개의 답글
comment-user-thumbnail
2021년 8월 26일

좋아요 누르고 갑니다 재원님 ^^

1개의 답글