쿠키 vs 세션 vs 웹스토리지

안녕하세요! 오늘은 웹 개발에서 자주 사용하는 데이터 저장 방식인 쿠키(Cookie), 세션(Session), 그리고 웹스토리지(Web Storage)에 대해 알아보겠습니다. 각각의 기술은 사용 목적과 특징이 다르며, 특정 상황에 맞는 적절한 선택이 필요합니다.

쿠키 vs 세션 vs 웹스토리지

1. 쿠키 (Cookie)

정의

쿠키는 클라이언트 측에 저장되는 작은 데이터 조각입니다. 서버가 클라이언트에게 데이터를 저장하도록 요청할 수 있으며, 클라이언트는 이후 요청 시 해당 데이터를 서버로 전송합니다.

특징

• 용량 제한: 대부분의 브라우저에서 쿠키는 도메인 당 4KB로 제한됩니다.
• 만료 시간: 쿠키는 설정된 만료 시간 이후 자동으로 삭제됩니다.
• 보안: 민감한 데이터는 쿠키에 저장하지 않는 것이 좋습니다. 쿠키는 클라이언트 측에서 쉽게 접근할 수 있으므로 보안에 취약할 수 있습니다.
• 자동 전송: 모든 HTTP 요청 시 자동으로 서버에 전송됩니다.

사용 예제

// 쿠키 설정
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

// 쿠키 읽기
console.log(document.cookie);

2. 세션 (Session)

정의

세션은 서버 측에서 사용자의 상태를 저장하는 방식입니다. 클라이언트는 세션 ID를 통해 서버에 저장된 상태에 접근할 수 있습니다.

특징

• 서버 저장: 세션 데이터는 서버에 저장되며, 클라이언트는 세션 ID만 가지고 있습니다.
• 만료 시간: 세션은 일정 기간 동안 활동이 없으면 자동으로 만료됩니다. 세션 만료 시간은 서버에서 설정할 수 있습니다.
• 보안: 세션 데이터는 서버에 저장되므로 클라이언트 측에서 직접 접근할 수 없어 비교적 안전합니다.

사용 예제 (Node.js와 Express)

const express = require('express');
const session = require('express-session');

const app = express();

app.use(session({
    secret: 'your_secret_key',
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 60000 } // 세션 만료 시간 (1분)
}));

app.get('/', (req, res) => {
    if (!req.session.views) {
        req.session.views = 1;
    } else {
        req.session.views++;
    }
    res.send(`Number of views: ${req.session.views}`);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

3. 웹스토리지 (Web Storage)

정의

웹스토리지는 HTML5에서 도입된 클라이언트 측 저장소로, 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)로 나뉩니다.

로컬 스토리지 (Local Storage)

특징

• 용량 제한: 대부분의 브라우저에서 도메인 당 5~10MB의 데이터를 저장할 수 있습니다.
• 만료 시간: 데이터는 명시적으로 삭제될 때까지 지속됩니다.
• 보안: 클라이언트 측에 저장되므로 민감한 데이터 저장에 적합하지 않습니다.

사용 예제

// 데이터 저장
localStorage.setItem('username', 'JohnDoe');

// 데이터 읽기
console.log(localStorage.getItem('username'));

// 데이터 삭제
localStorage.removeItem('username');

// 모든 데이터 삭제
localStorage.clear();

세션 스토리지 (Session Storage)

특징

• 용량 제한: 대부분의 브라우저에서 도메인 당 5~10MB의 데이터를 저장할 수 있습니다.
• 만료 시간: 브라우저 세션이 끝날 때 (탭이나 창이 닫힐 때) 데이터가 삭제됩니다.
• 보안: 클라이언트 측에 저장되므로 민감한 데이터 저장에 적합하지 않습니다.

사용 예제

// 데이터 저장
sessionStorage.setItem('username', 'JohnDoe');

// 데이터 읽기
console.log(sessionStorage.getItem('username'));

// 데이터 삭제
sessionStorage.removeItem('username');

// 모든 데이터 삭제
sessionStorage.clear();

4. 쿠키, 세션, 웹스토리지 비교

특성	쿠키 (Cookie)	세션 (Session)	로컬 스토리지 (Local Storage)	세션 스토리지 (Session Storage)
저장 위치	클라이언트	서버	클라이언트	클라이언트
데이터 용량	4KB	제한 없음	5-10MB	5-10MB
만료 시간	설정 가능	설정 가능	영구적	브라우저 세션 종료 시
보안	낮음	높음	낮음	낮음
자동 서버 전송	모든 요청 시 자동 전송	필요 시 전송	자동 전송 안 됨	자동 전송 안 됨

결론

쿠키, 세션, 웹스토리지는 각각의 장단점이 있으며, 상황에 따라 적절히 선택하여 사용해야 합니다. 쿠키는 작은 데이터를 클라이언트에 저장하고, 세션은 서버 측에 중요한 데이터를 저장하며, 웹스토리지는 클라이언트 측에서 대용량 데이터를 저장하는 데 유용합니다. 이러한 기술을 잘 이해하고 적절히 활용하여 더욱 효율적이고 안전한 웹 애플리케이션을 개발해 보세요.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.