(1) Web data storage - 쿠키 (Cookie)

상품 후기를 쓰고 있었는데 잘못해서 브라우저 창을 닫아 버려서

다시 창을 켜고 들어갔더니 작성했던 내용이 다 날아갔다면?

사이트 설정을 다크 테마로 바꾸고 언어를 한국어로 설정했는데, 

사이트에 다시 접속할 때마다 그 모든 설정들이 초기화된다면?

하루에도 몇 번씩 접속하는 사이트인데 들어갈 때마다 공지 팝업창이 떠서 매번 닫아야 한다면? 

장바구니에 사고 싶은 상품을 넣어 놨는데 새로고침을 했더니 그만 장바구니가 싹 날아가 버린다면? 

 

이러한 사용자 경험이 계속되면 기분이 좋지 않을 것이다.

다행히도 요즘 대부분의 사이트들은 이렇지 않고

입력 중이던 내용은 새로고침을 해도 남아 있는 경우가 많고, 한 번 해 놓은 설정은 계속 유지된다.

광고 팝업에도 '오늘 하루 동안 보지 않기' 이런 옵션이 있어서 체크를 하면 하루 동안은 더 이상 보이지 않는다.

 

이렇게 사용자가 편리하게 해 주는 기능은 어떻게 구현하는 걸까?

 

웹 브라우저에 관련된 데이터를 저장하면 된다.

이런 기능들을 만들기 위해서는 웹 브라우저의 다양한 데이터 저장 방식을 사용하는데

그중에서도 쿠키와 웹 스토리지에 대해 알아보고, 

이걸로 웹 사이트의 여러 편리한 기능들을 구현해 보자.

---

쿠키 - Cookie

쿠키에 대해 알아보기에 앞서,

먼저 인터넷을 이용할 때 쓰는 HTTP라는 프로토콜에 대해 간단히 알아보자.

 

▶ HTTP Protocol(프로토콜)

프로토콜이란 컴퓨터끼리 어떤 특정한 형식으로 통신 메시지를 주고 받자고 미리 약속을 정해 놓은 것이다.

컴퓨터끼리 통신을 원활하게 하려면 꼭 필요하며 

인터넷은 그중에서도 HTTP라는 프로토콜을 이용한다.

웹 브라우저 주소창에서 주소를 자세히 보면

맨 앞에 http 혹은 https 가 붙는데 이게 바로 프로토콜이다.

둘다 HTTP 프로토콜인데, 간단하게 말해서 HTTPS는 HTTP에서 보안을 강화한 버전이라고 보면 된다.

---

▶ 무상태성(Stateless)

HTTP 프로토콜의 특징중 하나는 무상태성이다.

 

무상태성은 쉽게 말해서 웹사이트 서버가 리퀘스트를 보내는 웹 브라우저들에 대해서

따로 상태정보를 저장하지 않는 것을 의미하며

서버는 리퀘스트를 어떤 브라우저가 보냈는지 구별하지 못한다.

 

이 브라우저가 예전에 뭘 요청했었는지,

언제 리퀘스트를 보냈었는지,

이런 걸 HTTP에서는 기본적으로 저장하지 않기 때문에 알 수가 없었다.

 

만약 상태 정보를 아예 저장하지 않는다면?

어떤 사람이 네이버 메인 화면에서 로그인을 했다고 가정했을 때,

메인 화면에서 '메일'을 클릭해서 이메일을 확인하러 가면

서버에 해당 페이지의 데이터를 요청하게 되는데,

문제는 서버 입장에서는 이 리퀘스트가 누구로부터 온 것인지 알 수가 없다는 것이다.

브라우저에 대한 아무런 상태 정보를 저장하지 않는, 무상태성이라는 특징 때문인 것.

 

따라서 사이트는 다시 로그인을 요구하게 되고

사용자는 페이지를 이동할 때마다 귀찮게 로그인을 해야할 것이다.

 

상태 정보를 저장하지 않으면 서버가 신경써야 할 부분이 적다는 장점이 있지만,

반면에 사용자에 대한 정보를 저장하지 않기 때문에 유저를 식별할 수 없어서 이런 불편한 점이 생긴다.

---

▶ 쿠키(Cookie)

이런 문제들을 쿠키로 해결할 수 있다.

 

쿠키는 쉽게 말해서 브라우저의 작은 저장소라고 할 수 있는데

이 저장소에는 이름과 값으로 이루어져 있는 문자열 데이터를 저장할 수 있다.

 

사용자가 웹 사이트에 접속하면 웹사이트 서버는 쿠키를 만들어서 브라우저로 보내준다.

브라우저는 받은 쿠키를 사용자 컴퓨터에 저장하고,

그 다음부터는 브라우저가 웹 사이트에 접속하거나

리퀘스트를 보낼 때마다 이 쿠키를 자동으로 함께 보내는데

방금 전 네이버 로그인 예시로 돌아가보자면

네이버 서버가 상태 정보를 저장하지는 않지만 쿠키를 사용한다고 가정해보자

 

사용자가 네이버에 로그인을 하면 서버가 사용자를 확인하는 작업을 마치고

해당 사용자를 식별할 수 있는 어떤 문자열 코드를 쿠키로 만들어서 전달한다

그러면 브라우저는 그 쿠키를 컴퓨터에 저장하고 있다가

나중에 서버로 리퀘스트를 보낼 때마다 자동으로 그 쿠키를 같이 전달한다.

네이버 서버에서는 쿠키에 담겨 있는 어떤 문자열을 보고

이 사람이 누구인지를 알 수 있기 때문에 매번 다시 로그인을 요청할 필요가 없는 것이다.

 

또한 사용자가 꼭 로그인을 하지 않더라도

브라우저를 구분할 수 있는 문자열을 쿠키로 저장할 수도있는데

이 쿠키로 브라우저의 리퀘스트를 추적한다.

서버에서는 이런 쿠키에 저장된 정보를 사용해서

브라우저에서 발생한 사용자들의 검색 기록, 클릭한 상품, 다녀간 페이지 등을 파악할 수 있고

이걸로 광고나 마케팅 목적으로 활용하기도 한다.

이것 말고도 쿠키를 통해 아이디 기억하기, 팝업 하루동안 보지않기, 사용자의 테마 설정 기억 등

편리한 기능들을 다양하게 구현할 수 있다.

---

쿠키 확인하는 방법

쿠키는 개발자 도구를 사용하면 쉽게 확인이 가능하며

개발자 도구 확인하는 방법은 다음과 같다.

 

■ Window

• Ctrl + Shift + I

■ mac

• cmd + Shift + I

▷ 개발자 도구 -> 어플리케이션(Application) -> 쿠키(Cookies)

 

이렇게 개발자 도구에서 어플리케이션 탭으로 들어가면

위와 같이 쿠키를 확인할 수 있다.

 

언뜻 복잡해 보이지만

단순하게는 이름(Name)과 값(Value)으로 이루어진 문자열 데이터라고 생각하면 된다.

---

쿠키의 저장 방법

쿠키를 저장하는 방법에는

서버를 통해 저장하는 것,

자바스크립트 코드로 저장하는 것

이렇게 두 가지가 있다.

 

▶ 서버를 통해 저장하는 방법

쿠키는 웹사이트 서버에서 만들어서 보내면 브라우저가 알아서 저장한다고 했는데

이때 서버는 HTTP 리스폰스에 Set-Cookie라는 헤더를 설정해서 쿠키를 전달한다.

Set-Cookie: user=choco

Set-Cookie 헤더를 전달받은 브라우저는 이 쿠키를 저장하고

나중에 그 웹사이트에 리퀘스트를 보낼 때마다

저장된 쿠키를 Cookie라는 헤더에 넣어서 함께 전송하게 된다.

Cookie: user=choco

이때, 모든 웹 사이트에 모든 쿠키를 다 전달하는 것이 아니라

해당 쿠키를 저장한 사이트에만 그 쿠키를 전달한다.

예를 들어 네이버에서 user라는 쿠키를 사용자의 브라우저에 설정했다면

브라우저는 네이버에 리퀘스트를 보낼 때에만 이 user라는 쿠키를 전달하고

다른 사이트에 접속하거나 리퀘스트를 보날 때는 이 쿠키를 전달하지 않는다.

 

이렇게 사이트마다 따로 쿠키를 관리하기 때문에,

네이버에서는 구글 사이트에 접근할 수 없는 것이다.

네이버에 리퀘스트를 보낼 때는 네이버에서만 만든 쿠키만 전달하기 때문인 것이다.

 

▶ 자바스크립트로 저장하는 방법

이렇게 서버로부터 쿠키를 받아서 저장하는 방법도 있지만

자바스크립트 코드로 클라이언트에서 직접 쿠키를 생성하고 저장할 수도있는데

document.cookie라는 코드로 쿠키를 확인하거나 수정, 삭제할 수도있지만

사실 이 방법을 알려주는 것보다 그냥 웹 스토리지를 다루는 방법을 아는게 더 효과적이라고 생각되어그냥 이런 게 있다고 알고 넘어가자.

 

---

쿠키의 특징

▶ 쿠키의 최대 용량

쿠키는 브라우저가 웹 사이트에 리퀘스트 보낼 때마다

자동으로 서버에 보내는 메시지에 포함된다고 했을 때ㅇ,

이렇게 매번 서버에 전송되다보니 네트워크에 부담을 주지 않으려고

쿠키의 용량에 제한을 두었다.

 

쿠키 하나는 최대 4KB까지 가능하며

브라우저에 따라 다르지만 보통 사이트 하나당

약 20개 정도의 쿠키가 허용된다고 한다.

 

▶ 쿠키를 사용할 때 주의할 점

쿠키는 용량에 맞는 문자열 데이터라면 뭐든지 저장할 수 있지만

한가지 주의해야할 점이 있다.

 

서버로 리퀘스트를 보낼 때 자동으로 보내는 점을 이용해서

다른 사람이 중간에 쿠키를 탈취할 수도 있다는 점이다.

 

이런 위험이 있기 때문에

쿠키에는 민감한 개인 정보나 보안과 관련된 내용들을 저장하지 않도록 주의해야한다.