자바스크립트와 쿠키

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 쿠키의 세계로 맛있는 여행을 떠납니다. 아, 우유에浸して먹는 그런 종류가 아니라 (하지만 지금 한 개 먹고 싶지 않나요?) 인터넷 경험을 더 원활하고 개인화된으로 만드는 디지털 쿠키를 말이죠. 그럼 가상의 요리복을 입고, 코딩을 시작해봅시다!

JavaScript - Cookies

쿠키는 무엇인가요?

쿠키는 사용자의 컴퓨터에 방문한 웹사이트가 저장하는 작은 데이터 조각입니다. 이를 통해 웹사이트는 사용자에 대해 기억할 수 있는 작은 디지털 메모지라고 생각하면 됩니다. 이 "메모지"는 사용자의 기본 설정, 로그인 정보, 또는 쇼핑카트에 있는 상품 등 다양한 정보를 포함할 수 있습니다.

처음 쿠키에 대해 배울 때, 작은 컴퓨터 엘프들이 메모를 쓰고 내 PC에 넣는다고 상상했었습니다. 실제로는 그렇게 작동하지 않지만, 개념을 이해하는 데는 나쁜 방법이 아닙니다!

쿠키가 필요한 이유는 무엇인가요?

"왜 이 쿠키라는 것 없이 웹사이트가 정보를 기억할 수 없나요?"라고 궁금할 수 있습니다. 그럼 이 작은 이야기를 들려드리겠습니다.

BUSY한 카페에서 커피와 샌드위치를 주문했지만 화장실을 사용해야 합니다. 화장실을 다시 나왔을 때, 바리스타는 많은 고객 중에서 어떻게 당신의 주문을 알 수 있을까요? 디지털 세계에서 쿠키가 유용한 이유입니다.

쿠키는 다음과 같은 이유로 필요합니다:

사용자 기본 설정 기억
사용자 로그인 유지
쇼핑카트 항목 추적
사용자 경험 개인화
개선을 위한 사용자 행동 분석

쿠키가 없다면, 매번 웹사이트를 방문할 때마다 첫 만남인 것처럼, 기억이 없고 로그인이 저장되지 않으며 쇼핑카트에 아이템이 없습니다. 매우 불편하지 않나요?

어떻게 작동하나요?

이제 디지털 쿠키가 어떻게 작동하는지 조금 더 깊이 탐구해보겠습니다. 걱정 마세요, 복잡하지 않습니다!

웹사이트를 방문할 때, 웹사이트는 브라우저로 쿠키를 보낼 수 있습니다. 브라우저는 이 쿠키를 컴퓨터에 저장합니다. 다음에 같은 웹사이트를 다시 방문할 때, 브라우저는 쿠키를 웹사이트로 다시 보냅니다. 이는 컴퓨터와 웹사이트 간의 비밀 손 shake와 같습니다.

다음은 그 작동 방식의 간단한 다이어그램입니다:

사용자가 웹사이트를 방문
↓
웹사이트가 쿠키를 보냄
↓
브라우저가 쿠키를 저장
↓
사용자가 웹사이트를 다시 방문
↓
브라우저가 쿠키를 보냄
↓
웹사이트가 사용자를 인식

이제 기본 개념을 이해했으므로, 자바스크립트에서 쿠키를 다루는 방법을 시작해보겠습니다!

쿠키 설정/ 저장

쿠키 설정은 나중에 확인할 수 있는 메모를 남기는 것과 같습니다. 자바스크립트에서는 document.cookie 속성을 사용하여 쿠키를 생성합니다. 다음은 그 방법입니다:

document.cookie = "username=John Doe";

이를 설명해보겠습니다:

document.cookie는 쿠키와 상호작용하는 데 사용되는 속성입니다.
"username=John Doe"는 실제 쿠키입니다. 키-밸류 쌍으로, username이 키이고 John Doe가 값입니다.

여러 개의 쿠키를 설정할 수도 있습니다:

document.cookie = "username=John Doe";
document.cookie = "age=30";
document.cookie = "city=New York";

각 document.cookie 문은 새로운 쿠키를 생성합니다. 기존의 쿠키를 덮어쓰지 않습니다.

쿠키 읽기

쿠키 읽기는 자신이 남긴 메모를 확인하는 것과 같습니다. 다음은 쿠키를 읽는 방법입니다:

let allCookies = document.cookie;
console.log(allCookies);

이는 모든 쿠키를 하나의 긴 문자열로 가져옵니다. 하지만 일반적으로 특정 쿠키 값을 가져오고 싶습니다. 다음은 그 기능을 제공하는 함수입니다:

function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}

// 사용 예시
let username = getCookie("username");
console.log(username); // 출력: John Doe

이 함수는 쿠키 문자열을 분리하고 루프를 통해 일치하는 쿠키를 찾아 값을 반환합니다.

쿠키 만료 날짜 설정

쿠키는 우유처럼 오래 두면 상할 수 있습니다. 기본적으로 쿠키는 브라우저 세션结束时 만료됩니다. 하지만 특정 만료 날짜를 설정할 수 있습니다:

let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

document.cookie = "username=John Doe; expires=" + expiryDate.toUTCString();

이 쿠키는 1개월 후 만료됩니다. expires 속성은 브라우저가 쿠키를 삭제해야 할 시간을 알려줍니다.

쿠키 삭제

쿠키를 버리는 경우도 있습니다. 쿠키를 삭제하려면 만료 날짜를 과거 날짜로 설정합니다:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

이는 쿠키의 값을 공백으로 설정하고 만료 날짜를 과거 시간으로 설정하여 쿠키를 효과적으로 삭제합니다.

쿠키 업데이트

쿠키를 업데이트하는 것은 새로운 값을 설정하는 것과 같습니다:

document.cookie = "username=Jane Doe";

이미 존재하는 username 쿠키가 있다면 이는 값을 업데이트합니다. 쿠키가 없다면 새로운 쿠키를 생성합니다.

쿠키 메서드 표

다음은 우리가 배운 메서드를 요약한 표입니다:

작업	메서드
쿠키 설정	`document.cookie = "key=value";`
모든 쿠키 읽기	`let allCookies = document.cookie;`
특정 쿠키 읽기	`getCookie()` 함수 사용
만료 날짜 설정	`document.cookie = "key=value; expires=date";`
쿠키 삭제	만료 날짜를 과거 날짜로 설정
쿠키 업데이트	쿠키를 다시 설정

이제 여러분은 자바스크립트에서 쿠키를 다루는 지식을 갖추었습니다. 강력한 권한이 주어졌으므로 사용자의 프라이버시를 존중하고 쿠키 사용에 투명하시길 바랍니다.

다음에 웹 브라우저에서 사이트가 당신의 기본 설정을 기억할 때, 미소를 지으며 "아, 쿠키가 작동하고 있구나!"라고 생각해보세요. 행복한 코딩 되세요, 그리고 디지털 쿠키는 항상 신선하게, 진짜 쿠키는 항상 맛있게 하세요!

Credits: Image by storyset