쿠키!가 어떤 놈인지는 알고 있지만 정확하게 몰랐씁니다 ..
구글링 해보니 가장먼자 나오는 녀석이 위키백과 더라구요 밑에 글을 보시죠 !
쿠키(영어: cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다.[1] HTTP 쿠키, 웹 쿠키, 브라우저 쿠키라고도 한다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다.
일반인들도 쉽게 쿠키를 확인할수 있어요 키보드 F12를 눌러서 확인해보면
아래와 같이 확인할수가 있어요!
보면... 어.. 그러니까.. 크게보면 내가 활동하고 있는? 했던? 도메인드리 담겨져 있고 쿠키밸류를 보면 AccessToken처럼 생겻네요
Session
위와 같이 F12를 누르고 어플리케이션으로 따라가서 확인할수 있습니다!
와우 아까부터 검색했던 모든것들이 담겨져있네요
ㅋㅋ 세션확인하는 방법ㅋㅋ 궁금해서 검색해봤습니당 ㅋㅋ
세션이 쿠키에 비해 보안도 높은 편이나 쿠키를 사용하는 이유는
세션은 서버에 저장되고, 서버자원을 사용하기 때문에 사용자가 많을 경우 소모되는 자원이 상당합니다!
이러한 자원관리 차원에서 쿠키와 세션을 적절한 요소 및 기능에 병행 사용하여,
서버 자원의 낭비를 방지하며 웹사이트의 속도를 높일 수 있어요!
자 세션을 확인하러 가봐요!!
Local Storage
localStorage의 주요 기능은 다음과 같습니다.
오리진이 같은 경우 데이터는 모든 탭과 창에서 공유됩니다.
브라우저나 OS가 재시작하더라도 데이터가 파기되지 않습니다.
setItem(key, value) – 키-값 쌍을 보관합니다.
getItem(key) – 키에 해당하는 값을 받아옵니다.
removeItem(key) – 키와 해당 값을 삭제합니다.
clear() – 모든 것을 삭제합니다.
key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
length – 저장된 항목의 개수를 얻습니다.
예시를 들어보겠습니다!
저는 로그인하면서 생성되는 토큰을 스토리지에 저장하는 방식으로 했습니다!
구현하기위해서 사용되는 라이브러리들이 recoil 에서 제공하는 atom , 과 useRecoilState 을 설치해야해요!
저는 공통으로 사용하고자 commens로 따로 빼서 사용하고 있어요
key , value 값으로 정의할수 있고 default는 기본값을 정해주는곳입니다!
저장했으니 토큰과 유저의 정보를 가져와야 해요 ~ 가봅시돠~~
useEffect 를 사용해서 랜더링 되면 토큰과 유저의 정보를 담아줬어요
[] =< 의존성 배열에 flag값을 넣어서 값이 변경될때 토큰을 넣어줘도 되구요
물론 이 토큰과 유저의 정보는 F12로 확인할수 있습니다!!
지금 이방법은 보안이 취약한 단점이 있으니 실제로 배포될때는 리프레쉬 기능을 사용하여 배포를 합니다!!!
