[JS] 쿠키(Cookie) 이해하기

해당 페이지에서는 쿠키에 대해서 이해하기 위한 목적으로 작성한 글입니다.

 

 

1) 쿠키(Cookie)의 정의와 특징

---

💡 쿠키(Cookie) 란?
- 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간이 존재하는 저장소를 의미합니다.

 

💡 쿠키(Cookie)의 특징

• 쿠키는 브라우저를 종료하더라도 유지됩니다.
• 쿠키의 저장구조는 ‘cookie-name = cookie-value’ 형태의 구조로 저장이 됩니다.
• 쿠키는 하나의 String내에 속성을 세미콜론(;)을 기준으로 구분을 짓습니다.
• 쿠키는 텍스트 파일의 형태로 최대 4KB의 용량 제한을 가지고 있습니다. (value의 값의 제한을 의미합니다.)
• 쿠키는 개인정보가 포함된 보안정보를 사용해서는 안됩니다.
• Authentication 인증 정보 또는 세션에 저장된 토큰 값 등 보안에 필요한 정보를 저장하는 용도로도 사용합니다.
• 쿠키는 특정 시간 초과 후에 쿠키 데이터를 무효화하는 것이 중요합니다.

 

[참고] MDN - 쿠키

Document.cookie - Web API | MDN

 

[참고] W3Schools - 쿠키

JavaScript Cookies

 

2) 쿠키의 속성

---

💡 쿠키를 사용하는데 필수적인 속성 값과 선택적으로 사용되는 속성 값에 대해서 이해합니다.

 

// 쿠키 예시 
document.cookie = `userId=adjh54; path=/; max-age=3600`;

 

[참고] Cookie의 속성

Set-Cookie - HTTP | MDN

 

1. [Essential] Cookie Name

---

💡 쿠키는 "이름-값" 으로 구성되어 있으며, 데이터를 읽고 쓰기 위해 사용되는 속성을 의미합니다.
💡  구조 : <cookie-name>=<cookie-value>

// 쿠키 예시 
document.cookie = `userId=adjh54;`;

 

2. [Optional] Path

---

💡  쿠키 헤더를 보내기 전에 요청된 리소스에 있어야 하는 URL 경로를 나타냅니다.
💡  구조: Path=<path-value>

// 쿠키 예시 
document.cookie = `userId=adjh54; Path=/;`;

 

3. [Optional] Expires

---

💡 쿠키를 파기하는 속성입니다. 해당 만료일은 UTC 시간을 기준으로 지정합니다.
💡 구조: Expires=<date>

const expired = new Date();
expired.setTime(expired.getTime() + expiresHour * 24 * 60 * 60 * 1000);

// 쿠키 예시 
document.cookie = `userId=adjh54; Path=/; Expires=${expired}`;

Date.prototype.toUTCString() - JavaScript | MDN

 

4. [Optional] Max-Age

---

💡 expries의 대안으로 쿠키의 만료시간을 설정할 수 있게 해주는 속성
💡 구조: Max-Age=<number>

// 쿠키 예시 
document.cookie = `userId=adjh54; Path=/; Max-Age=3600`;

 

 

3) 쿠키 조작 방법(등록/조회/수정/삭제)

---

💡 위에서 이해한 쿠키의 속성들을 기반으로 쿠키를 다루는 방법에 대해서 이해합니다.

 

1. 쿠키 등록 / 수정

---

💡 쿠키에서 Cookie-name을 맞추게 된다면 수정 및 쿠키의 시간을 연장이 가능합니다.

/**
 * Cookie의 값을 세팅해주는 함수
 * @param {string} cookieName : 쿠키의 이름
 * @param {string} cookieValue : 쿠키의 값
 * @param {number} expiresHour : 쿠키의 만료일
 * @return {void}
 */
const setCookie = (cookieName: string, cookieValue: string, expiresHour: number): void => {
	const expired = new Date();
	expired.setTime(expired.getTime() + expiresHour * 24 * 60 * 60 * 1000);
	document.cookie = `${cookieName}=${cookieValue}; path=/; Expires=${expired}`;
};

 

2. 쿠키 조회

---

/**
 * Cookie의 값을 반환해주는 함수
 * @param cookieName
 * @returns {string} cookie value
 */
const getCookie = (cookieName: string): string => {
	let result = '';
	// 1. 모든 쿠키를 가져와서 분리 함
	document.cookie.split(';').map((item) => {
		// 2. 분리한 값의 앞뒤 공백 제거
		const cookieItem = item.trim();
		// 3. 키 값과 매칭이 되는 값을 반환
		if (item.includes(cookieName)) {
			result = cookieItem.split('=')[1];
		}
	});
	return result; // 존재하면 값을 반환, 미 존재하면 빈값 반환
};

 

3. 쿠키 삭제

---

/**
 * Cookie의 값을 삭제 해주는 함수
 * @param {string} cookieName : 쿠키의 이름
 * @return {void}
 */
const deleteCookie = (cookieName: string): void => {
	document.cookie = `${cookieName}=0; max-age=0`;
};

 

 

4) [참고] Valina Javascript 외에 라이브러리를 이용한 쿠키 사용

---

💡 Valina JS를 이용하여서 쿠키를 다뤄봤습니다. 라이브러리를 통하여 편하게 쿠키를 다루는 방법이 존재합니다.

 

1. js-cookie

---

js-cookie

 

 

2. react-cookie

---

react-cookie

 

 

오늘도 감사합니다😀