5.1 쿠키의 기본 속성
쿠키 (cookies)는 웹사이트가 클라이언트 쪽(사용자의 브라우저)에 저장할 수 있는 작은 데이터 조각이야. localStorage가 나오기 20년 전에 등장했고 그동안 많은 기능을 수행하는 데 도움을 줬어. 지금도 종종 세션 상태, 사용자 선호도, 트래킹 등 다양한 작업을 위해 사용되고 있어.
쿠키의 기본 속성:
- 이름과 값 (name=value): 데이터를 저장하는 key-value 쌍.
- 도메인과 경로 (domain, path): 쿠키가 적용될 수 있는 URL과 도메인을 결정해.
- 수명 (expires, max-age): 쿠키가 만료되고 삭제되는 시간을 결정해.
- 보안 (secure, HttpOnly): 쿠키가 어떻게 그리고 언제 전송될 수 있는지를 나타내.
쿠키 설정
쿠키는 JavaScript나 서버 코드로 설정할 수 있어. JavaScript에서는 document.cookie 속성을 사용해.
JavaScript로 쿠키 설정 예:
JavaScript
document.cookie = "username=JohnDoe";
쿠키의 추가적인 매개변수:
- expires: 쿠키의 만료 날짜를 지정. 이 날짜 이후 쿠키는 삭제돼.
- path: 쿠키가 유효한 경로를 지정. 일반적으로 /를 사용하여 사이트 전체에 쿠키를 사용할 수 있게 해.
- domain: 쿠키가 유효한 도메인을 지정.
- secure: 설정 시 쿠키는 HTTPS로만 전송돼.
- HttpOnly: 설정 시 쿠키는 JavaScript를 통해 접근할 수 없어 (서버 측에서만 가능).
추가 매개변수가 있는 쿠키 설정 예:
JavaScript
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 쿠키 관리
1. 쿠키 읽기
현재 문서에 대한 모든 쿠키는 긴 문자열 하나에 document.cookie에 저장돼. 쿠키 값을 얻으려면 이 문자열을 파싱해야 해.
쿠키 읽기 예:
JavaScript
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// "username" 쿠키 값 얻기
const username = getCookie('username');
console.log(username); // 출력: JohnDoe
2. 쿠키 업데이트
쿠키 값을 업데이트하려면 동일한 이름으로 새로운 값과 매개변수를 설정하면 충분해.
쿠키 업데이트 예:
JavaScript
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. 쿠키 삭제
쿠키를 삭제하려면 만료된 만료 시간을 설정하면 돼.
쿠키 삭제 예:
JavaScript
// 만료된 만료 시간 설정
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 쿠키 작업 예제
설명:
setCookie: 지정된 이름, 값, 수명(일 단위)으로 쿠키를 설정getCookie: 지정된 이름으로 쿠키 값을 반환deleteCookie: 지정된 이름으로 쿠키를 삭제
예제:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cookie Example</title>
</head>
<body>
<button onclick="handleSetCookie()">Set Cookie</button>
<button onclick="handleGetCookie()">Get Cookie</button>
<button onclick="handleDeleteCookie()">Delete Cookie</button>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/';
}
function handleSetCookie() {
setCookie('username', 'JohnDoe', 7);
alert('Cookie "username"에 7일간 "JohnDoe" 값을 설정했습니다.');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Cookie "username"의 값: ' + cookieValue);
} else {
alert('Cookie "username"이 존재하지 않습니다.');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Cookie "username"이 삭제되었습니다.');
}
</script>
</body>
</html>
5.4 서버 측에서 쿠키 설정
서버(Node.js)에서 HttpOnly와 Secure 쿠키 작업을 살펴보자.
예제:
JavaScript
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7일
httpOnly: true,
secure: true,
sameSite: 'strict'
});
res.send('Secure server cookie set');
});
app.get('/getcookie', (req, res) => {
const cookie = req.cookies.secureServerCookie;
res.send(`Cookie value: ${cookie}`);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
쿠키 사용 예시:
- 인증: 쿠키는 종종 요청 간에 사용자를 인증하는 세션 토큰을 저장하는 데 사용돼.
- 사용자 선호도: 쿠키는 인터페이스 언어나 테마와 같은 사용자 설정을 저장할 수 있어.
- 사용자 트래킹: 쿠키는 웹사이트에서 사용자의 행동을 추적해 분석과 콘텐츠 개인화를 위해 사용될 수 있어.
GO TO FULL VERSION