요즘 앱에 대해 공부하면서 앱에서 데이터를 기억할때 로컬 스토리지라는 HTML의 기능을 이용한다는 것을 알게되어 정리 하였습니다. 서버와 클라이언트는 어떻게 소통하고 어떠한 데이터 저장하는 방식을 활용하고 있는지, 기존의 세션과 쿠키 그리고 웹스토리지에 대해 개념을 이해하고 왜 사용하는 것 이고 각 저장방식의 차이는 무엇인지 알아보고자 합니다.
웹은 어떻게 데이터를 주고 받을까?
웹스토리지에 대해 알기위해서는 사전에 웹에서 데이터를 주고 받는 방식과 특징을 이해하시면 좋습니다. 이 글을 검색하셨다면, HTTP 프로토콜이라는 웹의 통신 방식에 대해서 알고 계실 것이라고 생각합니다. 짧게 설명하자면 인터넷을 통해 데이터를 보내려면 TCP/IP 프토토콜로 보내는 IP주소, 받는 IP주소, 순서, 검증 등의 정보로 데이터를 한번 감싸고 그안에 데이터는 HTTP 프로토콜이라는 규약으로 묶어서 데이터를 주고 받게 되는데요. 여기서 HTTP 프로토콜은 특징들이 있습니다.
- 클라이언트 -> 서버 구조
- 무상태 프로토콜
- 비연결성
- HTTP 메시지
이 특징들을 모아보면 클라언트와 서버가 데이터를 주고받을때 서로 데이터를 기억하지 않으며 연결은 계속해서 끊긴다는 것을 알 수 있습니다. 그런데 클라이언트가 서버와 연결이 끊겨도 기억하고 싶은 데이터가 있다면? 만약 로그인하는 과정에서 매번 페이지를 들어갈때마다 로그인을 해야한다면? 너무 불편할 것 같네요. 그래서 데이터를 기억할 수 있도록 세션, 쿠키, 웹스토리지 등이 나오게 된 것 입니다.
그러면 쿠키하고 세션은 뭐야?
쿠키
쿠키는 클라이언트와 서버의 연결이 끊겨도 필요한 정보를 기억하게 하기위해 서버에서 데이터를 묶어서 클라이언트의 컴퓨터 혹은 브라우져의 메모리에 저장되는 key value로 이루어진 작은 텍스트 파일입니다. 만료시간의 정보를 가지고 있기때문에 브라우져를 종료해도 데이터가 유지가 됩니다. 동일한 서버에 뭔가 다시 요청을 하면 쿠키안에 있는 도메인 속성값을 참조해 해당 도메인에 들어가면 쿠키를 함께 보내서 서버가 너 아까 걔구나 하고 식별할 수 있게 하죠.
예를 들어 쇼핑몰사이트에서 물품을 장바구니에 넣고 페이지를 나갔다가 다시 들어와도 장바구니에 제품이 담겨있는 것을 볼 수 있죠 이런 데이터를 기억할때 사용됩니다.
세션
앞서 쿠키는 클라이언트가 데이터를 가지고 있다고 했습니다. 세션은 서버에서 데이터를 관리하고 고유ID를 생성해 클라이언트를 식별하는 방법입니다. 서버는 연결된 클라이언트의 브라우져에 단 1개의 세션 ID를 생성하여 이를 쿠키에 저장시켜서 클라이언트에 보내주게 됩니다. 해당 도메인에 클라이언트가 다시 들어오면 쿠키안에 저장된 ID를 보고 클라이언트를 식별하는 방식인거죠. 이를 세션쿠키라고 하는데 브라우져를 끄면 세션쿠키는 삭제되기때문에 보안면에서는 쿠키보다 좋다고 할 수 있습니다. 하지만 사용자가 많아질 수록 서버의 자원을 많이 사용하게 되는 단점이 있겠죠. 그래서 중요한 정보 등을 기억하기 위해 사용합니다. 주로 로그인 같은 상태를 유지할 때 사용하죠.
둘다 쿠키를 이용한다는 방식에서는 동작원리가 비슷하지만, 데이터를 누가 관리하느냐에 차이가 있다고 보시면 됩니다. 데이터가 저장되는 곳이 클라이언트냐 서버냐 또한 데이터가 언제까지 유지가 되느냐의 차이가 있을 수 있겠습니다.
아 ~ 그러면 웹스토리지도 데이터를 기억하기 위한 거야?
아우 서론이 길었네요. 죄송합니다. 이제 데이터를 기억하는 쿠키와 세션에 대해 이해하셨다고 생각합니다. 그러면 웹스토리지는 뭔데? 하실 겁니다. 웹스토리지는 HTML5 표준부터 지원하게된 클라이언트에 데이터를 저장하는 API입니다. 이것 또한 클라이언트에 데이터를 저장하는 기술인데요. 뭐야? 쿠키도 클라이언트에 데이터 저장하잖아! 같은거 아냐? 하실 수 있겠지만 조금의 차이가 있습니다. 차이에 대해 알아보겠습니다.
- 쿠키는 작은 데이터를 저장한다고 했죠. 쿠키는 4kb의 제한 용량이 있습니다.
웹스토리지는 최소 2MB의 많은 정보를 저장할 수 있습니다. - 또한 정보를 저장할 뿐 쿠키처럼 서버에 전송 되지않습니다. 단지 스토리지에서 필요한 데이터만 꺼내서 명시적으로만 전송할 수 있죠. 서버에 전송되지 않기때문에 많은 용량을 저장할 수가 있는 것이죠.
- 웹스토리지는 오리진(도메인,프로토콜,포트로 이루어진 식별자) 단위로 접근이 제한되는 특성 덕분에 CSRF(Cross Site Request Forgery)로 부터 안전합니다.
- 웹스토리지는 데이터를 영구적으로 저장할 수 있다. 쿠키는 만료일자가 넘으면 삭제되고 세션은 서버가 종료되거나 브라우져를 종료하면 삭제됩니다. 웹스토리지의 로컬 스토리지는 삭제를 할때까지 유지 할 수 있습니다.
F12 크롬 개발자도구를 켜보니 Storage가 보이네요. Cookie도 있구요. 그런데 위에 이미지에서 web storage가 없고 웬 local, session storage가 있네요. 사실 웹 스토리지는 유효 범위와 보존 기간에 따라 Local Storage와 Session Storage로 나뉩니다. 무슨 차이가 있을까요?
Session Storage
세션 스토리지는 새창, 새탭의 단위로 스토리지가 생성되며 데이터를 공유하지 않습니다. 또한 같은 탭이라도 도메인이 다르면 또다른 세션 스토리지가 생성 됩니다. 한마디로 세션스토리지는 도메인, 윈도우 탭별 독립적인 공간입니다. 그렇기때문에 사용자가 브라우져의 창을 닫거나 탭을 닫으면 저장된 객체가 사라져 잠깐의 정보를 저장하기에 용이 합니다.
주로 회원가입 입력폼, 일회성 로그인에 사용됩니다.
사용방법
// 키에 데이터 쓰기
sessionStorage.setItem("key", value);
// 키로 부터 데이터 읽기
sessionStorage.getItem("key");
// 키의 데이터 삭제
sessionStorage.removeItem("key");
// 모든 키의 데이터 삭제
sessionStorage.clear();
// 저장된 키/값 쌍의 개수
sessionStorage.length;Local Storage
로컬 스토리지는 웹 도메인당 1개씩 생성되며 세션 스토리지와 다르게 새창을 띄워도 도메인만 같으면 동일한 데이터를 공유하게 되고 다른 도메인의 로컬 스토리지에는 접근이 불가능 합니다.또한 직접 로컬 스토리지를 삭제하지 않으면 영구적으로 데이터를 저장합니다. 쿠키를 이용하지 않는 앱 환경에서 자동 로그인등에 주로 사용됩니다.
사용방법
// 키에 데이터 쓰기
localStorage.setItem("key", value);
// 키로 부터 데이터 읽기
localStorage.getItem("key");
// 키의 데이터 삭제
localStorage.removeItem("key");
// 모든 키의 데이터 삭제
localStorage.clear();
// 저장된 키/값 쌍의 개수
localStorage.length;
Reference
https://raonsecure.raonctf.com/essential/main/web
http://www.tcpschool.com/html/html5_api_webStorage
https://html.spec.whatwg.org/multipage/webstorage.html#webstorage
https://www.daleseo.com/js-web-storage/
세션과 쿠키 그리고 웹스토리지까지 서버와 클라이언트가 데이터를 주고받을때 필요한 데이터를 유지하기 위한 방법에 대해 알아보았는데요. 기술에는 정답은 없다고 생각합니다. 각 방식마다 장단점이 존재하고 상황에따라 무엇이 옳은 방식인지 고민하여 올바르게 사용하고 적용 하는 것이 중요하다고 생각합니다. 부족한 글 읽어 주셔서 감사합니다. 또한 잘못된 내용 있으면 지적해주시면 감사하겠습니다.
하얀종이개발자