쿠키, 세션, 웹스토리지

웹 애플리케이션을 개발할 때, 사용자 정보를 저장하고 관리하는 것은 필수적인 작업입니다.

이를 위해 사용되는 주요 기술이 쿠키, 세션, 웹스토리지입니다

1. 쿠키 (Cookies)

정의
쿠키는 클라이언트(브라우저)에 저장되는 작은 데이터 조각으로, 주로 사용자 인증 정보, 사용자 설정, 장바구니 정보 등을 저장하는 데 사용됩니다. 서버가 클라이언트에게 쿠키를 설정하고, 클라이언트는 이후 요청 시 쿠키를 함께 전송합니다.

특징

• 저장 용량: 쿠키의 저장 용량은 보통 4KB로 제한됩니다.
• 만료 시간: 쿠키는 설정 시 만료 시간을 지정할 수 있으며, 만료 시간이 지나면 자동으로 삭제됩니다.
• 전송 방식: 쿠키는 HTTP 요청의 헤더에 포함되어 서버로 전송됩니다.

장점

• 서버와 클라이언트 간의 상태 유지가 용이합니다.
• 사용자가 설정한 정보를 장기적으로 저장할 수 있습니다.

단점

• 보안 문제가 발생할 수 있습니다. (예: XSS 공격)
• 저장 용량이 제한되어 있어 대량의 데이터를 저장하기에는 적합하지 않습니다.

TypeScript 예제

// 쿠키를 설정하는 함수
function setCookie(name: string, value: string, days: number) {
    const expires = new Date(Date.now() + days * 864e5).toUTCString();
    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
}

// 쿠키를 가져오는 함수
function getCookie(name: string): string | null {
    return document.cookie.split('; ').reduce((res, current) => {
        const [key, val] = current.split('=');
        return key === name ? decodeURIComponent(val) : res;
    }, null as string | null);
}

// 예제 사용
setCookie('username', 'JohnDoe', 7);
console.log(getCookie('username')); // "JohnDoe"

 

 

2. 세션 (Sessions)

정의
세션은 서버 측에서 사용자의 상태 정보를 관리하는 방식입니다. 사용자가 웹사이트에 접속하면 서버는 세션 ID를 생성하고, 이 ID를 클라이언트에 쿠키로 전달합니다. 이후 클라이언트는 이 세션 ID를 사용해 서버에 요청할 때마다 자신을 인증합니다.

특징

• 저장 용량: 세션은 서버에 저장되므로 저장 용량은 서버의 용량에 따라 달라집니다.
• 만료 시간: 세션은 일반적으로 사용자가 브라우저를 닫거나 일정 시간 동안 비활성 상태일 경우 만료됩니다.
• 보안: 서버에 저장되기 때문에 상대적으로 안전합니다.

장점

• 대량의 데이터를 저장할 수 있어 유용합니다.
• 보안성이 높아 중요한 정보 저장에 적합합니다.

단점

• 서버의 리소스를 소모합니다.
• 사용자 브라우저의 쿠키에 의존하므로, 쿠키가 비활성화된 경우 사용이 불가능합니다.

TypeScript 예제

import express from 'express';
import session from 'express-session';

const app = express();

// 세션 미들웨어 설정
app.use(session({
    secret: 'your_secret_key',
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 60000 } // 1분
}));

// 세션에 데이터 저장
app.get('/login', (req, res) => {
    req.session.username = 'JohnDoe';
    res.send('User logged in');
});

// 세션 데이터 가져오기
app.get('/profile', (req, res) => {
    if (req.session.username) {
        res.send(`User: ${req.session.username}`);
    } else {
        res.send('User not logged in');
    }
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

 

3. 웹스토리지 (Web Storage)

정의
웹스토리지는 브라우저에서 제공하는 클라이언트 측 저장소로, 두 가지 형태인 localStorage와 sessionStorage가 있습니다. localStorage는 브라우저가 종료되어도 데이터를 유지하고, sessionStorage는 브라우저 탭이 닫힐 때 데이터를 삭제합니다.

특징

• 저장 용량: 대부분의 브라우저에서 각 도메인당 약 5MB의 저장 용량을 제공합니다.
• 만료 시간: localStorage는 데이터가 삭제될 때까지 유지되고, sessionStorage는 탭이 닫히면 삭제됩니다.
• 전송 방식: 웹스토리지 데이터는 HTTP 요청과 함께 전송되지 않으며, JavaScript로만 접근할 수 있습니다.

장점

• 대량의 데이터를 클라이언트에 저장할 수 있습니다.
• 페이지 간에 데이터를 공유할 수 있습니다.

단점

• 보안 문제(예: XSS 공격)에 취약합니다.
• 서버와의 동기화가 필요할 경우, 별도의 관리가 필요합니다.

TypeScript 예제

// localStorage에 데이터 저장
function saveToLocalStorage(key: string, value: string) {
    localStorage.setItem(key, value);
}

// localStorage에서 데이터 가져오기
function getFromLocalStorage(key: string): string | null {
    return localStorage.getItem(key);
}

// sessionStorage에 데이터 저장
function saveToSessionStorage(key: string, value: string) {
    sessionStorage.setItem(key, value);
}

// sessionStorage에서 데이터 가져오기
function getFromSessionStorage(key: string): string | null {
    return sessionStorage.getItem(key);
}

// 예제 사용
saveToLocalStorage('username', 'JohnDoe');
console.log(getFromLocalStorage('username')); // "JohnDoe"

saveToSessionStorage('sessionId', '12345');
console.log(getFromSessionStorage('sessionId')); // "12345"

 

 

4. 쿠키, 세션, 웹스토리지의 차이점

	쿠키	세션	웹스토리지  (localStorage/sessionStorage)
저장 위치	클라이언트	서버	클라이언트
저장 용량	약 4KB	서버 용량에 따라 다름	약 5MB
만료 시간	설정 가능	브라우저 종료 시 or 비활성 시	localStorage: 브라우저 종료 시 삭제 안됨 sessionStorage: 탭 종료 시 삭제
보안성	낮음	높음	낮음
데이터 전송	HTTP 요청과 함께 전송	서버에서 관리	HTTP 요청과 함께 전송되지 않음