세션과 쿠키, 상태, 로컬 스토리지

웹 사이트를 만들다 보면 DB 외에 정보를 관리할 필요성을 느끼게 됩니다.

예를 들면, 사용자가 로그인 후에 인증 토큰을 받을 때처럼 말이죠.

session cookie, local storage, react state

 

현재 보편적으로 사용되는, DB가 아닌 정보를 관리하는 웹 기술들을 알아보고자 합니다.

Session에 대한 배경

session의 사전적 정의는 특정 활동 기간입니다. (구글 번역 기준)

이러한 정의는 computer science에서의 의미와는 조금 다릅니다.

 

session을 특정 기술의 명칭이라고 생각하는 사람들이 더러 있습니다.

그러나 computer science에서 session은 사실 특정 데이터 저장 기술을 의미하지 않습니다.

 

하지만 여러 언어(JSP,ASP,PHP..)에서 사용자와의 session을 유지하기 위해서 만든 session token을 부르는 명칭이 XXXsesionID 등으로 칭했기 때문에 오늘날에는 세션을 특정 데이터 저장 기술(session token)로 일반적으로 부르고는 합니다.

 

session에 대한 정확한 정의는 다음과 같습니다.(특히 computer science에서)

a session is a temporary and interactive information interchange between two or more communicating devices, or between a computer and user (see login session).

A session is typically stateful, meaning that at least one of the communicating parties needs to hold current state information and save information about the session history in order to be able to communicate, as opposed to stateless communication, where the communication consists of independent requests with responses.
- english wikipedia -

위 말을 해석(+의역)하자면 다음과 같습니다.

세션은 일시적이고 상호작용적인 정보교환입니다.
그 정보교환은 둘 이상의 통신 장치간 또는 컴포터와 사용자 간의 정보교환을 의미합니다.

또, 세션은 상태적입니다.
상태적 통신은 통신하기 위해서는,
통신 참가자 중 적어도 한 참가자는 현재 상태 정보를 보유하고 세션 기록에 대한 정보를 저장해야 합니다.


비 상태적 통신은 상태적 통신과는 다릅니다.
비 상태적 통신에서의 통신은 독립된 요청과 응답만으로 이루어져 있습니다.

즉, 세션이란

1. 정보교환을 하고 있는 기간 또는 그 상태. (단방향 정보 전송은 "교환"이 아니므로 세션이라 정의하지 않습니다.)
2. 상태적 통신을 위해, 현재 상태 정보 및 세션 기록에 대한 정보를 저장하는 기술.

를 의미한다고 말할 수 있습니다.

 

첫 번째 의미로서,

일반적으로는 특정 브라우저에서 tab이 열려있는 동안은 (웹 사이트와 사용자 간의)세션이 유지되고 있다고 말합니다.

또, 해당 tab이 닫히거나 브라우저가 종료된다면 세션이 끊겼다고 말합니다.

 

두 번째 의미로서,

현재 상태 정보 및 세션 기록을 저장하는 모든 기술을 의미할 수 있습니다.

보통, 세션당 하나의 thread나 process를 생성하여 관리하거나 세션의 상태를 DB로 관리하여 구현합니다.

대표적으로는,

• sever-side session : 서버의 RAM이나 storage, DB에 세션의 상태를 저장하고 관리합니다.
• client-side session : 클라이언트의 메모리 또는 디스크에 세션의 상태를 저장합니다.
• session token : 현재 세션을 식별하기 위해 생성되어 서버에서 클라이언트로 전송되는 고유 식별자입니다.

등 이 있습니다.

 

sever-side session을 구현하기 위해 multi-process, multi-thread와 같은 기술을 쓸 수 있습니다.

client-side session을 구현하기 위해 cookie나 web storage API 들을 쓸 수 있습니다.

session token을 구현하기 위해서도 cookie를 사용할 수 있습니다.

 

Session

정확히는 session token에 대해 말할 것입니다.

session token은 현재 세션을 식별하기 위해 서버에서 생성되어 클라이언트로 전송됩니다.

클라이언트에서는 session token을 Cookie로 저장되거나, 바로 GET 또는 POST 쿼리의 매개변수로 이용됩니다.

 

서버는 해당 식별자에 대한 세션 상태를 일반적으로 DB에 저장하고 관리합니다.

 

일부 프로그래밍 언어에서는 이 session token을 위한 cookie의 이름을 다음과 같이 일반적으로 지정합니다.

; JSESSIONID (JSP), PHPSESSID (PHP), CGISESSID (CGI), and ASPSESSIONID (ASP).

이렇게 cookie와 서버의 DB, 세션 식별자를 사용하여 세션 상태를 관리하는 기술을 session token이라고 합니다.

 

어떤 사람들은, session token을 session이라고 줄여서 부르기도 합니다.

Cookie

cookie는 mozilla에서 다음과 같이 정의합니다.

HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다.

브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 

쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다.

이를 이용하면 사용자의 로그인 상태를 유지할 수 있습니다. 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문입니다.

과거에는 데이터를 클라이언트 측에 저장할 수 있는 유일한 방법이 쿠키였습니다.

하지만 이제는 mordern storage API를 통해 저장하는 것을 권장합니다.

 

cookie는 모든 요청마다 함께 전송되기 때문에 성능이 떨어지는 원인이 될 수 있습니다. (특히 mobile 환경에서)

따라서 대부분의 경우에서, cookie를 사용하는 것을 권장하지 않습니다.

cookie를 만드는 방법

1. 서버에서 응답 헤더를 통해.

 

Node.JS에서는 다음과 같이 응답 헤더를 설정해 cookie를 만들 수 있습니다.

response.setHeader('Set-Cookie', ['type=ninja', 'language=javascript']);

 

2. "Document.cookie"를 사용해.

 

client 측에서 실행되는 자바스크립트 코드를 통해 cookie를 만들 수 있습니다. 다만, HTTPOnly 플래그가 설정되지 않은 경우에만 정상적으로 접근 가능합니다.

document.cookie = "yummy_cookie=choco";
document.cookie = "tasty_cookie=strawberry";
console.log(document.cookie);
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

 

cookie를 읽는 법

Node.JS에서는 다음과 같이 클라이언트에서 보낸 쿠키를 읽을 수 있습니다.

var cookie = require('cookie');

cookies = cookie.parse(request.headers.cookie);

Web Storage

Web Storage API는 브라우저에서 키/값 쌍을 cookie보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다.

mozllia는 web storage의 기본 콘셉트와 동작원리를 다음과 같이 설명합니다.

Storage 객체는 단순한 key-value 저장소이며, 이는 객체와 비슷합니다. 하지만 이 데이터들은 페이지 로딩에도 온전하게 유지됩니다. key와 그 value는 항상 문자열입니다. (만약 정수로 키를 사용할 경우 이는 자동으로 string으로 변경됩니다, 자바스크립트 객체의 동작 방식을 생각해보세요) 객체를 사용하듯이 쉽게 값에 접근할 수 있으며, 이때 Storage.getItem() Storage.getItem()과 Storage.setItem()  메서드를 사용할 수 있습니다.

Session storage

session storage는 web storage API 중 하나입니다.

mozilla는 다음과 같이 session storage를 소개합니다.

sessionStorage는 각각의 출처에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공합니다.
1. 세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장합니다.
2. 데이터를 절대 서버로 전송하지 않습니다.
2. 저장 공간이 쿠키보다 큽니다. (최대 5MB)

다음과 같이 저장합니다.(세 줄 코드 모두 같은 동작을 합니다.)

sessionStorage.colorSetting = '#a4509b';
sessionStorage['colorSetting'] = '#a4509b';
sessionStorage.setItem('colorSetting', '#a4509b');

다음과 같이 값을 불러옵니다.

const value = sessionStorage.getItem('colorSetting', '#a4509b');
console.log(value);

Local storage

local storage는 web storage API 중 하나입니다.

mozilla는 다음과 같이 local storage를 소개합니다.

localStorage도 sessionStorage와 같지만, 브라우저를 닫았다 열어도 데이터가 남아있습니다.
1. 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라집니다.
2. 저장 공간이 셋 중 제일 큽니다.

다음과 같이 저장합니다.(세 줄 코드 모두 같은 동작을 합니다.)

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

다음과 같이 값을 불러옵니다.

const value = localStorage.getItem('colorSetting', '#a4509b');
console.log(value);

React state

react state는 사실 세션 정보를 저장하기 위한 목적으로 쓰지 않습니다.

react는 브라우저 reload로 component가 다시 mount 된다면 모든 react state는 다시 설정됩니다.

(SPA이며 사용자가 reload를 절대 하지 않는다면, router와 link, 전역 state로 session token의 value를 저장할 수 있습니다. 하지만 권장하지 않습니다.)

 

따라서 세션 정보를 저장하고 싶다면 위의 cookie나 Web storage API를 쓰세요.

 

각 차이점 정리표

리 렌더링 및 재접속 시 데이터 보전을 중점으로..

	Cookie	sessionStorage	localStorage	React state
reload 시 유지되는가?	O	O	O	X
브라우저가 닫혀도 유지되는가?	O	X	O	X
유효기간	별도 지정	페이지 세션이 유지되는 동안	사용자가 별도로 지우기 전까지	React Component가 살아 있는 동안

 

참고한 사이트:

A typical HTTP session - HTTP | MDN

 

HTTP 쿠키 - HTTP | MDN

 

Window.localStorage - Web API | MDN