나는 아직 너무 모르는 게 많다. 웹개발의 세계는 마치 끝없이 펼쳐진 바다와도 같이 넓게 느껴진다. 이 점이 설레이기도 하면서 다른 한편으로는 답답하기도 하다.
사실 이번에는 redux thunk 관련 내용을 포스팅할 계획이었지만, 프레임워크의 대한 지식보단 웹의 조금 더 원론적인 내용에 관심이 가서 바꾸게 되었다. Redux thunk도 포스팅할 목록에 들어가 있기 때문에 조만간 그 내용도 다뤄볼 것이다.. (진심으로!)
웹개발을 학습하는 동안 Session, Cookie, Token 이라는 키워드를 종종 들었는데, 이것들이 무엇을 의미하는지 구체적으로 정리가 되어있지 않은 느낌이어서 직접 정리해보게 되었다. 이번 포스트에서는 쿠키가 무엇이고 어떻게 구성되어 있으며 여러 특징과 사용사례를 알아볼 것이다.
Cookie Cookie Cookie
쿠키는 무엇일까?
- 클라이언트가 서버로 요청을 보낼 때마다 자동으로 request header 에 탑재되어 보내지는 작은 파일이 있다. 이 작은 파일을 바로 쿠키라고 한다.
과거엔 쿠키가 다르게 사용되었다던데?
- 과거엔 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용했다고 한다. 이는 데이터를 클라이언트 측에 저장할 수 있는 유일한 방법이었을 당시엔 타당했지만, 현재는 정보를 클라이언트를 저장하려면 Modern storage API (Local Storage와 Session Storage와 IndexedDB)를 사용하는 것을 권장한다고 한다.
그럼 현재는 주로 어떤 용도로 쿠키가 사용되고 있을까?
쿠키는 HTTP 프로토콜이 가진 두가지 특성을 보완하기 위해 사용되고 있다.
어떤 HTTP 프로토콜의 특성을 말하는지?
- Connectionless 와 Stateless (비연결지향성과 상태정보를 유지안하는 특성)
- Connectionless
- http 프로토콜은 클라이언트가 서버에 요청을 보내고 서버는 그에 맞는 응답을 보낸 후 연결이 끊어진다.
- Stateless
- 연결이 끊어지는 순간 클라이언트와 서버의 통신이 끝나며 상태정보는 유지하지 않는다.
Connectionless 와 Stateless가 Http의 특성인것은 알겠는데, 쿠키와 무슨 상관이지?
- 두가지 특성 덕분에, 계속해서 통신 연결을 유지하지 않음으로서 리소스의 낭비가 줄어든다는 것은 큰 장점이다.
- 하지만 통신할 때마다 새로운 커넥션을 열어서 클라이언트는 자신이 누구인지 인증을 계속해야한다는 단점이 있다.
- 이를 보완하기 위해서 쿠키가 있다! (세션과 토큰도 있지만 이는 추후 포스트에서 다뤄볼 예정이다)
- 즉 http 프로토콜의 비연결지향성과 상태정보를 유지안하는 특성 때문에, 클라이언트와 서버간의 상태를 유지하도록 하기 위해 쿠키에 상태정보를 담아서 지속해서 서버에 보내는 것이다.
- 서버의 관점에서 보면, 요청이 들어올때 누구한테서 오는 요청인지 알 수 있는 방법 중에 하나인 셈이다.
쿠키가 없다면 어떻게 될까
- 만약 쿠키와 같이 상태를 전달하는 개념이 없다면 새로운 페이지로 넘어갈 때마다 로그인을 하거나, 장바구니에 담아둔 물건이 사라질 것이다.
쿠키는 어떻게 구성되어 있을까?
- 쿠키는 최대용량이 4kb 이고, 키와 값 형태로 정보가 저장 되어있다.
쿠키에는 어떤 정보가 저장되어 있을까?
쿠키에는 이름, 값, 만료날짜, 경로정보 등 의 정보가 들어있다.
쿠키에도 종류가 있나?
초콜릿 칩 쿠키, 마카다미아 넛 & 화이트 초콜릿 쿠키, 슈가 쿠키, 피넛버터 쿠키가 있듯이 웹상의 쿠키도 종류가 있다.
- 일단은 세션 쿠키와 Persistent(영속적인) 쿠키가 있다.
- 세션 쿠키는 브라우저를 종료하거나 닫으면 삭제된다.
- 쿠키에 Max-Age 혹은 Expires를 명시하고 없고가 차이점이다.
- Max-Age를 혹은 expires를 명시하면 지정한 시간동안 사라지지않고 유효하게 된다.
그래서 이 쿠키는 어디서 오는거지?
- 웹페이지에 접속하면 (클라이언트가 요청을 보내면) 서버는 응답과 함께 Set-Cookie헤더를 전송하여 브라우저는 이를 저장하게 된다.
서버는 아래의 같은 포맷으로 Set-Cookie 헤더를 명시한다.
Set-Cookie: <cookie-name>=<cookie-value>
이 Set-Cookie 헤더는 클라이언트에게 쿠키를 저장하라고 전달한다. 쿠키의 이름과 값이 들어간 서버의 응답 예시를 보자.
HTTP:/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
[page content]
이제 서버는 전송되는 모든 요청과 함께 브라우저는 Cookie 헤더를 사용해서 서버로 이전에 저장했던 모든 쿠키들을 회신한다.
아래는 클라이언트가 Cookie 헤더를 추가하여 서버로 보내는 요청의 예시이다
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
클라이언트가 서버로 재요청시 웹페이지 요청과 함께 자동으로 쿠키값을 전송하게 된다.
위에서 생성된 쿠키는 세션 쿠키일까 영속적인 쿠키일까?
Max-Age나 Expires를 명시하지 않았기 때문에 세션 쿠키이다. 세션 쿠키는 브라우저를 종료하는 시 삭제되어 없어진다.
그렇다면 영속적인 쿠키는 어떤 모습일까?
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
예시에서와 같이 Expires와 만료날짜가 명시되어 있다.
여기서 만료날짜는 서버의 시간이 아닌 클라이언트의 시간을 기준으로 한다.
쿠키는 무한대로 저장할 수 있을까?
그렇기도 하고 아니기도 하다. 이는 브라우저에 따라 다르기 때문이다. 쿠키에는 데이터 개수와 데이터 크키에 대한 제한이 있다. 크롬이나 파이어폭스는 도메인마다 제한된 용량이 없고, 즉 도메인마다 무한대의 쿠키를 가질 수 있다.
오페라나 사파리 그리고 IE는 도메인마다 4096 bytes를 허용하고 50개의 쿠키를 사용할 수 있다. 그 말은 즉, 50개의 쿠키는 4kb의 용량만 사용할 수 있다. 쿠키 표준안인 RFC 2109에 따르면 쿠키는 300개까지 만들수 있으며, 최대 크기는 4096바이트이고, 하나의 호스트나 도메인에서 최대 20개까지 만들수 있다고 한다.
브라우저마다 허용하는 도메인당 쿠키의 최대 용량이 다른데 몇개의 쿠키를 만들어야할지 고민된다면?
브라우저 호환성을 위해 도메인당 최대 20개의 쿠키가 4kb를 넘지 않도록 하는 것을 권장한다고 한다.
ex) 도메인당 4kb 허용. 1개의 쿠키가 4kb거나, 2개의 쿠키가 2kb 이거나
쿠키의 사용사례에는 무엇이 있을까?
- 자동 로그인,
- 팝업에서 “오늘 더 이상 이 창을 보지 않음”,
- 쇼핑몰의 장바구니
P.S. (postscript/afterthought)
평소에는 무심코 지나쳤던 쿠키가 이렇게나 중요한 역할을 담당하고 있는지 전혀 몰랐다. 앞으로는 누가 쿠키라고하면 http 쿠키가 먼저 떠오르면서 혼자 쿠키에 대한 개념을 곱씹을 것은 예감이 든다…