Cookies

지금까지 만든 모든 자바스크립트 애플리케이션은 페이지를 벗어나는 순간 페이지와 관련된 모든 정보가 초기화됐습니다. 여기에서는 쿠기에 대해서 알아보고, 일정 기간이나 영구적으로 데이터를 저장하고 사용하는 방법에 대해 알아보겠습니다.

쿠키 개요

쿠키는 키와 값이 들어 있는 작은 데이터 조각으로 이름, 값, 파기 날짜와 경로 정보가 있습니다. 쿠키는 서버와 클라이언트에서 모두 저장하고 사용할 수 있습니다. 쿠키는 일정 기간 동안 데이터를 저장할 수 있으므로, 일정 기간 동안 로그인을 유지하는 페이스북 같은 웹 사이트에서 사용합니다. 페이스북이든 네이버든 크롬으로 접속한 후 요소 검사의 Resources 탭을 선택합니다. 좌측 탭에서 Cookies를 선택하면 쿠키 정보를 확인할 수 있습니다.

쿠키 정보 창에서 알수 있겠지만 쿠키에는 여러가지 속성이 있습니다. 쿠키의 속성 중 우리가 지정할 수 있는 속성은 Name, Value, Domain, Path, Expires, Secure 입니다.

※ 참고 ※
크롬의 요소 검사의 버그로 인해 크롬의 쿠키 검사로 검사할 수 없는 경우가 있습니다. 이러한 경우에는 인터넷 익스플로러에서 F12를 눌러 개발자 도구를 실행한 후에 [캐시] -> [쿠키 정보 보기]를 누릅니다.

쿠키는 각각의 속성을 다음과 같은 문자열을 넣어 document 객체의 cookie 속성을 입력함으로써 생성합니다.

document.cookie = 'Name=Value;Expires=날짜;Domain=도메인;Path=경로;Secure';

Name과 Value 속성은 데이터를 저장하고 읽는데 사용하는 속성입니다. 따라서 쿠키를 사용할 때는 Name과 Value 속성을 반드시 지정해야 합니다. 데이터와 관련된 속성을 제외하면 Expires 속성이 가장 중요한데요. EXpires 속성은 쿠키의 파기 날짜를 지정하는 속성입니다. Expires 속성에는 GMT 형식이나 UTC 형식으로 날짜를 입력해야 합니다. 파기 날짜를 입력하지 않으면 브라우저가 종료될 때 쿠기가 삭제됩니다. Secure 속성은 쿠키가 보안 연결을 사용해 전송돼야 하는지를 결정하는 속성입니다. Secure 속성을 지정하면 해당 쿠기는 SSL을 사용해서만 요청할 수 있습니다. SSL을 모른다면 일단 넘어갑시다.

※ SSL ※
SSL[에세스엘]은 네트웍 내에서 메시지 전송의 안전을 관리하기 위해 넷스케이프에 의해 만들어진 프로그램 계층이다. 넷스케이프의 생각은, 비밀이 보장되어야하는 메시지를 맡은 프로그램은 웹브라우저 또는 HTTP와 같은 응용프로그램과, 인터넷의 TCP/IP 계층 사이에 들어가야 한다는 것이다. 여기서 "소켓"이라는 용어는 데이터를 네트웍상의 클라이언트와 서버 프로그램 사이, 또는 같은 컴퓨터의 프로그램 계층끼리 주고받는 소켓 방식을 줄여서 말한 것이다. 넷스케이프의 SSL은 디지털 증명의 사용에도 포함되는 RSA의 공개/개인키 암호화 시스템을 사용한다.

SSL은 넷스케이프 브라우저의 없어서는 안될 핵심 부분이다. 만약 어떤 웹사이트에 넷스케이프 서버가 설치되어 있으면, SSL을 사용하여 특정한 웹페이지가 SSL 액세스를 필요로 하는지를 식별할 수 있다. 다른 서버들에서는 넷스케이프의 SSLRef 프로그램 라이브러리를 사용하면 되는데, 상용이 아니라면 무료로 다운로드할 수 있지만, 상용으로 쓰려면 라이선스 비용을 내야한다.

넷스케이프는 SSL을 W3C에 표준 프로토콜로서 제안했으며, IETF에는 웹브라우저와 서버를 위한 표준 보안 접근방법으로 제시하였다.

Domain 속성과 Path 속성을 입력하지 않으면 현재 도메인의 현재 경로로 자동 입력됩니다. 페이지 요청과 비교해서 도메인의 경로와 Domain 속성이 일치하지 않으면, 쿠키에 접근하는 것을 막으므로 Domain 속성은 거의 건드리지 않습니다. 반면에, Path 속성은 일부러 지정하는 경우가 많은데요. 우선 예제를 만들어 봅시다. 아래 예제 코드는 쿠키를 생성하는 가장 기본적인 방법입니다. 예제 코드처럼 document 객체의 cookie 속성에 문자열을 넣으면 문자열이 곧바로 들어가는 것이 아니라 문자열의 쿠키 정보를 별도로 뽑아 저장합니다.

							// 변수 선언
							var date = new Date();
							date.setDate(date.getDate()+7);

							var willCookie = '';
							willCookie +='CookieName=Value;';
							willCookie +='expires='+date.toUTCString();

							// 쿠키에 넣기
							document.cookie = willCookie;							
						

상기 예제 코드에서 Name 속성은 CookieName으로 Value 속성은 value로 입력했습니다. Expires 속성은 현재 날짜에서 7일을 더한 날을 설정했습니다. 현재 시점을 기준으로 상기 이미지 처럼 쿠키검사 결과가 나옵니다. 또한 현재 예제를 실행한 풀더가 /florakid_lib/sub/javascript/이므로 Path 속성이 자동으로 입력돼 /florakid_lib/sub/javascript/ 가 됩니다. Path 속성이 현재 /florakid_lib/sub/javascript/로 설정되어 있는데요. 이렇게 Path 속성이 설정되면 현재 폴더 또는 현재 폴더의 하위에서 접근할 수 있습니다. Path 속성을 /로 설정하면 도메인 내의 모든 곳에서 접근할 수 있습니다. 쿠키의 접근 제한 범위를 좁게 잡을수록 보안에는 좋습니다.

쿠키는 document 객체의 cookie 속성을 출력하면 됩니다. 상기의 코드를 입력한 HTML 페이지와 같은 폴더나 같은 페이지에서 내용을 지우고 아래 코드처럼 입력해 봅시다.

코드를 실행하면 이전에 저장했던 쿠키를 확인할 수 있습니다. 쿠키를 저장할 때는 여러 속성을 함께 입력했지만 쿠키를 볼때는 간단한 형태가 됩니다. 페이지를 분명 새로고침 했는데도 이전의 정보를 출력할 수 있죠? 쿠키는 이렇게 데이터를 지속하고 싶을 때 사용합니다.

쿠키 제거하기

쿠키를 생성하는 방법을 알아보았으니, 이제는 쿠키를 제거하는 방법을 알아봅시다. 쿠키를 제거하고 싶을 때는 Expires 속성을 현재 이전의 날짜로 설정합니다.

							// 변수 선언
							var date = new Date();
							date.setDate(date.getDate()-1);  // 현재 이전의 날짜로 설정

							var willCookie = '';
							willCookie +='CookieName=Value;';
							willCookie +='expires='+date.toUTCString();

							// 쿠키에 넣기
							document.cookie = willCookie;							
						

쿠키가 삭제 되었습니다. document 객체의 cookie 속성을 출력하면 이전의 쿠키가 삭제된 것을 알 수 있습니다.
(현재는 쿠키 삭제 스크립트를 주석처리 해놨습니다.)



쿠키 읽기

앞에서 쿠키를 생성하고 삭제하는 방법을 알아보았습니다. document 객체의 cookie 속성이 여러 쿠키를 한꺼번에 출력하므로 개별적인 쿠키를 읽으려면 약간 복잡한 과정이 필요합니다. 우선, 아래의 코드처럼 코드를 작성해 쿠키 다섯 개를 입력합니다.

상기 쿠키쓰기 버튼을 클릭하면 쿠키쓰기가 실행되면서 경고창이 뜹니다.
이제 Name 속성이 Name0인 쿠키의 Value 속성을 추출해 봅시다. 쿠키의 데이터를 추출하는 방법은 정말 많습니다. 여기서는 가장 간단한 형태 방법을 살펴봅시다. 아래 코드는 Name 속성이 Name0인 쿠키의 Value 속성을 추울합니다. 우선 상단 소스의 경고창에서 확인할 수 있는 것 처럼 문자열을 세미콜론(;)을 사용해 분해합니다.

							var name = 'Name0';	
							var cookies = document.cookie.split(';');
							alert(cookies);

							// 쿠키 추출하기
							for (var i in cookies) {
								if (cookies[i].search(name) != -1) {
									// alert(cookies[i].replace(name + '=', ''));
									alert(cookies[i].replace(name + '=', '').replace(/^\s\s*/,'').replace(/\s\s*$/,'')); // 공백제거 포함 소스
								}
							}					
						

세미콜론을 사용해 분해하면 Name=Value 형태의 문자열로 분해됩니다. 이때, 우리가 원하는 Name 속성을 가진 문자열을 찾아 필요 없는 부분을 제거하고 데이터를 추출합니다. 물론, 이 방법에는 약간 문제가 있습니다. 브라우저에 따라 양쪽 위치에 공백이 발생할 수 있습니다. 이때는 다음과 같은 형태로 첫 위치와 마지막 위치의 공백을 제거합니다.

cookies[i].replace(name + '=', '').replace(/^\s\s*/,'').replace(/\s\s*$/,'')