React : cookie / localStorage / SessionStorage

HTTP 프로토콜 환경: "connectionless, stateless"한 특성을 가짐 → 서버는 클라이언트가 누구인지 매번 확인해야 함 

• connectionless : 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특징
• stateless : 통신이 끝나면 상태를 유지하지 않는 특징

※  이러한 특성을 보안하기 위해 쿠키를 사용함

 

Cookie란?

• 웹 서버가 웹 브라우저에게 보내어 저장했다가 서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보
• 웹 페이지 방문 시 방문 기록 등 브라우저에서의 정보들이 저장된 텍스트 파일

웹에서 요청마다 매번 연결과 해제가 되면서 요청마다 새로운 사용자로 인식되는 단점이 있지만, 쿠키와 세션을 통해 브라우저를 종료했다가 다시 접속해도 로그인 상태를 유지할 수 있음.

쿠키는 서버를 대신해 웹 브라우저에 저장하고 요청을 할 때 그 정보를 서버에 보내 사용자를 식별할 수 있게 한다.

 

 

클라이언트가 서버로 요청을 보내면 서버는 그에 대한 답변을 쿠키에 담아 보냄.

쿠키에 대한 정보를 매 통신 시 Header에 추가하여 보냄 → 상당한 트래픽 발생

 

▶장점 : 쉽게 사용자를 식별할 수 있음(로그인 상태 유지 가능) / 대부분의 브라우저가 지원 / 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트가 보관하고 있음

▶단점 : 매 HTTP 요청마다 포함되어 API 호출로 서버에 부담(상당한 트래픽 발생), 브라우저를 종료해도 정보 남아있음, 쿠키의 용량이 작음, 암호화 존재 X → 사용자 정보 도난 위험,  만료 기한 있는 key, value 형태의 저장소

 

 

쿠키의 단점을 보안해 webstorage(localstorage, sessionstorage) 기술 탄생

webstorage 장점

• 쿠키와 비교하여 용량이 큼 (5MB까지 사용 가능 (쿠키는 4KB))
• HTML5를 지원하지 않는 브라우저의 경우 사용 불가
• 유효 기간 없이 영구적으로 이용 가능
• 오직 문자형(String) 데이터 타입만 지원

 

localstorage란? 

• 데이터를 사용자 로컬에 보존하는 방식 → 명시적으로 삭제될 때까지 저장
• 데이터를 저장, 덮어쓰기, 삭제 등 조작 가능
• 웹 페이지의 세션이 끝나더라도 데이터가 지워지지 않음  → 여러 탭이나 창 간에 데이터가 서로 공유됨
• BUT, 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당 ( 그렇다고 브라우저 창을 닫으면 삭제되는 것은 아님 )

 

SessionStorage란?

• 브라우저의 세션 기간이 끝날 때 / 탭이나 창을 닫을 때 저장된 데이터가 지워짐
• 현재 페이지가 닫힐 때까지 저장됨
• 따라서 데이터가 영구적으로 보관되지 않음
• 쿠키보다는 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 됨 → 서버에 과부하 → 성능 저하의 요인

 

 

 

---

 

 

어떤 유형의 데이터를 어디에 저장하면 좋을까?

1. 자동 로그인 → localstorage : 사용자가 원할 때 언제든 자동 로그인이 되어야 하기 때문에 영구적으로 저장되는 로컬스토리지를 사용하는 것이 좋을 듯
2. 입력 폼 정보 → Sessionstorage : 회원가입 전 사용자가 입력하는 폼 정보는 노출의 위험이 있기 때문에 바로 삭제하는 것이 좋음.
3. 비로그인 장바구니 → sessionstorage : 비로그인 장바구니는 영구적으로 저장할 필요가 없음.
4. 다시 보지 않음 팝업창 → cookie : 유효 시간이 지나면 저장되지 않음, 다시보지 않음 팝업창은 보통 짧은 기간동안 안 보이게 하는 기능이기 때문에 cookie를 사용하는 것이 좋을 듯!
5. "아이디와 비밀번호를 저장하시겠습니까? → cookie : 유효 시간 뒤에 아이디와 비밀번호가 삭제 되는 것이 바람직

 

 

참고 블로그

https://velog.io/@wearehplk/React-cookie

React - cookie

https://velog.io/@kler/TIL4-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%BF%A0%ED%82%A4-%EC%A0%95%EB%A6%AC

로컬스토리지, 세션스토리지, 쿠키 정리