# react cookie

[react] 로그인 상태 유지
웹사이트에서 권한이 필요한 동작을 하기 위해서는 로그인이 필요하다. 로그인을 하게되면 유지해야 되는 값 (ex: token) 들을 저장해서 가지고 있어야 하고 어떤 방식을 선택해야 할지 고민하게 되었다. 이번에 업무중 고민하면서 선택한 방법을 작성한다. 상황 먼저, 업무중 생긴 상황이 있었는데 로그인 상태 유지 여부를 체크하는 체크박스를 로그인할 때 추가해서 로그인 유지 여부를 선택할 수 있는 기능 추가가 필요한 상황이었다. 체크박스 체크 => refreshToken 만료 전까지 로그인 유지 체크박스 해제 => 1시간 로그인 유지 현재 aws cognito 를 연동해서 사용하고 있고 아쉽게도 [공식 라이브러리](https://www.npmjs.com/package/amazon-cog

2023. 01. 17
cookie 가져오기 react-cookie 설치 setting cookie 저장 cookie 사용 참조 : https://blog.pumpkin-raccoon.com/80
main-프로젝트/ react-cookie, jwt-decode
react-cookie 서버에서 보내온 jwt 토큰을 쿠키에 저장하는 방법을 적용해보았다. (저번 프리프로젝트 때는 로컬 스토리지에 저장했었다) 쿠키 관련 함수 작성 1. npm install react-cookie 설치 : npm install react-cookie 2. src/util/cookie/index.js setCookie함수를 통해 쿠키를 만들고, getCookie함수를 통해 필요 시 쿠키를 가져오고, removeCookie 함수를 통해 필요 시 쿠키를 지운다 각 인자에 대한 설명은 npmjs.com 사이트에 자세히 나와있다. https://www.npmjs.com/package/react-cookie > name (string): cookie name value (string|object): save the value and stringify the object if needed options (object)

react-cookie (리액트 쿠키)
쿠키의 정의 쿠키는 기본적으로 key값, value값, 만료기한이 있는 저장소 개념이다 대부분의 브라우저에서 지원가능하며 브라우저에 저장이 되는것이다. 서버에서 쿠키에 데이터값을 요청하면 브라우저에 저장된 값이 만료되지 않았다면 서버로 전달되며 클라이언트(브라우저)에 300개까지 저장 가능하며 한개의 쿠키당 4kb정도의 크기를 가지고 있다 설치 import 여기서 useCookies에 인자로 들어가는 값은 의존성을 띄며 값을 적지 않으면 모든쿠키중 값이 변할때 마다 렌더링이 된다. setCookie 첫번째는 키값으로 쓸 이름 두번째는 넣을 데이터값 세번째는 path = 경로(문자열): 쿠키 경로, /모든 페이지에서 쿠키에 액세스할 수 있도록 하려면 경로로 사용 expires = 만료(날짜): 쿠키의 절대 만료 날짜이며 데이터타입이 날짜여야한다 maxAge(숫자): 클라이언트가 쿠키를 수신한 시점부터 들어간 인자값으로 n
SSR 토큰 관리 (next.js + react-cookie)
1. 로그인에 성공하면 쿠키에 백엔드에서 받은 토큰을 저장한다. 2. getInitialProps로 web이 실행되면 SSR cookie가 날아가지않게 다시 저장해준다. 3. 새로고침, 페이지 이동시 token 유지 > refresh는 local로, access는 cookie