Html/Css
브라우저
- 웹 브라우저, 웹 탐색기라고도 하는 브라우저는 웹 서버에서 양방향으로 통신하며 HTML 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI기반의 소프트웨어 프로그램이다.
- 페이지를 다운로드 하기 위해 응용 계층의 대표적인 프로토콜인 HTTP를 통해 송수신한다.
웹
- 브라우저에서 제공되는 웹은 월드 와이드 웹이 풀 네임이다.
- 인터넷상에서 텍스트나,그림,소리,영상과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결해 제공한다.
- HTML 언어를 사용하여 작성된 문서 형태로 제공이 되며, 이러한 문서들을 웹 페이지라고 부른다.
- 웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합을 웹 사이트라고 부른다.
웹 브라우저 종류
- 순서대로 모자이크(Mosaic),넷스케이프(Netscape),크롬(Chrome) 브라우저이다.
- 최초의 웹 브라우저는 모자이크이며, 이후 상업용 브라우저인 넷스케이프 내비게이터가 등장했다.
- 가장 많은 지분을 차지하는 것은 구글에서 개발한 크롬 브라우저이다.
브라우저의 특징과 웹의 동작 원리
- 브라우저는 사용자가 선택한 자원(Resource)을 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는 방식으로 동작한다.
- 자원은 대게 HTML 문서이지만 가끔 PDF, 멀티미디어 등 다른 형태일 수 있으며, 자원의 주소는 URI로 되어 있다.
- 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력하면 DNS서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색한다.
- 해당 도메인 네임에 해당하는 IP주소를 찾아 사용자가 입력한 URL정보와 함께 전달한다.
- 웹 페이지 URL 정보와 전달받은 IP주소는 HTTP 프로토콜을 사용하고, 생성된 HTTP 프토콜은 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송되고, 이 요청 메시지는 다시 HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환된다.
- 웹 서버는 이 변환이 된 정보에 해당하는 데이터를 검색하여 찾아낸 뒤 HTTP 프로토콜을 통해 HTTP 응답 메시지를 생성하고, 이 메시지는 다시 TCP 프로토콜을 이용해 인터넷을 거쳐 사용자의 컴퓨터로 전송된다.
- 사용자의 컴퓨터에 도착한 HTTP 응답 메시지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환이 되고, 변환된 데이터는 웹 브라우저 상에 출력되어 사용자가 볼 수 있게 된다.
브라우저의 구조
사용자 인터페이스
- UI라고도 부르며, 가장 유저와 밀접하게 맞닿아있는 부분으로 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등에 관련된 GUI 부분을 통칭하고 있다.
브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
- 브라우저의 주된 역할은 HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM)자료 구조를 구현한다.
- 레이아웃 엔진이라고도 부르며, 렌더링 엔진과 밀접한 연관이 있어 보통은 브라우저 엔진과 렌더링 엔진을 묶어 브라우저 엔진으로 부른다.
| 이름 | 설명 |
|---|---|
| 게코(Gecko) | 모질라 재단에서 만든 브라우저 엔즌으로 파이어폭스가 해당 엔진을 탑재하고 있는 유명한 브라우저이다. |
| 웹킷(Webkit) | KHTML에서 파생된 브라우저 엔진으로 사파리가 해당 엔진을 탑재하고 있는 가장 유명한 웹 브라우저이다. |
| 블링크(Blink) | 웹킷(Webkit)에서 파생된 브라우저 엔진으로 크롬,오페라가 해당 엔진을 탑재하고 있는 유명한 웁 브라우저이다. |
| 트라이던트(Trident) | 마이크로소프트의 브라우저 엔진으로 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩 등이 이를 탑재하고 있다. |
| 엣지HTML(EdgeHTML) | 트라이던트에서 파생된 브라우저 엔진으로 마이크로소프트 엣지 스파르탄 버전(~2019)까지 탑재되어있다.(현재는 블링크로 교체됐다.) |
렌더링 엔진
- 요청한 콘텐츠를 화면에 출력하는 역할을 한다.
- HTML,CSS 등을 파싱해 최종적으로 화면에 그려주며, 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다.
- 브라우저 엔진과 밀접하게 결합되어 있으므로 보통은 하나의 엔진으로 보는 시각이 많다.
- 렌더링 엔진 또한 웹 브라우저마다 전용 엔진을 사용하고 있으나 엔진의 동작 원리는 공통된 부분이 많다.
통신
- HTTP 요청과 같은 네트워크 호출에 사용된다.
- 보통 플랫폼의 독립적인 인터페이스고, 각 플랫폼의 하부에서 실행된다.
자바스크립트 해석기
- 대부분의 웹 인터랙션에 JavaScript가 사용되고 있으며 자바스크립트 코드를 해석하고 실행하는 자바스크립트 해석기가 필요에 의해 등장하게 되었다.
- 자바스크립트 엔진이라고도 부르는 자바스크립트 해석기는 여러 목적으로 사용이 되지만 댗로 웹 브라우저에서 이용되며, 브라우저마다 전용 엔진이 탑재되어 있다.
- 이 외의 다양한 엔진
| 이름 | 설명 |
|---|---|
| Rhino | 모질라 재단이 운영하는 오픈소스 엔진으로 자바로 개발되었다는 특징이 있다. |
| SpiderMonkey | 최초의 JavaScript 엔진으로 넷스케이프 내비게이터를 지원하였으며, 현재는 파이어폭스를 지원하고 있다. |
| V8 | 구글이 개발한 오픈 소스 엔진으로 구글 크롬의 JavaScirpt 엔진이다. |
| JavaScriptCore | 애플에서 개발하였으며 처음에 Webkit 프레임워크를 위해 개발되었지만 현재는 사파리와 React Native App를 지원하고 있다. |
| Chakra | 마이크로소프트가 개발한 엔진이며, Edge 브라우저를 지원하고 있다. |
힙 메모리와 콜 스택
힙 메모리(Heap Memory)
- 힙은 동적 메모리 할당에 사용되는 자료구조이다.
- 힙을 이용하여 V8은 객체 또는 동적 데이터를 저장한다.
- 저장되는 메모리는 V8 엔진 내부에서 가장 큰 공간을 차지하고 있으며, 가비지 컬렉션 또한 발생하는 곳이다.
콜 스택(Call Stack)
- JavaScript는 기본적으로 싱글 스레드 기반의 언어이다.
- 콜 스택이 하나라는 의미이며, 한 번에 한 작업만 사용할 수 있다.
- 콜 스택은 프로그램상에서 우리가 어디에 있는지 기록하는 자료구조이다.
- 함수를 실행한다면, 함수는 콜 스택의 가장 상단에 위치한다.
- 스택이 후입선출이라는 구조로 되어있기 때문에 일어나는 일이며 함수의 실행이 끝난다면 해당하는 함수는 콜 스택의 가장 상단에 있기 때문에 바로 제거할 수 있다.
콜 스택의 동작 방식
- 제일 먼저
printSquare(4)가 호출되며, 호출되는 순간 해당하는 함수가 스택으로push된다. - 함수
printSquare내부에서는 다시square(n)을 호출하고 있으므로, 함수square를 스택 안으로push한다. - 함수
square내부에서도multiply(n,n)을 호출하고 있으므로 함수multiply를 뒤이어 스택 안으로push한다. - 함수
multiply까지 도착해서야 return 되는 특정 값을 얻는다.
- 함수
multiply와 함수square에서 차례대로 return문의 결과를 얻는다. - 스택 내부에서 차례대로 제거한다.
printSquare(4)를 호출하고, 함수printSquare, 함수square, 함수multply까지 성공적으로 실행시킨 과정이다.
- 함수
printSquare내부에console.log(squared)가 있으므로, 해당 메서드를 실행하는 순간 스택 안에console.log스택이 쌓인다. console.log의 실행이 끝나면 스택에서 제거되고, 함수printSquare또한 실행이 완료되었으므로 스택에서 제거 된다.- 이렇게 스택이 완전히 비어있게 된다.
- 콜 스택에 쌓이는 데이터 하나하나를 스택 프레임이라고 부르며, 스택 내에 쌓이는
printSquare(4)하나가 프레임 하나임을 의미한다. - 쌓이는 순서가 있기 때문에 콜 스택이 동장하는 방식을 안다면 스택의 추적 또한 가능해지게 된다.
- 콜 스택은 힙과는 달리 자료구조 자체가 크기에 제한이 있다.
- 한정된 메모리 공간을 넘어버리게 되면 스택 오버플로라는 에러를 발생시키게 된다.
스택 오버플로
- 그림에서처럼 프레임이 어느 순간 스택의 크기를 넘어버리게 되고, 콜 스택의 제한된 크기를 스택 프레임이 넘어버리게 되면 웹 브라우저는 멈춰버리게 된다.
스택 추적
baz()함수는 함수bar()를 호출하고,bar()는foo()함수를 호출하고,foo()는 에러 메시지를 출력한다.- 이것이 바로 스택 추적이라고 부르는 것이다.
UI 백엔드
- 렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당한다.
- 거의 모든 운영체제는 사용자 인터페이스를 가지고 있으며, 이 인터페이스는 여러 형태를 가지고 있다.
- 이러한 종류의 인터페이스를 다룰 때는 특정한 명령 체계를 사용해야 하는데, 그 중 하나가 명령어 라인 인터페이스(CLI)이며 또 하나는 일괄 처리 인터페이스이다.
- 명령어 라인 인터페이스는 문자로만 명령어를 입력해 처리해야 하는 인터페이스를 의미한다.
- 그래픽 사용자 인터페이스는(GUI) 마우스,키보드,모니터 등을 이용해 아이콘을 클릭하거나 직관적인 입력이 가능한 인터페이스이다.
자료 저장소
- 자료를 저장하는 계층으로, 쿠키를 저장하는 것과 같이 모든 자원을 하드 디스크에 저장할 필요가 있기 때문에 저장하고 있다.
- 영구적인 저장소인 로컬 스토리지와 임시 저장소인 세션 스토리지를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능해진다.
웹 스토리지 특징
- HTML5 이전에는 응용 프로그램이 데이터에 서버를 요청할 때마다 매번 쿠키라는 곳에 그 정보를 저장해왔다.
- 쿠키 자체의 보안상 취약과 더불어 저장소의 절대적인 허용 용량의 적음으로 다른 대안을 찾게 되었고, 이윽고 웹 스토리지가 나오게 됐다.
- 웹 스토리지는 웹 브라우저가 직접 데이터를 저장할 수 있게 해준다.
- 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장해준다.
- 모든 정보는 절대 서버로 전송되지 않으므로 저장된 데이터가 클라이언트에만 존재하기 때문에 네트워크 트래픽 비용 또한 줄여준다는 특징을 갖고 있다.
- 웹 스토리지는 오리진마다 단 하나씩만 존재하는데,오리진은 도메인과 프로토콜 한 쌍으로 이루어진 식별자로, 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근할 수 있게 된다.
로컬 스토리지
- 로컬 스토리지 객체는 보관 기한이 없는 데이터를 저장한다.
- 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 저장소에 저장된 데이터는 사라지지 않는다.
- Windows 전역 객체의 localStorage라는 컬렉션을 통해 저장과 조회가 가능하며, 도메인 마다 별도의 로컬스토리지가 생성된다.
- 도메인만 같으면 전역으로 데이터의 공유가 가능해진다.
세션 스토리지
- 하나의 세션만을 위한 데이터를 저장한다.
- 데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저의 컨텍스트 내에서만 데이터가 유지되기 때문에, 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라진다.
- 브라우징이란 브라우저 프로그램을 실행해서 인터넷에 들어가 필요한 정보를 찾는 행위를 말하며, 브라우저 컨텍스트란 브라우저가 문서를 표시하는 환경을 말한다.
- 각 브라우징 컨텍스트는 특정 출처 및 활성화되고 있는 문서의 출처, 표시했던 모든 문서의 방문 기록을 가지고 있다.
- 저장과 조회는 Windows 전역 객체의 sessionStorage라는 컬렉션을 통해 이루어지며, 도메인별로 별도로 생성된다.
- 브라우저 컨텍스트가 다르면 서로 다른 영역이 된다는 특징이 있다.
- 브라우저 두 개를 실행해 같은 페이지를 열였을 때, 브라우저의 컨텍스트가 서로 다르므로 두 페이지의 세션 스토리지는 각 별개의 영역으로 인지되어 서로 데이터의 공유가 불가능해진다.
웹 스토리지를 지원하는 웹 브라우저 버전
window.localStorage: 만료 날짜가 없는 데이터를 저장할 때 쓰인다.window.sessionStorage: 세션이 있는 데이터를 저장할 때 쓰인다.
1
2
3
4
5
6
7
//window 객체에 있는 Storage 객체를 통해 확인할 수 있습니다.
//해당 객체가 존재하지 않는 브라우저라면 `undefined`를 반환하고, 존재한다면 객체를 반환합니다.
if (typeof Storage !== "undefined") {
// web storage를 위한 코드 부분
} else {
// web storage를 지원하지 않는 브라우저를 위한 안내 부분
}
웹 스토리지를 활용한 대표적인 기능
- 브라우저 컨텍스트 내에서 저장한 데이터를 활용할 수 있기 때문에 복구 및 백업에 관련된 기능에 주로 사용된다.
- 블로그 글을 작성하다가 사용자가 창을 벗어난 경우 관련 작성 내용을 복구하거나 백업해주는 기능
- 사용자가 입력 form을 통해 정보를 입력하다 페이지에서 벗어난 경우 복구 및 백업해주는 기능
- 현재 읽은 글의 히스토리 저장
브라우저 렌더링
- 브라우저 렌더링에서 렌더링이란, HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미한다.
- 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있다.
브라우저 렌더링 과정
- 사용자가 브라우저를 통해 웹 사이트에 접속한다.
- 브라우저는 서버로부터 HTML,CSS,JavaScript와 같은 웹 사이트에 필요한 리소스를 다운받는다.
- 렌더링 엔진은 전달받은 HTML 문서를 파싱해 DOM(문서 객체 모델)트리를 만든다.
- 이어서 다운받은 외부 CSS파일과 함께 포함된 스타일 요소를 파싱해 CSSOM(CSS 객체 모델)트리를 만든다.
- 만든 DOM트리와 CSSOM 트리를 결합해 Render 트리를 구축한다.
- 레이아웃 과정을 통해 각 요소를 어디에 배치할지 결정한다.
- 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작한다.
- 이 과정을 paint라고 한다.
파싱(Parsing)
- 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석을 하는 단계이다.
- 파싱을 파서(parser)가 진행하며, 인프리터나 컴파일러 구성 요소 가운데 하나이다.
- 파서는 HTML파일의 코드를 문법적 의미를 갖는 최소 단위인 토큰으로 한 번 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드라는 요소로 바꾼다.
- 노드들은 상하 관계에 따라 하나의 트리를 형성하는데 이를 파스 트리 혹은 문법 트리라고 부른다.
- 문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.
- 브라우저는 HTML 문서를 받자마자 DOM 트리로 파싱한다.
- HTML 토큰이 만들어지고, 이 토큰에는 시작 태그와 마침 태그가 포함되고, 속성 이름과 값도 포함된다.
- 토큰으로 변한 입력값은 파서에 의해 노드가 되고, 최종적으로 트리 구조의 DOM으로 구성이 된다.
- HTML문서를 파싱하면서 CSS 스타일을 만날 경우 텍스트를 CSS 스타일링 레이아웃과 페인팅에 사용하는 데이ㅓ 구조인 CSSOM 트리로 파싱하고,
<script>태그를 만날 경우 렌더링을 차단하면서 HTML파싱 또한 중단한다. <script>태그 내src속성으로 연결된 파일을 다운받아 파싱하고 실행시킨 뒤 다시 HTML 파일을 파싱하기 시작한다.
DOM Tree
- DOM은 HTML 문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것을 의미하며, Document Object Model의 줄임말이다.
- 브라우저는 JavaScirpt언어만 알아듣기 때문에 HTML 태그나 속성들을 이해하지 못하며, 응답으로 받아온 HTML 문서는 텍스트로만 이뤄져 있다.
- 이해할 수 있는 형태인 객체로 바꿔주는 것이 DOM 트리이다.
CSSOM Tree
- HTML 파일을 DOM트리로 파싱하던 브라우저는
<link>,<style>태그를 만나게 되면 파싱을 멈추고 해당 리소스 파일을 서버로 요청한다. - 요청한 파일을 HTML파일과 마찬가지로 파싱하는데, 파일을 파싱해 만든 트리를 CSSOM이라고 한다.
- CSSOM 트리를 구축하고 나면 브라우저는 다시 HTML파일의 파싱을 멈췄던 부분으로 돌아가서 마저 DOM트리를 구축한다.
- CSS는 부모의 속성을 자식이 상받는다.
Render Tree
- DOM트리와 CSSOM 트리는 트리 구조로 되어 있기 때문에 비슷하게 생겼지만, 리소스부터 다른 속성을 가진 독립적인 트리이다.
- 따라서 브라우저 위에 웹 사이트를 표시하기 위해 이 둘을 합치는 작업이 필요한하다.
- 랜더 트리는 렌더링을 목적으로 만들어지는 트리로, 렌더링은 사용자에게 브라우저가 보여주고자 하는 화면을 그리는 과정이므로, 보이지 않을 요소들은 이 트리에 포함시키지 않는다.
<meta>,display:none과 같이 사용자에게 보여주지 않아도 되거나 보여주지 말아야 할 태그나 요소는 렌더 트리에서 제외된다.
레이아웃
- 브라우저 렌더링에서 레이아웃 과정은, 평소 말하는 웹 ㅍ이지 레이아웃, 디자이너들의 레이아웃과는 다른 개념이다.
- 렌더 트리를 기반으로 HTML요소의 레이아웃(위치,크기)을 계산하여 화면 어디에 배치할지 결정하는 과정이다.
- DOM, CSSOM에 있던 속성들을 합쳐서 렌더 트리를 구성하는 것을 볼 수 있는데, 렌더 트리는 텍스트로 구성된 객체로만 보이기 때문에 페인팅이란 작업을 거쳐 브라우저 위에 그려지게 된다.
- 렌더 트리에는 CSSOM 트리에 있던 속성들이 합쳐져 있고 요소들의 크기,혹은 위치에 관련된 정보들이 들어 있다.
- 이 정보들은 각 요소에 관련된 정보일 뿐, 전체 화면에서 정확히 어디에 위치하는가에 대해 알지 못한다.
- 이런 계산을 브라우저의 렌더링 엔진이 한다.
- 브라우저는 각 요소가 전체 화면에서 어디에,어떤 크기로, 어떻게 배치되어야 하는지 파악하기 위해 렌더트리를 위에서 아래로 읽어 내려가며 모든 값은 절대값인 px로 변환된다.
페인팅
- 위치에 대한 계산을 마치면 화면 위에 레이아웃에서 결정된 대로 그림을 그리기 시작한다.
- 각 정보를 가진 픽셀들이 모여 하나의 화면을 구성하며, 이 과정까지 해내야 텍스트에 불과했던 HTML 파일의 내용들이 이미지화된 모습으로 브라우저 화면에 띄어지는 것이다.