React-cookie3 React(68) react-cookie 쿠키삭제하고 로그아웃 기능구현하기 react-cookie 의 활용에 대한 세번째 포스팅이다. 이를 통해 쿠키에 대한 지식과 여러 기능을 구현해보는 좋은 기회가 되었던 것 같다 :) 로그인 / 로그아웃 기능은 모든 웹에서 기초적인 필수기능이라고 생각한다. 그래서 로그아웃 기능은 어려울 줄 알았는데, 프론트에서의 처리는 예상보다 간단....(?) 했다. 그럼 로그아웃을 기능을 구현하러 가보자 결과화면 미리보기 딱히 미리보기라고 할 것도 없지만 어쨋든 이 버튼을 클릭하면 로그아웃이 될 것이다. React(68) react-cookie 쿠키삭제하고 로그아웃 기능구현하기 쿠키 값을 삭제 후, 로그인 페이지로 되돌아가는 로그아웃 버튼을 구현해보았다. 보통은 url을 통해 로그아웃 페이지만 이동하면 거기서 쿠키를 지워주게 되고 메인페이지로 리다이렉트.. 2022. 5. 8. React(67) react-cookie 로 저장된 쿠키값 가져오기 웹 사이트 상단에 얇은 띠배너가 있다. 그로인해 레이아웃의 height 가 영향을 받았다. 띠배너를 삭제했을 때 이미 저장된 쿠키값을 가져와서 height 를 동적으로 주려고 한다. 자, 서론은 여기까지 하고 react-cookie 를 사용하여 쿠키값을 불러와보자 React(67) react-cookie 로 저장된 쿠키값 가져오기 Banner.tsx 배너가 들어있는 배너 컴포넌트에서는 쿠키 키가 선언되어 [배너 닫기] 버튼을 누르면 'hiddenBanner' 라는 쿠키값이 저장된다. (쿠키값을 저장하는 과정은 생략하겠다.) const COOKIE_KEY = 'hiddenBanner'; . . . // [배너 닫기] 버튼을 클릭시 위의 쿠키키가 추가됨 ** hoxy 쿠키값 세팅하는 과정이 궁금하시다면? (.. 2022. 4. 17. React(66) react-cookie 로 1회성 모달 만들기 가끔 웹사이트를 들어가면 1회성 이벤트 팝업이 뜰때가 있다. [ 하루동안 보지않기 / 앞으로 보지않기 ] 등의 옵션도 있다. 이런 팝업은 time range 를 쿠키값을 설정해서 손쉽게 만들 수 있다. 그럼 함께 만들어보자 React(66) 쿠키를 사용해 페이지 진입시 모달창 한 번만 뜨게 만들기 react-cookie 라이브러리를 사용해서, [모달창 닫기] 를 클릭하면 hideModal() 함수가 실행되며 10년 후에 expires 되는 쿠키 값을 주어 당분간(10년동안?) 보이지 않게 하자 일단 기본세팅해주자. 임포트도 해주고, 쿠키값을 담을 변수를 만들어주자. import { useCookies } from 'react-cookie'; // 리액트 쿠-키 임포트 해오고 import moment fr.. 2022. 4. 8. 이전 1 다음 반응형
