✅ 쿠키(Cookie)란?
웹 서버가 브라우저에게 지시하여 "사용자의 로컬 컴퓨터"에 파일 또는 메모리에 저장하는 작은 기록 정보 파일
ex ) 방문했던 사이트에 다시 방문 하였을 때 아이디와 비밀번호 자동 입력
ex ) 팝업창을 통해 "오늘 이 창을 다시 보지 않기" 체크
- Cookie의 동작 순서
- 클라이언트가 페이지를 요청한다. (사용자가 웹사이트 접근)
- 웹 서버는 쿠키를 생성한다.
- 생성한 쿠키에 정보를 담아 HTTP 화면을 돌려줄 때, 같이 클라이언트에게 돌려준다.
- 넘겨 받은 쿠키는 클라이언트가 가지고 있다가(로컬 PC에 저장)
- 다시 서버에 요청할 때 요청과 함께 쿠키를 전송한다.
- 동일 사이트 재방문시 클라이언트의 PC에 해당 쿠키가 있는 경우, 요청 페이지와 함께 쿠키를 전송한다.
- Cookie의 단점
쿠키에 대한 정보를 매 헤더(Http Header)에 추가하여 보내기 때문에 상당한 트랙픽을 발생시킨다.
✅ 세션(HTTP Session)이란?
쿠키의 트래픽 문제와 쿠키를 변경하는 보안적 이슈를 해결하기 위해 등장
- 세션(HTTP Session) 동작 순서
- 클라이언트가 서버에 Resource를 요청한다.
- 서버에서는 HTTP Request를 통해 쿠키에서 Session id를 확인을 한 후에 없으면 Set-Cookie를 통해 새로 발행한 Session-id 보낸다.
(서버가 클라이언트마다 개별의 세션 ID를 부여, 클라이언트는 요청할 때마다 세션 ID를 서버에 전달) - 클라이언트는 HTTP Request 헤더에 Session id를 포함하여 원하는 Resource를 요청한다.
- 서버는 Session id를 통해 해당 세션을 찾아 클라이언트 상태 정보를 유지하며 적절한 응답을 한다.
🎯 쿠키와 세션의 차이
✔ 저장 위치
쿠키 - 클라이언트(브라우저)에 메모리 또는 파일에 저장
세션 - 서버 메모리에 저장
✔ 보안
Cookie - 클라이언트 로컬(local)에 저장되기도 하고 특히 파일로 저장되는 경우 탈취, 변조될 위험이 있고,
Request/Response에서 스나이핑 당할 위험이 있어 보안이 비교적 취약하다.
Session - 클라이언트 정보 자체는 서버에 저장되어 있으므로 비교적 안전하다.
✔ 라이프 사이클
쿠키는 앞서 설명한 지속 쿠키의 경우에 브라우저를 종료하더라도 저장되어 있을 수 있는 반면에
세션은 서버에서 만료시간/날짜를 정해서 지워버릴 수 있기도 하고 세션 쿠키에 세션 아이디를 정한 경우,
브라우저 종료시 세션아이디가 날아갈 수 있다.
✔ 속도
쿠키에 정보가 있기 때문에 서버에 요청시 헤더를 바로 참조하면 되므로 속도에서 유리하지만,
세션은 제공받은 세션아이디(Key)를 이용해서 서버에서 다시 데이터를 참조해야하므로 속도가 비교적 느릴 수 있다.
🎯 Q&A
Q. 세션을 쓰면되는데 굳이 쿠키를 사용하는 이유?
A. 세션이 쿠키에 비해 보안도 높은 편이나 쿠키를 사용하는 이유는 세션은 서버에 저장되고, 서버자원을 사용하기 때문에 사용자가 많을 경우 소모되는 자원이 상당하다.
이러한 자원관리 차원에서 쿠키와 세션을 적절한 요소 및 기능에 '병행 사용'하여, 서버 자원의 낭비를 방지하며 웹사이트의 속도를 높일 수 있다.
🎯 리액트에서 쿠키 사용하기
1. 리액트 쿠키 다운
2. Cookies에도 provider가 존재하여, redux를 사용할 때와 마찬가지로 하위 컴포넌트를 감싸주는 형식으로 작성 사용 (모든 페이지 감싸기)
3. 쿠키를 사용하는 페이지에 import { useCookies } from "react-cookie"; 추가
4. 쿠키와 관련된 함수 생성
- 로그인 페이지 :
const [cookies, setCookie] = useCookies(["myId"]);
myId에 DB의 userId 값 넣어주기 - 게시글 작성 페이지 :
const [cookies] = useCookies(["myId"]);
const [reqData, setReqData] = useState({
boardTitle: "",
boardContent: "",
userId: cookies.myId,
});
