쿠키 소개: JavaScript 쿠키 이해하고 다루기

Preslav Dobrev2022-10-25 · 6 min read

브라우저 쿠키 또는 HTTP 쿠키는 아주 작은 데이터 조각으로 구성된 텍스트 파일입니다. 웹사이트는 이 정보를 사용하여 사용자의 여정을 추적하며, 이를 통해 맞춤형 기능을 제공하고 브라우징 경험을 개선합니다. 쿠키는 최대 4096바이트의 데이터를 저장할 수 있습니다. 하지만 브라우저에 따라 도메인당 추가할 수 있는 쿠키의 수는 제한되어 있습니다.

HTTP 쿠키에 대한 기본적인 이해는 단순히 재미로 브라우징을 하든 이를 통해 생계를 유지하든 모든 인터넷 사용자에게 필수적입니다. 이 가이드는 쿠키와 다양한 쿠키 유형에 대해 자세히 소개해 드립니다. 저희의 목표는 여러분이 JavaScript 쿠키를 이해하고 다룰 수 있도록 돕는 것입니다..

시작해 봅시다!

사전 요구 사항

이 튜토리얼을 따라 하려면 다음이 필요합니다:

기본적인 JavaScript에 대한 이해.

JavaScript 쿠키 시작하기

다루는 것은 JavaScript 쿠키는 간단합니다. 이를 통해 쿠키를 손쉽게 생성, 수정 및 검색할 수 있습니다. 또한 Document 객체의 cookie 속성을 사용하여 이름, 값, 길이 등 쿠키의 속성을 조작하고 제한할 수 있습니다.

쿠키의 유형

먼저, 다양한 쿠키 유형을 살펴보겠습니다:

퍼스트 파티 쿠키

이 쿠키는 사용자가 웹사이트를 방문할 때마다 생성되고 저장됩니다. 웹사이트 소유자는 이를 통해 사용자의 데이터에 대한 상세한 통찰력을 얻고 더 나은 브라우징 경험을 제공할 수 있습니다.

지속성 쿠키

이러한 종류의 쿠키는 발급자가 만료일을 지정합니다. 따라서 훨씬 더 오랜 기간 동안 사용됩니다. 즉, 브라우저를 닫아도 쿠키는 브라우저에 남아 있습니다. 또한 쿠키를 생성한 웹사이트를 방문할 때마다 데이터가 발급자에게 다시 전송됩니다.

세션 쿠키

이 쿠키는 일시적이며 브라우저가 열려 있는 동안에만 브라우저 메모리에 저장됩니다. 브라우저를 닫으면 쿠키가 브라우저 기록에서 제거되므로 보안 위험이 낮습니다. 만료일을 지정할 필요가 없습니다.

서드 파티 쿠키

서드 파티 쿠키는 현재 방문하고 있지 않은 사이트에서 생성됩니다. 주로 이러한 쿠키는 광고를 클릭한 사용자를 추적하여 해당 사용자를 추천 도메인과 연결하는 데 유용합니다.

쿠키 생성하기

두 가지 방법을 사용하여 쿠키를 생성할 수 있습니다:

전송하기: Set-Cookie 헤더를 HTTP 응답 헤더에 포함합니다. 웹 서버에 사용된 기술에 따라 도구 및 라이브러리를 사용하여 쿠키 헤더를 관리할 수 있습니다. 쿠키에는 만료일과 같은 정보와 secure 지시문 및 HttpOnly 플래그와 같은 보안 기능이 포함될 수 있습니다.

HttpOnly: 브라우저가 쿠키를 읽거나 수정할 수 없음을 나타냅니다.
Secure: 쿠키가 HTTPS를 통해서만 전송될 수 있음을 나타냅니다.

JavaScript의 document.cookie 속성을 사용하여 쿠키를 생성, 읽기 및 삭제할 수 있습니다.

1단계 — 쿠키 생성하기

다음으로 JavaScript 쿠키를 생성하는 과정을 보여드리겠습니다. 쿠키는 이름-값 쌍 형식으로 저장됩니다:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

위의 쿠키에서 UserName 은(는) 쿠키의 이름이고, CloudSigma 은(는) 여기에 저장된 값입니다.

쿠키에는 만료일이 있습니다. 기본적으로 브라우저를 닫으면 자동으로 삭제됩니다. 쿠키에 만료일을 추가할 수도 있습니다:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

기본적으로 쿠키는 현재 페이지에 속합니다. 하지만 path 매개변수를 사용하여 쿠키를 지정할 수도 있습니다:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age vs Cookie Expire

필요에 따라 이 두 가지 전략을 사용하여 쿠키의 만료일을 설정할 수 있습니다. 둘의 차이점은 expires 은(는) 쿠키가 삭제되는 만료일을 설정합니다. 반대로 max-Age 은 쿠키가 삭제될 시간을 초 단위로 설정합니다. 아쉽게도, max-age 은 모든 브라우저에서 지원되지 않습니다.

다음은 expires 및 max-age를 이용한 쿠키 설정 예시입니다.:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // 밀리초 단위
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // 밀리초 단위

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

2단계 — 쿠키 읽기

The document.cookie 속성은 문자열을 반환합니다. 쿠키가 두 개 이상인 경우, 세미콜론( ;)과 공백을 사용하여 구분합니다.

우리는 split() 메서드를 사용하여 쿠키 목록에서 개별 쿠키를 추출합니다. 이 메서드는 목록을 개별 이름과 값 쌍으로 분할합니다. 완료되면 읽고자 하는 대상 쿠키를 검색할 수 있습니다:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Welcome again, " + UserName);
} else {
    firstName = prompt("Enter your UserName:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Welcome again, " + UserName);

} else {

firstName = prompt("Enter your UserName:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

코드에서 생성한 함수들을 이해해 봅시다:

함수 이름	설명
setCookie()	쿠키를 생성합니다
getCookie()	쿠키의 값을 읽습니다
checkCookie()	Verifies whether the UserName이 설정되었는지 여부를 확인합니다.

다음 단계에서는 쿠키를 업데이트하는 방법을 알아보겠습니다.

3단계 — 쿠키 업데이트하기

쿠키 속성에 새로운 값을 설정할 수 있습니다. 이 예시에서는 사용자의 구독을 월간 요금제에서 분기별 요금제로 업데이트해 보겠습니다.

Let’s update the max-age 속성을 UserName 쿠키에 대해 30일에서 180일로 업데이트해 보겠습니다:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

4단계 — 쿠키 삭제하기

동일한 이름으로 쿠키를 다시 설정하면 지우려는 쿠키가 삭제됩니다. 다음과 같이 max-age 속성을 설정하여 쿠키를 삭제할 수 있습니다: 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

또한, 쿠키에 지정된 경로가 있는 경우, 다음과 같이 지정하여 삭제합니다:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

결론

쿠키는 웹사이트가 올바르게 작동하고 기능을 수행하는 데 필수적입니다. 이 입문 튜토리얼에서는 쿠키와 다양한 쿠키 유형에 대해 자세히 알아보았습니다. 또한 예제를 통해 쿠키를 다루는 방법도 배웠습니다. 이제 JavaScript 쿠키를 편안하게 사용할 수 있게 되었으므로, 이 주제에 대해 더 배우고 탐구하기 위해 맞춤형 쿠키를 만들어 보세요.

또한, JavaScript 및 웹 개발에 대해 탐색할 수 있는 많은 튜토리얼이 저희 블로그:

즐거운 컴퓨팅 되세요!

Preslav Dobrev

작성자 · CloudSigma

Preslav Dobrev는 CloudSigma의 크리에이티브 디자이너로서, 전통적이고 혁신적인 마케팅 채널을 활용하여 일관된 비즈니스 정체성을 구축하는 데 중점을 두고 있습니다. 그는 영향력 있는 브랜드 내러티브를 창출하기 위해 예술적 비전과 전략적 마케팅을 결합하는 데 능숙합니다.