관리자 페이지의 간단한 로그인 기능을 구현하려고 하는데
백엔드 없이 로그인 기능을 구현해야하는 상황이었다.
하지만 단순하게 특정 비밀번호를 입력했을 때 특정 페이지를 보여줄 수 있도록 코드를 짜면
새로고침 했을 때 다시 로그인을 해야한다는 불편함이 있었다.
그래서 어떤 방식을 쓸까 생각하다가 쿠키를 사용해보기로 했다.
나는 쿠키를 구현하는데 react-cookie(리액트 쿠키)를 사용했다.
쿠키란
localStorage 를 이전에 쓴 적이 있는데 이것과 유사하다고 느꼈다.
기본적으로 key와 value, 만료기한이 있는 저장소 개념이며, 브라우저에 저장이 된다.
브라우저(클라이언트)에 300개까지 저장이 가능하며 1개의 쿠키 당 4KB 정도의 크기를 가지고 있다고한다.
설치
npm install react-cookie사용
예를 들어 나는 loggedIn 이라는 쿠키를 사용하려고 한다.
import {useCookies} from 'react-cookie'
const [cookies, setCookie, removeCookie] = useCookies(["loggedIn"]);
const handleLogin = (password) => {
if (password === "1234") {
const time = 3600; //1시간
const expiration = new Date(Date.now() + time * 1000);
// setCookie('키값','데이터값',{path,expires,maxAge...})
setCookie("loggedIn", true, { path: "/", expires: expiration });
setTimeout(() => {
// 1시간 후에 알림창을 표시하고 페이지를 새로고침
alert("세션이 만료되었습니다. 다시 로그인해주세요.");
window.location.reload();
}, time * 1000); // 3초 후에 실행
}
};먼저 react-cookie 에서 useCookies 를 import 한다.
그리고 useCookies 로 cookies, setCookie, removeCookie 를 사용할 수 있도록 만든다.
나는 setCookie 로 cookie 를 세팅하는 코드를 짰는데
키값 = 쿠키 이름
데이터 값 = 쿠키의 값 (나는 true 값을 넣었다)
path = 쿠키의 경로(문자열)
expires = 만료날짜(날짜)
maxAge = n초 후에 쿠키 만료(초단위)
이런식으로 설정할 수 있다.
나는 1시간 뒤에 쿠키가 만료되길 원했기 때문에 Date.now() 로 현재 시간을 구하고 여기에 3600(1시간)을 더했다.
또한 path 를 "/" 로 설정해주면 모든 페이지에서 쿠키에 액세스할 수 있다.
결과
비밀번호를 입력하고 로그인을 해보자.
개발자 도구(검사) > 애플리케이션 > 쿠키에 들어가면 쿠키를 확인할 수 있다.
바로는 안뜨고 새로고침 버튼을 눌러주면 업데이트된 쿠키가 보인다
loggedIn 이라는 이름, true 값을 가진 쿠키가 생겨난 것을 볼 수 있다.
만료 시간을 1시간으로 잡아놨기 때문에 1시간 뒤면 세션이 만료되었다는 alert 이 뜨고
새로고침을 해서 다시 로그인을 해야하는 창으로 이동한다.(위 코드 참고)
라이브러리를 사용해서 어렵지않게 구현할 수 있었다.
다음에 쿠키를 다룰 일이 또 있을 수 있으니 잘 정리해두자
ref:https://velog.io/@jinu_820/react-cookie-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BF%A0%ED%82%A4
