개발야옹

Cookie?

HTTP Cookie(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각을 의미한다.

서버가 브라우저에게 쿠키를 전달하면 브라우저는 쿠키를 저장해두었다가(브라우저 저장소에), 쿠키를 전달해준 동일한 서버에 클라이언트가 재 요청을 하게 되면 저장된 쿠키를 서버에 함께 전송한다.

Cookie는 서버가 요청이 동일한 브라우저에서 왔는지 확인할 때 주로 사용한다. 예시로 쿠키를 통해 사용자의 로그인 상태를 유지할 수 있다.

Cookie의 사용 목적

• 세션 관리 (Session Management)
  • 서버에 저장해야 할 로그인, 게임 스코어 등의 정보 관리
• 개인화 (Personalization)
  • 사용자 선호, 테마 등의 세팅
• 트래킹 (Tracking)
  • 사용자 행동을 기록하고 분석하는 용도

Session?

Session은 쿠키를 기반으로 한다. 그러나 Cookie와 가장 큰 차이점은 사용자의 정보를 브라우저에 저장하는 쿠키와 달리 세션은 서버에서 관리한다.

사용자에 대한 정보를 서버에서 저장하여 관리하기 때문에 보안상 쿠키보다 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다.

Client가 Server에 Request를 보내면, Server가 Client에게 Unique한 Id를 부여한다. 이것이 SessionId이다.

Cookie VS Session

브라우저의 주요 기능

html과 css 명세에 따라 html 파일을 해석해서 사용자에게 보여줌.

• 명세 - W3C에서 정해짐
• 예전에는 브라우저들이 W3C의 일부 명세만 따르고, 독자적 방법으로 구현하고 확장하여 브라우저간 심각한 호환성 문제가 발생했었다. 최근에는 대부분의 브라우저들이 모두 표준 명세를 따르고 있다.
• 표준 명세
  • HTTP, HTTPS
  • HTML, XML, XHTML
  • GIF, PNG, JPEG, SVG 
  • CSS, Javascript
  • Cookie, 디지털 인증서
  • 즐겨찾기 아이콘 및 플러그인 지원

브라우저 기본 구조

사용자 인터페이스

• 주소 표시줄
• 이전/다음 버튼
• 북마크 
• 요청 페이지를 보여주는 화면을 제외한 그 외 다양한 메뉴들

브라우저 엔진 

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

렌더링 엔진

요청한 콘텐츠 표시 

사용자가 요청한 페이지가 response로 오면 해당 html, css 파일을 파싱해서 화면에 보여줌

통신

http 요청과 같은 네트워크 호출에 사용 

플랫폼의 독립적인 기능

UI 백엔드

플랫폼에서 명시하지 않은 일반적 인터페이스

콤보 박스나 글 입력 폼 등의 기본적인 장치를 그린다.

자바스크립트 해석기

자바스크립트 코드를 해석하고 실행

자료 저장소

HTML 5부터 추가된 기능

데이터를 클라이언트에 저장할 수 있는 저장소

영구적인 LocalStorage와 임시 저장소인 SessionStorage가 있음

Cookie와 같은 데이터를 저장

렌더링

브라우저의 렌더링 엔진은 요청 받은 내용 파싱하여 브라우저 화면에 보여준다.

기본적으로 html, xml, image를 표시할 수 있다. ( 브라우저 확장 기능으로 pdf 등 다른 유형의 파일도 표시가 가능 )

렌더링 엔진 종류

1. 웹킷(Webkit) - 크롬, 사파리
   • 최초 리눅스 플랫폼에 동작하기 위한 오픈소스 엔진
2. 게코(Gecko) - 파이어폭스

렌더링 동작 과정

1. HTML Parsing
2. Render Tree 구축
3. Render Tree 배치
4. Render Tree 그리기

HTML 문서 파싱

파싱된 HTML 태그를 모두 DOM Node로 변환

외부 CSS 파일, 스타일 요소 파싱

스타일 정보와 HTML 규칙으로 렌더 트리 생성

렌더 트리 생성 끝나면 렌더 트리 배치 (렌더 트리는 정해진 순서대로 화면에 표시 )

렌더 트리 배치가 진행되면서 DOM Node를 정확한 위치에 표시

UI 백엔드에서 렌더 크리를 그림

이러한 과정 점진적으로 진행

전송 받고 기다리는 동시에 받은 내용을 먼저 화면에 보여준다. 

DOM (Document Object Model)

Dom은 node와 객체로 문서를 표현한다. DOM은 웹 페이지의 객체 지향 표현이며, JS같은 Script 언어를 통해서 DOM을 수정할 수 있다. 

즉, DOM 은 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미(트리구조)