HTML/CSS 심화 브라우저

브라우저란?

HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램

브라우저의 특징과 웹의 동작 원리

브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작한다.

 

1. 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력한다.
2. DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색한다.
3. 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달한다.
4. 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메세지를 생성해 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송된다.
5. 이 요청 메세지는 다시 HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환이 됩니다.
6. 웹 서버는 이 변환이 된 정보에 해당하는 데이터를 검색하여 찾아낸 뒤 HTTP 프로토콜을 통해 HTTP 응답 메세지를 생성하고, 이 메세지는 다시 TCP 프로토콜을 이용해 인터넷을 거쳐 사용자의 컴퓨터로 전송이 됩니다.
7. 사용자의 컴퓨터에 도착한 HTTP 응답 메세지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환이 되고, 변환된 데이터는 웹 브라우저 상에 출력되어 사용자가 볼 수 있게 된다.

브라우저의 구조

 

사용자 인터페이스(User Interface)

UI이라고도 부르며, 가장 유저와 밀접하게 맞닿아있는 부분. 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등에 관련된 GUI 부분을 통칭하고 있다.

브라우저 엔진(Browser Engine)

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 브라우저 엔진의 주된 역할은 HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현한다.

레이아웃 엔진이라고도 부르며, 렌더링 엔진과 밀접한 연관이 있어 보통은 브라우저 엔진과 렌더링 엔진을 묶어 브라우저 엔진으로 부르나 여기서는 구분해서 표현한다.

브라우저 엔진은 웹 브라우저 마다 전용 엔진을 사용하고 있다.

게코(Gecko)	모질라 재단에서 만든 브라우저 엔진. 파이어폭스가 해당 엔진을 탑재하고 있는 유명한 웹 브라우저이다.
웹킷(Webkit)	KHTML에서 파생된 브라우저 엔진. 사파리가 해당 엔진을 탑재하고 있는 가장 유명한 웹 브라우저이다
블링크(Blink)	웹킷(Webkit)에서 파생된 브라우저 엔진. 크롬, 오페라가 해당 엔진을 탑재하고 있는 유명한 웹 브라우저이다.
트라이언트(Trident)	MS의 브라우저 엔진으로 인터넷 익스플로러, 아웃룩, 익스프레스, 마이크로소프트 아웃룩 등이 이를 탑재하고 있다.
EgdeHTML	트라이던드에서 파생된 브라우저 엔진으로 마이크로소프트 엣지 스파르탄 버전(~2019)까지 탑재되었다.(현재는 블링크로 교체)

 

렌더링 엔진(Rendering Engine)

요청한 콘텐츠르 화면에 출력하는 역할을 한다. HTML, CSS 등을 파싱해 최종적으로 화면에 그려주며, 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 브라우저 엔진과 밀접하게 결합되 있으므로 보통은 하나의 엔진으로 보는 시각이 많다.

통신(Networking)

HTTP 요청과 같은 네트워크 호출에 사용된다. 플랫폼의 독립적인 인터페이스이고 각 플랫폼의 하부에서 실행된다.

자바스크립트 해석기(JavaScript Interpreter)

자바스크립트 코드를 해석하고 실행하는 자바스크립트 해석기가 필요에 의해 등장하게 되었다.

자바스크립트 엔진이라고도 부르는 자바스크립트 해석기는 여러 목적으로 사용이 되지만 대체적으로 웹 브라우저에서 이용되며, 브라우저마다 전용 엔진이 탑재되어 있다.

 

Rhino	모질라 재단이 운영하는 오픈소스 엔진으로, 자바(Java)로 개발되었다는 특징이 있다.
SpiderMonkey	최초의 Javascript 엔진으로 넷스케이프 내비게이터를 지원하였으며, 현재는 파이어폭스를 지원하고 있다.
V8	구글이 개발한 오픈 소스 엔진으로 구글 크롬의 Javascript 엔진이다.
JavascriptCore	애플에서 개발하였으며 처음에 WebKit 프레임워크를 위해 개발되었지만 현재는 사파리와 React Native App를 지원하고 있다.
Chakra	마이크로소프트가 개발한 엔진이며, Edge 브라우저를 지원하고 있습니다.

 

UI 백엔드

렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당한다. Select, inpust 창과 같은 기본적인 위젯을 그려준다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용한다.

사용자 인터페이스, 또는 유저 인터페이스는 사람과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. 때문에 거의 모든 운영체제는 사용자 인터페이스를 가지고 있다.

인터페이스를 다룰 때는 특정한 명령 체계를 사용해야 한다.

명령어 라인 인터페이스(Command Line Interface, CLI)

• 명령어 라인 인터페이스는 mac은 터미널, 윈도우는 명령 프롬프르 등의 문자로만 명령어를 입력해 처리애햐하는 인터페이스를 의미한다.

일괄 처리 인터페이스(Batch Interface)

• 일괄 처리 인터페이스는 사용자가 배치 처리에 앞서 배치 작업의 모든 세부 사항을 지정하고, 모든 처리가 완료되면 출력을 수신하는 비대화형 사용자 인터페이스이다. 대규모의 시스템에서 대량의 데이터를 처리하는 데에 자주 사용된다.

그래픽 사용자 인터페이스

• 보통 마우스, 키보드, 모니터 등을 이용해 아이콘을 클릭하거나 직관적인 입력이 가능한 인터페이스이다.

자료 저장소

• 자료를 저장하는 계층으로 쿠키에 저장하는 것과 같이 모든 자원을 하드 디스크에 저장할 필요가 있기 때문에 존재하고 있다. HTML5 명세에는 브라우저가 지원하는 웹 저장소(Web Storage) 스펙이 정의되어 있다.
• 영구적인 저장소인 로컬스토리지와 임시적인 저장소인 세션스토리지를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는선택이 가능해진다.

웹 스토리지(Web Storage) 특징

HTML5 이전에는 응용 프로그램이 데이터에 서버를 요청할 때마다 매번 쿠키(Cookie)라는 곳에 그 정보를 저장해왔다. 그러나 쿠키 자체의 보안상 취약과 더불어 저장소의 절대적인 허용 용량의 적음으로 다른 대안을 찾게 되었고, 이윽고 웹 스토리지가 나오게 되었다.

• 웹 브라우저가 직접 데이터를 저장할 수 있게 해준다.
• 사용자 측에서 더 많은 양의 정보를 안전하게 저장할 수 있게 해준다.
• 모든 정보는 절대 서버로 전송되지 않는다.
• 저장된 데이터가 클라이언트에만 존재하기 때문에 네트워크 트래픽 비용을 줄여주는 특징이있다.
• 오리진(origin)마다 단 하나씩만 존재한다. 오리진은 도메인과 프로토콜 한 쌍으로 이루어진 식별자로, 하나의 오리진에 속하는 모든 웹페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근 할 수 있게 된다.
• 웹 스토리지는 사용하기 전에 사용자의 웹 브라우저 버전이 이를 지원하는지 먼저 확인해봐야한다.

웹 스토리지 종류

웹 스토리지는 데이터의 지속성과 관련해 두 가지 용도의 저장소 객체를 제공한다.

📌 로컬스토리지(localStorage)

• 보관기한이 없는 데이터를 저장한다.
• 브라우저 탭이 닫히거나 컴퓨터를 재부팅해도 로컬스토리지에 저장된 데이터는 사라지지 않는다.
• Windows 전역 객체의 localStroage라는 컬렉션을 통해 저장과 조회가 가능하다.
• 도메인 마다 별도의 localStorage가 생성된다.
• 도메인만 같으면 전역으로 데이터의 공유가 가능하다.

 📌 세션 스토리지(sessionStorage)

• 하나의 세션만을 위한 데이터를 저장한다. 데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지되기 때문에, 사용자가 브라우저 탭이나 창을 받으면 이 객체에 저장된 데이터는 사라진다.
• 브라우징이랑 브라우저 프로그램을 실행해서 인터넷에 들어가 필요한 정보를 찾는 행위이다.
• 브라우저 컨텍스트란 브라우저가 문서를 표시하는 환경이다.
• 브라우징 컨텍스트는 특정 출저 및 활성화되고 있는 문서의 출처, 표시했던 모든 문서의 방문기록을 가지고 있다.
• 저장과 조회는 Windows 전역 객체의 SessionStorage라는 컬렉션을 통해 이루어지며
• 도메인 별로 별도로 생성되는 데 브라우저가 다르면 서로 다른 영역이 되는 특징이있다.
• 즉, 브라우저 두 개를 실행해 같은 페이즈를 열었을 때, 브라우저의 컨텍스트가 서로 다르므로 이 두페이지의 sessionStorage는 각 별개의 영역으로 인지되어 서로 데이터의 공유가 불가능해진다.
•  

웹 스토리지는 클라이언트에 데이터를 저장하기 위한 두 가지 객체를 제공한다.

• window.localStorage : 만료 날짜가 없는 데이터를 저장할 떄 쓰인다.
• window.sessionStorage : 세션이 있는 데이터를 저장할 때 쓰인다. (브라우저 탭을 닫으면 손실되는 것을 의도한 데이터를 저장할 때 쓰인다.

//window 객체에 있는 storage 객체를 통해 확인 할 수 있다.
//해당 객체가 존재하지 않는 브라우저라면 undefined를 반환하고, 존재한다면 function을 반환한다.

if (typeof(Storage) !== "undefined") {

				//web storage를 위한 코드 부분
} else {

		//web storage 를 지원하지 않는 브라우저를 위한 안내 부분

}

웹 스토리지가 존재하는지 확인을 한 다음에, 웹 스토리지에 무엇을 저장할 지 결정하여 조건문 안에 작성을 한다.

웹 스토리지를 활용한 대표적인 기능

• 블로그에서 글을 작성하다가 사용자가 창을 벗어난 경우, 관련 작성 내용을 복구하거나 백업해주는 기능.
• 사용자가 입력 form을 통해 정보를 입력하다 페이지에서 벗어난 경우 복구 및 백업해주는 기능
• 현재 읽은 글의 히스토리 저장(카운팅, 혹은 읽은 글 표시 등으로 활용)