면접대비질문) 쿠기 vs 세션 vs 웹스토리지

쿠키(Cookie) vs 세션(Session) vs 웹 스토리지(Web Storage)

안녕하세요. 오늘은 쿠키vs세션vs웹 스토리지에 대해 알아보도록 하겠습니다.

정의와 개요

• 웹 애플리케이션에서 데이터를 클라이언트 측에 저장하고 관리하기 위한 방법으로 쿠키, 세션, 웹 스토리지가 있습니다. 각 방법은 데이터 저장 방식과 보안, 사용 용도에서 차이가 있습니다. 이 글에서는 각 방법의 정의와 설명, 그리고 사용 방법에 대해 알아보겠습니다.

쿠키(Cookie)

• 쿠키는 작은 데이터 파일로, 웹 서버가 사용자의 웹 브라우저에 전송하여 클라이언트 측에 저장됩니다. 이후 같은 서버에 재접속할 때 해당 쿠키를 서버로 다시 전송하여 사용자 식별, 세션 유지, 사용자 설정 정보 저장 등에 사용됩니다.

1. 사용 방법
   • 쿠키는 HTTP 헤더 또는 JavaScript를 통해 설정할 수 있습니다.

• HTTP 헤더를 통한 쿠키 설정

Set-Cookie: username=JohnDoe; Expires=Wed, 21 Oct 2021 07:28:00 GMT; Path=/; Secure; HttpOnly

• JavaScript를 통한 쿠키 설정

// 쿠키 설정
document.cookie = "username=JohnDoe; expires=Wed, 21 Oct 2021 07:28:00 GMT; path=/; secure; samesite=strict";

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

// 특정 쿠키 값 읽기
function getCookie(name) {
    let value = "; " + document.cookie;
    let parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
}
console.log(getCookie("username"));

세션(Session)

• 세션은 서버 측에서 사용자 정보를 저장하는 방식으로, 사용자별로 고유한 세션 ID가 부여됩니다. 사용자가 서버에 접근할 때마다 해당 세션 ID를 통해 상태를 유지하며, 일반적으로 서버의 메모리나 데이터베이스에 저장됩니다. 세션은 일정 기간 동안 유지되며, 사용자가 브라우저를 닫거나 일정 시간이 지나면 만료됩니다.

1. 사용 방법 서버 측에서 세션을 관리하며, 보통 서버 스크립트 언어(PHP, Node.js 등)에서 지원하는 세션 관리 기능을 사용합니다.

• PHP에서의 세션 사용

코드 복사
<?php
// 세션 시작
session_start();

// 세션 변수 설정
$_SESSION["username"] = "JohnDoe";

// 세션 변수 읽기
echo $_SESSION["username"];

// 세션 종료
session_unset();
session_destroy();
?>

• Node.js (Express)에서의 세션 사용

코드 복사
const express = require('express');
const session = require('express-session');

const app = express();

// 세션 미들웨어 설정
app.use(session({
    secret: 'secret-key',
    resave: false,
    saveUninitialized: true,
    cookie: { secure: false }
}));

// 세션 변수 설정
app.get('/set-session', (req, res) => {
    req.session.username = "JohnDoe";
    res.send('Session set');
});

// 세션 변수 읽기
app.get('/get-session', (req, res) => {
    res.send(req.session.username);
});

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

웹 스토리지(Web Storage)

• 웹 스토리지는 HTML5에서 도입된 클라이언트 측 데이터 저장 방식으로, 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)로 나눌 수 있습니다. 웹 스토리지는 쿠키와 달리 용량이 크고, 클라이언트 측에서만 접근 가능합니다.

1. 로컬 스토리지(Local Storage)
   로컬 스토리지는 클라이언트에 영구적으로 데이터를 저장하며, 브라우저를 닫아도 데이터가 유지됩니다.

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

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

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

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

1. 세션 스토리지(Session Storage) 세션 스토리지는 세션 동안 데이터를 저장하며, 브라우저를 닫으면 데이터가 삭제됩니다.

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

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

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

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

비교

1. 데이터 저장 위치:

• 쿠키: 클라이언트 측(브라우저)
• 세션: 서버 측
• 웹 스토리지: 클라이언트 측(브라우저)

1. 데이터 지속성:

• 쿠키: 만료 날짜 설정 가능
• 세션: 브라우저 닫힘 또는 일정 시간 후 만료
• 로컬 스토리지: 영구적 저장
• 세션 스토리지: 브라우저 세션 동안 유지

1. 보안:

• 쿠키: 클라이언트에서 쉽게 접근 가능, XSS 공격에 취약
• 세션: 서버에서 관리, 비교적 안전
• 웹 스토리지: 클라이언트에서 쉽게 접근 가능, XSS 공격에 취약

1. 데이터 크기:

• 쿠키: 제한적(일반적으로 4KB 이하)
• 세션: 서버에 저장, 크기 제한 없음
• 웹 스토리지: 로컬 스토리지와 세션 스토리지 모두 비교적 큰 용량 지원(최소 5MB 이상)

결론

• 쿠키, 세션, 웹 스토리지는 각각의 용도와 장단점이 있습니다. 쿠키는 클라이언트와 서버 간의 작은 데이터 교환에 유용하며, 세션은 사용자 인증과 같은 서버 측 상태 관리에 적합합니다. 웹 스토리지는 클라이언트 측에서 대용량 데이터를 저장하는 데 유용합니다. 각 방법을 적절히 활용하여 웹 애플리케이션의 요구사항을 만족시킬 수 있습니다.