JavaScript - Cookie Attributes
안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 쿠키의 세상으로 sweat한 여정을 떠납니다. 그러나 이说的是 초콜릿 쿠키가 아니라 (그래도 바랍니다!), 우리의 웹 경험을 더 원활하고 개인화된으로 만들어주는 디지털 쿠키입니다. 그럼 가상의 우유를 손에 들고, JavaScript 쿠키 속성의 맛있는 주제로一头潜りましょう!
Cookie Attributes
자세한 내용에 들어가기 전에, 먼저 쿠키 속성이 무엇인지 이해해 보겠습니다. 쿠키를 브라우저가 당신에 대해 저장하는 작은 메모라고 생각해 보세요. 쿠키 속성은 이 메모에 기록된 특별한 지시로, 브라우저가 어떻게 처리해야 하는지 알려줍니다. 이 것은 보안, 기능성, 그리고 사용자 경험에 매우 중요합니다.
다음은 우리가 논의할 주요 쿠키 속성에 대한 간략한 개요입니다:
| 속성 | 설명 |
|---|---|
| Name/Value | 쿠키의 핵심 데이터 |
| Path | 서버에서 쿠키에 접근할 수 있는 경로를 지정 |
| Expires | 쿠키의 만료 날짜를 설정 |
| Max-Age | 쿠키가 지속되어야 할 시간을 정의 |
| Domain | 쿠키를 사용할 수 있는 도메인을 결정 |
브라우저에서 속성 값을 확인하는 방법
쿠키를 설정하기 전에 먼저 확인하는 방법을 배워보겠습니다. 브라우저의 개발자 도구(보통 F12)를 엽니다. Application이나 Storage 탭으로 이동하여 Cookies를 찾아보세요. 쿠키통을 기어보는 것과 같습니다!
// 간단한 쿠키 설정
document.cookie = "username=John Doe";
// 콘솔에서 확인
console.log(document.cookie);이 코드를 실행하고 콘솔을 확인하면 "username=John Doe"를 볼 수 있습니다. 쿠키 설정하고 읽는 것은 이렇게 간단합니다!
쿠키의 Name/Value 속성
이름/값 쌍은 쿠키의 핵심입니다. 키와 그에 해당하는 보물과 같습니다.
// 이름과 값으로 쿠키 설정
document.cookie = "favoriteColor=blue";
// 여러 개의 쿠키 설정
document.cookie = "favoriteAnimal=dog";
document.cookie = "favoriteNumber=42";
// 쿠키 읽기
console.log(document.cookie);이 outputs는 모든 쿠키를 출력합니다. 기억하세요, 각 document.cookie 할당은 새로운 쿠키를 추가하며, 기존의 것을 덮어쓰지 않습니다!
쿠키의 Path 속성
Path 속성은 쿠키가 접근할 수 있는 웹사이트의 페이지를 결정합니다. 쿠키가 웹사이트의 집안에서 어느 방에 들어갈 수 있는지 말하는 것과 같습니다.
// 특정 경로에 대한 쿠키 설정
document.cookie = "user=Alice; path=/dashboard";
// 전체 사이트에 대한 쿠키 설정
document.cookie = "theme=dark; path=/";이 예제에서 "user" 쿠키는 "/dashboard" 경로와 그 하위 경로에서만 접근할 수 있으며, "theme" 쿠키는 전체 사이트에서 사용할 수 있습니다.
쿠키의 Expires 속성
Expires 속성은 쿠키가 삭제되어야 하는 특정 날짜를 설정합니다. 우유에 만료 날짜를 붙이는 것과 같습니다!
// 7일 후 만료되는 쿠키 설정
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = "subscription=premium; expires=" + expirationDate.toUTCString();이 쿠키는 7일 후 자동으로 파괴됩니다. 미션 임파서블, 쿠키 스타일!
쿠키의 maxAge 속성
maxAge 속성은 쿠키가 지속되어야 할 시간을 초 단위로 설정합니다. 쿠키에 대한 다운타임 타이머와 같습니다.
// 1시간 동안 지속되는 쿠키 설정
document.cookie = "session=active; max-age=3600";
// 즉시 삭제되는 쿠키 설정
document.cookie = "tempData=123; max-age=0";첫 번째 쿠키는 1시간 동안 지속되고, 두 번째 쿠키는 생성되자마자 사라집니다!
쿠키의 Domain 속성
도메인 속성은 쿠키를 접근할 수 있는 도메인을 지정합니다. 친구들이 비밀 레시피를 공유할 수 있는지 결정하는 것과 같습니다.
// 현재 도메인 및 모든 하위 도메인에 대한 쿠키 설정
document.cookie = "language=en; domain=.example.com";
// 정확한 도메인에 대한 쿠키 설정
document.cookie = "userId=12345; domain=shop.example.com";첫 번째 예제에서 쿠키는 example.com 및 그 하위 도메인에서 접근할 수 있으며, 두 번째 쿠키는 shop.example.com에만 적용됩니다.
이제 모든 것을 하나의 더 복잡한 예제로 통합해 보겠습니다:
function setCookie(name, value, days, path, domain, secure) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires +
(path ? "; path=" + path : "") +
(domain ? "; domain=" + domain : "") +
(secure ? "; secure" : "");
}
// 사용법
setCookie("username", "JohnDoe", 7, "/", "example.com", true);이 함수를 사용하면 우리가 논의한 모든 속성을 가진 쿠키를 설정할 수 있습니다. 쿠키 생성에 대한 스위스 아ーノ이刀와 같습니다!
기억하세요, 쿠키는 강력한 도구이지만, 강력한 힘에는 큰 책임이 따릅니다. 쿠키를 사용할 때는 항상 사용자의 프라이버시와 보안을 염두에 두세요.
그리고 여러분! 이제 JavaScript에서 쿠키를 다루는 데 필요한 모든 준비가 되었습니다. 다음에 웹 브라우저가 당신의 선호 사항을 기억할 때, 그 뒤에 숨겨진 sweat한 비밀이 무엇인지 알게 될 것입니다. 행복한 코딩을 하고, 항상 쿠키가 신선하고 안전하길 바랍니다!
Credits: Image by storyset