[React] 로그인 할때 쿠키 저장하기

shared/Cookie.js

로그인 페이지에서 ID/PW를 입력하면 user_id , user_pwd를 쿠키로 저장을 하자.

 

1. 자바스크립트 문법 

 

* 자바스크립트에서 날짜를 담당하는 객체 사용법

* 키값을 기준으로 나누는방법(파싱)

 

2. 코드작성 및 설명

- 필요한 함수를 빈내용으로 모두 작성하고 시작하자.

   (저장된 쿠키값을 가져오기, 쿠키에 저장하기, 쿠키 지우기)

  const getCookie = (name) => {

 

  }

  // getCookie는 name으로 value를 가져온다. 

 

  const setCookie = (name, value, exp = 5) => {

 

  }

// setCookie는 저장을 해야하므로, 이름,값,만료일을 받아와야한다. 

   (exp = 5 라고 지칭하면 exp를 받아오지않아도 setCookie에서 사용할 수 있도록 기본값을 지정해주는것)

 

 const deleteCookie = (name) => {

 

  }

 

export { getCookie, setCookie, deleteCookie };

//export 해줘서 다른 컴포넌트에서도 사용할 수 있도록 해주는것 잊지말자. 

 

- 로그인 페이지에 함수를 불러오기 (Login.js)

import { getCookie, setCookie, deleteCookie } from "../shared/Cookie";

 

- 로그인 버튼에 실행될 함수 만들어주기

 

- Cookie.js 함수 만들기

 

3. 완성코드

// 키값 기준으로 쿠키에 저장된 값을 가져오는 함수

const getCookie = (name) => {

// 쿠키 값을 가져옵니다.

let value = "; "+document.cookie;

// 키 값을 기준으로 파싱합니다.

let parts = value.split("; " + name + "=");

// value를 return!

if (parts.length === 2) {

return parts.pop().split(";").shift();

}

};

 

// 쿠키에 저장하는 함수

const setCookie = (name, value, exp = 5) => {

// 날짜를 만들어줍니다.

let date = new Date();

date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);

// 저장!

document.cookie = `${name}=${value}; expires=${date.toUTCString()}`;

};

 

// 만료일을 예전으로 설정해 쿠키를 지웁니다.

const deleteCookie = (name) => {

let date = new Date("2020-01-01").toUTCString();

 

console.log(date);

 

document.cookie = name+"=; expires="+date;

 

};

 

export { getCookie, setCookie, deleteCookie };