JavaScript Katana

JavaScript 쿠키 튜토리얼: 쿠키를 안전하게 설정, 가져오기 및 관리하는 방법

DOM 및 브라우저 조작
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introduction

웹 개발에서 JavaScript를 사용할 때, 쿠키는 사용자와 관련된 정보를 저장하는 중요한 메커니즘으로 널리 활용됩니다.
예를 들어, 로그인 세션을 유지하거나 장바구니 데이터를 저장하는 데 흔히 사용되어 사용자 편의성을 크게 향상시킵니다.

하지만 초보자에게는 “쿠키가 무엇인가?” 혹은 “JavaScript로 쿠키를 어떻게 조작할 수 있는가?”와 같은 개념이 이해하기 어려울 수 있습니다.

이 글에서는 JavaScript 쿠키 처리에 대해 기본 개념부터 고급 활용까지 자세히 설명합니다.
실용적인 코드 예제를 통해 초보자와 중급 개발자 모두에게 유용하도록 구성했습니다.

2. What Is a Cookie?

Basic Concept of Cookies

쿠키는 웹 브라우저에 저장되는 작은 데이터 조각입니다.
주로 다음과 같은 용도로 사용됩니다:

  • 웹사이트에 사용자가 입력한 정보(예: 로그인 자격 증명) 저장
  • 마케팅 및 분석을 위한 방문자 행동 기록
  • 사용자 경험 향상을 위한 설정 보존(예: 언어 선호도 또는 테마 설정)

How Cookies Work

쿠키는 키‑값 쌍으로 구성되며 다음과 같은 형식으로 저장됩니다:

name=value; expires=Wed, 31 Dec 2025 23:59:59 GMT; path=/

위 예시에서 키 name에 값 value가 할당되고, 만료 날짜와 지정된 경로가 함께 포함됩니다.

Main Components of a Cookie

  1. Name and Value (name=value) – 쿠키의 기본 정보
  2. Expiration (expires or max-age) – 쿠키가 유효한 기간 지정
  3. Path – 쿠키가 접근 가능한 디렉터리 또는 페이지 정의
  4. Secure Attribute – HTTPS 연결을 통해서만 쿠키 전송 보장
  5. SameSite Attribute – 크로스 사이트 요청 공격 방지에 도움

이러한 유연한 설정 덕분에 쿠키는 사용자 경험을 향상시키면서 보안을 강화하는 데 유용합니다.

3. Basic Cookie Operations in JavaScript

JavaScript에서는 document.cookie 속성을 사용해 쿠키를 조작합니다.
이 섹션에서는 기본적인 작업들을 소개합니다.

Setting a Cookie

새 쿠키를 생성하는 예시는 다음과 같습니다.

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

핵심 포인트:

  • username=John : 키와 값을 지정합니다.
  • expires : 만료 날짜를 설정합니다. 생략하면 브라우저가 닫힐 때 쿠키가 삭제됩니다.
  • path=/ : 사이트 전체에서 쿠키를 사용할 수 있게 합니다.

Getting Cookies

모든 쿠키는 다음과 같이 가져올 수 있습니다.

console.log(document.cookie);

예시 출력:

username=John; theme=dark; lang=ja

쿠키가 세미콜론(;)으로 구분되므로 개별 값을 처리하려면 문자열을 분리해야 합니다.

Deleting a Cookie

쿠키를 삭제하려면 만료 날짜를 과거로 설정합니다.

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

위 코드는 username이라는 이름의 쿠키를 제거합니다.

4. Cookie Attribute Settings

쿠키 속성은 보안 및 만료 제어에 중요한 역할을 합니다.

Setting Expiration

  1. expires 속성 사용 (날짜 기반)
    document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
  1. max-age 속성 사용 (초 기반)
    document.cookie = "username=John; max-age=3600; path=/";

이 설정은 1시간이 지나면 쿠키가 자동으로 삭제됩니다.

Security Attributes

  1. secure 속성 (HTTPS 전용)
    document.cookie = "username=John; secure";
  1. SameSite 속성 (크로스 사이트 요청 보호)
    document.cookie = "username=John; SameSite=Strict";

이 속성들을 적절히 구성하면 보안과 개인정보 보호를 크게 향상시킬 수 있습니다.

5. Practical Code Examples

Counting User Visits

function getCookie(name) {
  let cookies = document.cookie.split('; ');
  for (let i = 0; i < cookies.length; i++) {
    let parts = cookies[i].split('=');
    if (parts[0] === name) return parts[1];
  }
  return null;
}

function setCookie(name, value, days) {
  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=/";
}

let visits = getCookie("visits") ? parseInt(getCookie("visits")) : 0;
visits++;
setCookie("visits", visits, 365);
alert("Your number of visits: " + visits);

이 코드는 쿠키에 사용자 방문 횟수를 저장하고 각 방문 시 카운트를 업데이트합니다.

6. 서드파티 라이브러리 사용

JavaScript에서 document.cookie 속성을 사용해 쿠키를 관리할 수 있지만, 문자열을 다루고 속성을 설정하는 것이 번거로울 수 있습니다. 이는 종종 코드가 길어지고 가독성이 떨어지는 결과를 초래합니다.

쿠키 관리를 간소화하기 위해 서드파티 라이브러리를 사용하는 것이 일반적이고 효과적인 방법입니다. 이 섹션에서는 가장 인기 있는 라이브러리 중 하나인 js-cookie에 초점을 맞춥니다.

1. js-cookie 라이브러리란?

js-cookie는 쿠키 작업을 간소화하는 경량 JavaScript 라이브러리입니다. 주요 기능은 다음과 같습니다:

  • Simple API : 쿠키를 쉽게 설정, 조회, 삭제할 수 있습니다.
  • Extensibility and flexibility : 보안 옵션 및 사용자 정의 설정을 지원합니다.
  • Lightweight : 압축 후 약 2KB에 불과합니다.

2. js-cookie 설치

CDN을 통한 로드

HTML 파일의 &lt;head&gt; 태그 안에 다음 코드를 추가하세요.

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

npm 또는 yarn을 통한 설치

프로젝트에서 의존성을 관리한다면, 다음 명령어 중 하나를 사용하세요:

npm install js-cookie

또는

yarn add js-cookie

3. 기본 사용법

쿠키 설정

Cookies.set('username', 'John', { expires: 7 }); // Valid for 7 days

쿠키 가져오기

let username = Cookies.get('username');
console.log(username); // Output: John

쿠키 삭제

Cookies.remove('username');

4. 고급 옵션 설정

만료 및 경로 설정

Cookies.set('session', 'active', { expires: 1, path: '/' });
  • expires : 1일 후 만료됩니다.
  • path : 쿠키를 사이트 전체에서 사용할 수 있게 합니다.

secure 속성 추가

Cookies.set('secureData', 'secret', { secure: true });
  • secure: true : 쿠키를 HTTPS 연결을 통해서만 전송합니다.

SameSite 속성 지정

Cookies.set('strictCookie', 'value', { sameSite: 'Strict' });
  • sameSite: ‘Strict’ : 교차 사이트 요청을 차단하고 보안을 강화합니다.

7. 보안 및 프라이버시 고려사항

JavaScript에서 쿠키를 다룰 때 보안 조치와 프라이버시 보호는 매우 중요합니다. 부적절한 처리로 인해 데이터 유출이나 무단 접근이 발생할 수 있습니다. 이 섹션에서는 안전한 쿠키 관리를 위한 모범 사례를 설명합니다.

1. 보안 조치

HTTPS 및 Secure 속성 사용

Secure 속성을 설정하여 쿠키가 HTTPS 연결을 통해서만 전송되도록 합니다. 이는 데이터 가로채기와 변조를 방지하는 데 도움이 됩니다.

예시:

document.cookie = "sessionID=abc123; Secure";

서드파티 라이브러리 js-cookie를 사용할 때는 다음과 같이 설정할 수 있습니다:

Cookies.set('sessionID', 'abc123', { secure: true });

HttpOnly 속성 사용 (서버 측 설정)

JavaScript는 클라이언트 측에서 HttpOnly 속성을 설정할 수 없습니다. 하지만 서버 측에서 이 속성을 설정하면 XSS (교차 사이트 스크립팅) 공격을 방지하는 데 도움이 됩니다.

예시: 서버 측 설정 (PHP)

.

setcookie('sessionID', 'abc123', [
    'httponly' => true,
    'secure' => true,
    'samesite' => 'Strict'
]);

SameSite 속성을 이용한 CSRF 공격 방지

CSRF (Cross-Site Request Forgery) 공격을 방지하려면
SameSite 속성을 설정합니다.

예시:

document.cookie = "token=secureToken; SameSite=Strict";

2. 개인정보 보호

저장되는 정보 유형 제한

쿠키에 개인 정보나 민감한 정보(예: 비밀번호)를 저장하지 마세요.
대신 세션 ID와 같은 익명 식별자를 저장하고 서버 측에서 검증합니다.

예시: 세션 ID 사용

Cookies.set('sessionID', 'randomString123', { secure: true, httpOnly: true });

GDPR 및 개인정보 보호 규정 준수

EU의 GDPR (General Data Protection Regulation) 및
일본의 개인정보 보호법 등 규정에 따라 쿠키 사용 시 다음 요구사항을 충족해야 합니다:

  1. 사용자 동의 필수: 쿠키 사용 목적을 고지하고 명시적인 동의를 받아야 합니다.
  2. 옵트인·옵트아웃 제공: 비필수 쿠키에 대해 사용자가 거부할 수 있는 옵션을 제공해야 합니다.

예시: 쿠키 동의 배너 (JavaScript)

if (!Cookies.get('cookieConsent')) {
  let consent = confirm('This site uses cookies. Do you allow cookies?');
  if (consent) {
    Cookies.set('cookieConsent', 'true', { expires: 365 });
  }
}

8. 브라우저에서 쿠키 확인 방법

JavaScript로 쿠키를 설정·조회·삭제할 때는 브라우저 개발자 도구를 이용해 동작을 확인할 수 있습니다.
이 섹션에서는 주요 브라우저별 쿠키 확인 방법을 설명합니다.

1. Google Chrome에서 쿠키 확인

개발자 도구 열기

  1. 페이지를 우클릭하고 “검사” 또는 “요소 검사” 를 선택합니다.
  2. 또는 F12 혹은 Ctrl + Shift + I (Mac: Cmd + Opt + I) 를 누릅니다.

쿠키 보기 단계

  1. 개발자 도구에서 “Application” 탭을 선택합니다.
  2. 왼쪽 메뉴에서 “Storage” → “Cookies” 를 클릭합니다.
  3. 목록에서 대상 도메인을 선택합니다.

쿠키 상세 정보 보기

선택한 사이트의 쿠키가 표 형태로 표시됩니다.
각 열은 다음과 같은 정보를 나타냅니다:

ColumnDescription
NameCookie name (key)
ValueStored value
DomainApplicable domain
PathApplicable path
Expires / Max-AgeExpiration date
SizeCookie size (bytes)
HttpOnlyWhether HttpOnly is enabled (not accessible via JavaScript)
SecureWhether Secure is enabled (HTTPS only)
SameSiteSameSite setting (Strict, Lax, None)

쿠키 편집 및 삭제

  • 편집: 행을 더블클릭해 값을 수정합니다.
  • 삭제: 행을 선택하고 Delete 키를 누르거나 우클릭 후 Delete 를 선택합니다.

2. Firefox에서 쿠키 확인

개발자 도구 열기

  1. 페이지를 우클릭하고 “검사” 를 선택합니다.
  2. 또는 F12 혹은 Ctrl + Shift + I 를 누릅니다.

쿠키 보기

  1. “Storage” 탭을 선택합니다.
  2. 왼쪽 메뉴에서 “Cookies” 를 클릭합니다.
  3. 표시된 도메인 중 대상 사이트를 선택합니다.

편집 및 삭제

Chrome과 동일하게 값을 직접 편집하거나 쿠키를 삭제할 수 있습니다.

3. Safari에서 쿠키 확인 (Mac 사용자)

개발자 도구 활성화

  1. Safari 메뉴에서 “설정” 을 엽니다.
  2. “고급” 탭을 선택하고 “메뉴 막대에 개발자 메뉴 표시” 를 체크합니다.

개발자 도구 열기

  1. 페이지를 우클릭하고 “요소 검사” 를 선택합니다.
  2. 또는 Cmd + Opt + I 를 누릅니다.

쿠키 보기

  1. “Storage” 탭을 선택합니다.
  2. “Cookies” 를 선택해 내용을 확인합니다.

4. 콘솔을 통한 쿠키 확인

쿠키는 JavaScript 콘솔에서도 확인할 수 있습니다.

예시: 모든 쿠키 출력

console.log(document.cookie);

예시: 특정 쿠키 조회

let cookies = document.cookie.split('; ');
let username = cookies.find(row => row.startsWith('username=')).split('=')[1];
console.log(username);

콘솔에서 쿠키를 직접 추가하거나 삭제할 수도 있습니다.

9. 요약

.이전 섹션에서는 JavaScript에서 쿠키 처리에 대해
기본 개념부터 고급 사용 사례까지 다루었습니다.
이번 섹션에서는 핵심 포인트를 정리하고 실용적인 모범 사례를 요약합니다.

1. 쿠키 기본 및 작동 원리

쿠키는 웹 브라우저에 작은 데이터를 저장하는 메커니즘입니다.

  • 사용 사례 : 로그인 세션 유지, 사용자 환경 설정 관리, 행동 추적 등
  • 구성 요소 : 키‑값 쌍, 만료 설정, 경로, 도메인, 보안 속성

이 기본 개념을 이해하면 다양한 시나리오에 맞게 쿠키를 유연하게 적용할 수 있습니다.

2. JavaScript에서 쿠키 작업

JavaScript에서는 document.cookie 속성을 사용해 쿠키를 손쉽게 설정, 조회, 삭제할 수 있습니다.

예시: 쿠키 설정

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

예시: 쿠키 조회

console.log(document.cookie);

예시: 쿠키 삭제

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

위 예시는 기본적인 사용법을 보여 주지만, 보다 복잡한 요구 사항이 있을 경우
서드파티 라이브러리를 사용하는 것이 권장됩니다.

3. 서드파티 라이브러리 활용

라이브러리를 사용하면 쿠키 관리가 훨씬 쉽고 가독성이 높아집니다.

js-cookie 사용 예시

Cookies.set('username', 'John', { expires: 7, secure: true });
let username = Cookies.get('username');
Cookies.remove('username');

장점:

  • 짧고 직관적인 코드
  • 보안 속성 및 옵션을 손쉽게 설정 가능
  • 다양한 브라우저 간 호환성이 원활

4. 보안 및 프라이버시 조치

쿠키는 항상 적절한 보안 설정과 프라이버시 보호와 함께 사용해야 합니다.

핵심 보안 실천 사항

  1. HTTPS와 Secure 속성 사용 : 데이터 가로채기를 방지합니다.
  2. SameSite 속성 설정 : CSRF 공격을 방어합니다.
  3. HttpOnly 속성 사용 : XSS 공격을 완화합니다(서버 측 설정 필요).

핵심 프라이버시 실천 사항

  1. 개인 정보를 저장하지 않음 : ID나 토큰만 저장하고 실제 데이터는 서버에서 관리합니다.
  2. 법규 준수 : GDPR 등 관련 법령에 따라 동의 관리 기능을 구현합니다.
  3. 민감 데이터 암호화 : 저장 전 중요한 정보를 반드시 암호화합니다.

5. 쿠키 검증 및 디버깅

개발자 도구를 활용하면 쿠키 동작을 효율적으로 검증하고 디버깅할 수 있습니다.

브라우저별 도구

  • Google Chrome : 기능이 풍부하고 사용자 친화적인 인터페이스
  • Firefox : 고급 저장소 관리 기능 제공
  • Edge 및 Safari : Chrome과 유사한 절차로 관리

JavaScript 콘솔 사용

console.log(document.cookie);

이를 통해 빠른 테스트와 디버깅이 가능합니다.

6. 실용적인 모범 사례

안전하고 효율적인 쿠키 관리를 위한 구체적인 권장 사항은 다음과 같습니다:

  1. 필요 최소 데이터만 저장 : 불필요한 쿠키를 피하고 중요한 데이터는 서버에 보관합니다.
  2. 적절한 만료 기간 설정 : 짧은 만료 시간을 사용하고 사용되지 않는 쿠키는 삭제합니다.
  3. 보안 설정 강화 : Secure, HttpOnly, SameSite 속성을 항상 설정합니다.
  4. 사용자 동의 확보 : GDPR 등 프라이버시 규정을 준수하는 동의 배너를 배포합니다.
  5. 디버깅 도구 적극 활용 : 브라우저 개발자 도구를 정기적으로 사용해 쿠키를 점검합니다.
  6. 서드파티 라이브러리 활용 : js-cookie와 같은 라이브러리를 사용해 관리와 가독성을 높입니다.

결론

이 글에서는 JavaScript에서 쿠키 관리를 포괄적으로 살펴보았으며,
기본 사용법부터 보안·프라이버시 고려 사항까지 모두 다루었습니다.

핵심 요점

  • 쿠키의 작동 기본 원리와 사용 시기.
  • JavaScript를 사용한 쿠키 설정, 검색 및 삭제 방법.
  • 보안 조치와 법적 준수의 중요성.
  • 개발자 도구와 타사 라이브러리를 사용한 효율적인 워크플로.

다음 단계
이 가이드를 실제 프로젝트에서 쿠키 관리를 구현하는 데 참조로 사용하세요.
진화하는 개인정보 보호법에 안전하고 준수하기 위해,
지속적인 학습과 모범 사례의 정기적인 검토가 필수적입니다.

더 안전하고 사용자 친화적인 웹 애플리케이션을 구축하기 위해 새로운 기술과 지식을 지속적으로 통합하세요.

広告