[Javascript] HTTP와 쿠키

▶ 웹의 저장소

● 초기 웹의 저장소

- 웹 서버에 저장 (HTML 페이지, 이미지, 사용자 데이터, 웹 서비스 중간에 발생하는 일시적인 데이터)

● 초기 웹 저장의 문제점

- 웹 사용의 폭발적 증가

- 웹 서버의 저장 용량에 대한 부담

- 웹 브라우저와 웹 서버 사이의 통신 트래픽 증가

●  HTML5의 웹 저장소

- 사용자의 로컬 컴퓨터에 일부 데이터 저장 (웹 서버의 저장 용량 및 통신 트래픽 감소)

- 저장소의 종류 :쿠키(Cookie), 웹 스토리지(Web Storage), 로컬 파일(Local File), 인덱스트 데이터베이스(Indexed DB)

- 웹 서버와 연결이 끊어진 경우에도 로컬 컴퓨터에서 웹 애플리케이션 실행가능하게 하기위해

 

▷ 브라우저와 웹 서버의 통신, HTTP(HyperText Transfer Protocal)

- 브라우저와 웹 서버 사이에는 HTML페이지 등 HTML 자원을 주고받는 절차와 형식을 정한 HTTP 통신 규칙이 있음

▷ 브라우저가 <img> 태그를 10개 가진 HTML 페이지를 웹 서버로부터 가지고 와서 출력하는 과정 동안 이루어진 HTTP 통신과정

- HTTP 통신규칙은 다음그림과 같이 HTTP/1.0에서 시작하여 HTTP/1.1 Keep Alive, HTTP/1.1 Persistent Connection으로 진화

 

▷ HTTP 세션

- HTTP에서 브라우저가 웹 서버로부터 하나의 HTML 자원을 가지고 오는 과정

 

▷ 비연결형 프로코콜 (Connectionless Protocol) - HTTP/1.0

- HTTP 세션 후 브라우저와 웹 서버 사이의 네트워크 연결이 끊어짐

- 브라우저는 세션마다 웹 서버와 네트워크 연결을 새로 만듦

- 브라우저는 처음 세션에서 HTML페이지를 가지고 온 후, HTML 페이지의 10개의 <img> 태그 발견

- 브라우저는 다시 10개의 HTTP 세션을 통해 10개의 이미지를 가져옴, 10개의 이미지를 모두 전송 받고 나서야 온전한 HTML 페이지가 출력

- HTML 파일이나 이미지, CSS 파일 등 자원을 가지고 올 때마다 웹 서버와 연결하는 시간 부담의 단점 존재

 

 

▷ Keep Alive - HTTP/1.0 과 HTTP/1.1

- 자원을 가지고 올 때마다 웹 서버에 연결하는 HTTP/1.0 문제를 해결하기 위해, HTTP.1/1에서 그림1 (b)와 같이 'Keep Alive' 문자열을 요청 데이터(요청 헤더)와 응답 데이터(응답 헤더)에 담는 방법을 사용

 Connection: Keep-Alive

 

- 브라우저가 요청 헤더에 다음 메시지를 포함하면, 웹 서버는 브라우저가 연결을 유지하고자 한다고 판단하고 역시 동일한 메시지를 응답 헤더에 삽입하여 보냄

- 둘 중 하나라도 이 메시지를 보내지 않으면 연결은 끊어짐

- Keep Alive 방식에서, HTTP 세션에는 브라우저와 웹 서버의 네트워크 연결 과정이 포함되지 않는다

 

 

 

▷ 지속연결형 프로토콜(Persistent Connection) - HTTP/1.1

-  HTTP/1.1에서는 Keep Alive 방식을 폐기하고, 그림1 (c)와 같이 한 번 연결하면 타임 아웃 시간 동안, 혹은 요청 헤더나 응답 헤더에 다음 메시지를 보낼 때 까지 연결을 유지하는 지속연결형 방식을 표준화

 Connection: close

- 타임아웃 시간은 현재 아파치 웹 서버 2.2이상의 경우 5초, 브라우저마다 다르지만 몇 초 혹은 몇 십초 수준의 짧은 시간으로 설정

- 이 정도 시간이면, 웹 페이지에 포함된 모든 자원을 가지고 올 수 있음

 

 

▶ HTTP 통신 과정 보기

● 개발자 도구 열기 - F12키

 

● 개발자 도구 분리 실행

- 브라우저가 구글 웹 서버에 접속하여 첫 번째 페이지가 완벽히 출력되는 과정에서 발생한 HTTP세션을 순서대로 보여줌

 

● 첫 번째 HTTP 세션

- 브라우저가 www.google.co.kr  웹 서버에 연결

- 디폴트 HTML 파일을 요청하고 응답 받았음

- 총 1.52초 걸렸다는 뜻

 

● 두 번째 HTTP 세션

- <img>의 src 속성에 명시된 chrome-48.png을 구글 웹 서버에 요청

- 요청을 포함하여 이미지를 전송 받는데 걸리는 시간 총 312ms

- 이미지의 크기는 2.20K

 

● HTTP 요청 헤더 보기

- www.google.co.kr에 접속할 때, 디폴트 HTML 파일을 요청하기 위해 보낸 요청 헤더를 보여줌

 

● HTTP 응답 헤더 보기

- 웹 서버로부터 받은 응답 데이터의 헤더 부분

 

 

 

 

 

 

▶ 쿠키(Cookie)

- 웹 서버가 브라우저에게 지시하여, 사용자 로컬 컴퓨터에 저장하는 4K 이하의 작은 데이터

 

▷ 도입 배경

● HTTP 통신의 기본 약점

- 브라우저와 웹서버 사이의 통신은 무상태(stateless) 프로토콜임

- 무상태 프로토콜 :바로 이전 요청과 현재 요청이 연결되어 있음을 기억하지 않는 통신

ex) 지금 'Java'를 검색하는 사용자가 바로 전에 'C++'를 검색한 사용자라는 사실을 모름

→ 쿠키는 HTTP의 무상태 프로토콜의 약점을 보완하기 위해 도입

 

▷ 쿠키 생성 및 사용과정

(1) 쿠키는 웹 서버가 생성하여 브라우저로 보냄

- 사용자가 어떤 웹 서버에 처음 접속할 때

- 웹 서버가 다음 요청에서 그 사용자를 기억할 수 있도록, 쿠키(쿠키이름과 값)를 만들어 전송

(2) 쿠키를 받은 브라우저는 로컬 컴퓨터에 저장

(3) 브라우저가 웹 서버에게 보내는 모든 요청에 쿠키를 삽입하여 전송

- 웹 서버로 요청하는 경우 :웹 페이지 요청, 이미지 요청 등 모든 웹 자원 요청 포함

- 로컬 컴퓨터에서 동일한 웹 서버를 요청할 때

(4) 쿠키를 받은 웹 서버는 어떤 사용자로부터 요청이 왔는지 알 수 있음

- 웹 서버가 사용자의 연속된 요청들을 인식하기 위해 쿠키사용

 

 

 

▷ 쿠키 데이터의 구성

- 6개의 속성으로 구성

- 브라우저가 웹 서버로 쿠키를 전송할 때는 name=value만 전송

 

● 쿠키 사례

- 브라우저가 google.com 사이트의 폴더에 있는 어떤 웹 자원이라도 요청할 때는 반드시 "age=23" 형태로 쿠키 전송

- 유효 시간은 2016년 8월 1일까지

- Secure 속성이 있으므로 안전한 통신을 사용할 때만 이 쿠키를 전송

- HttpOnly 속성이 있으므로 구글 사이트와 HTTP 통신 외에 이 쿠키를 알려주어서는 안됨

 

▷ 쿠키는 웹 페이지 사이의 정보 공유에 활용

- 쿠키는 구체적으로 웹 사이트에 작성된 여러 웹 페이지들 사이의 정보 공유나 정보 전달이 목적

- 그림 2는 웹 사이트에 구축된 여러 웹 페이지드이 쿠키에 들어 있는 정보를 공유하고 있음을 보여줌

- 웹 사이트의 어떤 웹 페이지가 다른 웹 페이지에게 전달할 정보를 쿠키로 만들어 사용자 로컬 컴퓨터에 저장하면, 다른 웹 페이지는 쿠키를 통해 정보를 전달받음

 

 

 

 

 

▶ 구글 웹 사이트의 쿠키 보기

- 웹 서버가 쿠키를 보낼 때는 HTTP 응답 헤더의 set-cookie: 뒤에 쿠키 데이터를 심어서 보낸다

- set-cookie는 브라우저에게 쿠키를 저장하라는 지시

 set-cookie: 1P_JAR=2022-11-28-09; expires=Wed, 28-Dec-2022 09:19:04 GMT; path=/; 
 domain=.google.co.kr; Secure; SameSite=none

● 쿠키이름 :1P_JAR

● 쿠키 값 : 2022-11-28-09

● 유효시간 :2022년 12월 28일 9시 19분 4초

● 브라우저가 google.com 도메인에 속한 웹 자원을 요청할 때 마다 쿠키값을 보내도록 지정

 

 

 

 

 

 

▶ 자바스크립트로 쿠키 다루기

- 자바스크립트 코드를 이용하여, 로컬 컴퓨터에서 쿠키 쓰기/읽기 가능

- 자바스크립트에서 쿠키 접근: document.cookie

- 현재 브라우저가 접속한 웹 사이트의 모든 쿠키들은 document.cookie 프로퍼티에 문자열 형태로 연결되어 있음

 

● 쿠키 쓰기

- document.cookie에 쿠키를 문자열 형태로 달아주면됨

- 이 함수는 쿠키 이름, 쿠키 값, 유효시간을 매개변수로 전달받아 document.cookie 에 저장

- 쿠키 문자열은 escape(쿠키문자열) 함수를 통해 인코딩하여 저장, 읽을 때는 unescape()함수를 통해 디코딩

- escape() 함수는 문자열을 ISO Latin-1코드로 변환하는 자바스크립트 함수

- unescape()은 ISO Lation-1 코드를 원래 데이터로 변환하는 자바스립트 함수

- document.cookie = cookieStr; 은 현재 저장된 쿠키들에 cookieStr의 새로운 쿠키를 추가하거나 같은 이름의 쿠키 값을 수정하는 연산으로 처리

 

 

● 쿠키 읽기

- 읽고자 하는 쿠키 이름을 매개변수로 받고, document.cookie 프로퍼티에서 찾아 쿠키 값을 리턴, 없을 경우 null 리턴

 

 

예제) 쿠키 활용 - 자바스크립트로 방문자 이름과 방문 횟수 관리

- 쿠키를 저장하거나 읽는 웹 페이지는 반드시 웹 서버로부터 로드되어야 한다