HTTP는 Hypertext Transfer Protocol의 약자이다. 인터넷을 통해 데이터를 전송하는 데 사용되는 프로토콜이다. HTTP는 World Wide Web의 기반이며 클라이언트(웹 브라우저)와 서버(웹 서버) 간의 통신을 가능하게 한다.
사용자가 로그인 요청을 한 뒤 응답을 받았다고 하더라도, 다음 요청에 로그인된 정보는 통신 어디에도 남지 않는다.
그렇기 때문에 서버 입장에서 네트워크 요청이 왔을 때 이 요청이 어떤 사용자의 요청인지 알 수 없다. 심지어 브라우저 새로고침을 누를 때마다 로그인을 해야한다.
이렇게 상태값을 가지지 않는 HTTP 통신 환경의 문제를 세션과 쿠키가 해결할 수 있다.
브라우저에는 다양한 종류의 데이터를 저장할 수 있는 공간을 제공한다. 쿠키, 로컬 스토리지, 세션 스토리지 등이 있다.
세션과 쿠키는 브라우저에서 동작하는 기술이기 때문에 웹 브라우저 환경에서만 사용한다.
쿠키(Cookies)란 클라이언트가 웹사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버를 통해 클라이언트의 브라우저에 설치되는 작은 기록 파일을 말한다.
쿠키는 웹 서버와 통신 과정에서 특정 정보를 저장하기 위한, Key - Value 형태의 유효기간을 가진 데이터이다.
Set-Cookie: 데이터
를 기록한다.쿠키는 도메인(웹 사이트) 별로 쿠키를 다양하게 둘 수 있다. 우리가 네이버, 쿠팡 등 다양한 도메인의 웹 서비스에서도 인증 정보나 장바구니 상태를 유지할 수 있는 건 도메인별로 쿠키가 유지되기 때문이다.
💡쿠키는 보통 다음처럼 사용된다.
🗣️ 쿠키와 세션의 차이점, 장단점을 비교하는 경우가 있는데, 애초에 스콥이 다르다.
세션은 서버에서 저장하고, 쿠키는 클라이언트가 저장한다. ⇒ 인증 구현할때 이런방식으로 하는 것
세션은 클라이언트와 서버 간의 네트워크 연결에 대한 정보를 담고 있는 객체이다
세션은 서버 쪽에서 관리하는 객체로, 클라이언트와의 연결에 대한 정보(비밀번호 등의 인증 정보)를 담아서 서버 측에 저장하고 관리한다. 이때 세션을 저장하기 위해선 별도의 세션 스토리지를 구현하곤 한다.
💡일반적으로 세션을 사용해서 HTTP 통신을 하는 경우 아래와 같은 흐름을 따른다.
1. 클라이언트가 서버와 연결을 시도하면 서버는 해당 연결에 대한 정보를 세션 저장소에서 찾는다.
2. 세션 저장소에 정보가 존재하지 않는다면 새로운 세션을 만들고 저장한다.
3. 클라이언트에게 생성된 세션 정보를 쿠키 혹은 다른 방식으로 넘긴다. (보통 쿠키에 넘김)
4. 클라이언트는 해당 정보를 (쿠키 등에)저장하고 있다가, 이후 요청에 세션 정보를 포함하여 요청을 보낸다.
👉🏻 좀 더 간단한 보통의 흐름은 서버는 클라이언트의 로그인 요청에 대한 응답을 작성할 때, 인증 정보는 서버에 저장하고, 클라이언트 식별자인 JSESSIONIS
를 쿠키에 담는다. 이후 클라이언트 요청을 보낼때마다 JSESSIONIS
의 유효성을 판별해 클라이언트를 식별한다.
일반적으로 서버에서는 세션을 관리할 때 ID로 관리하고, 접속 시간에 제한을 두곤 한다.
"session_id": {
"user_id": "grab",
"role": "Admin",
"created_at": "2021-08-11 18:32:01",
"expire_time": "2021-08-11 19:32:01",
}
세션은 일반적으로 사용자에 대한 식별이 필요할 때 사용한다.
로그인뿐만 아니라 동시 접속 탐지, 접근 기록 수집 같은 다양한 곳에 세션을 활용할 수 있다
인증에 대한 정보를 어디에 저장하느냐에 있다.
쿠키 : 클라이언트 쪽에 저장 → 인증에 대한 모든 정보가 클라이언트에 저장한 쿠키에 있다.
세션 : 서버쪽에 저장 → 모든 정보가 서버 쪽에서 관리하는 별도의 세션 저장소에 있다.
🗣️ 세션과 쿠키는 서로 대립하는 관계가 아니다.
쿠키는 브라우저에 특정 데이터를 저장하는 방식이지만,
세션은 클라이언트/서버 구조에서 연결 정보(객체)를 저장하는 방식이다.
보통 함께 사용한다.
예를들어 서버쪽에서 세션객체 만들어서 연결에 대한 정보를 담고있으면, 그것을 쿠키형식으로 브라우저에 쏴주면 (set-cookie로 헤더에 넣어주면) 브라우저 쿠키에 저장한다.
🔗참고 링크
https://velog.io/@leemember/프론트엔드-기술-면접-단골-개념들-정리-네트워크-CS-편-그-외-질문
https://velog.io/@whitebear/%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%ED%86%A0%ED%81%B0JWT-%ED%99%95%EC%8B%A4%ED%9E%88-%EC%95%8C%EA%B3%A0-%EA%B0%80%EA%B8%B0