브라우저

우리가 몰랐던 월드 와이드 웹월드 와이드 웹이란?흔히 웹(Web)으로 불리는 월드 와이트 웹(World Wide Web, www)은 인터넷에 연결된 컴퓨터들이 서로 정보를 공유할 수 있고 정보에 접근할 수 있는 공간이다. 전 세계에 흩어저있는 정보들의 모습이 거미출 처럼 연결되어 있어 웹을 통해 정보를 빠르게 찾을 수 있다.예를 들어보자면, 우리들은 인터넷 세상에서 크리에이터들이 많은 영상들을 만들어 올려주는 유튜브에서 원하는 영상을 감상할 수 있으며 아마존, 쿠팡, 등의 이커머스 플렛폼에서 원하는 물건의 정보를 얻을 수도 있고 구매할 수 있다. 웹은 1989년 팀 버너스리 경에 의해 최초로 고안되었으며, 웹의 소스코드를 저작권 없이 무료로 공개하고 웹 표준을 관리하는 W3C를 개설하는 등 웹 생태계의 ..

구글의 V8 JS 엔진으로 빌드된 JS 런타임 환경인 Node.js의 등장으로 JS는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 언어가 되었다. 하지만 JS는 여전히 웹 브라우저 환경에서 많이 동작하는 클라이언트 사이드이다. 대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행되지만 웹 애플리케이션의 클라이언트 사이드 JS는 브라우저에서 HTML, CSS와 함께 실행된다. 이번 쳅터에서는 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 알아보자.파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 토큰으로 분해해 문법적 의미와 구조를 반영해 트리구조인 파스 트리를 생성하는 과정이다.렌더링: HTML, CSS,..

URL을 웹 브라우저의 주소창에 입력한다. 웹 브라우저가 URL을 해석 후 문법에 맞지 않는다면 검색엔진을 이용해 검색한다. 문법에 맞으면 URL의 호스트 부분을 인코딩한다. HSTS(HTTP Strict Transport Security) 목록을 확인하고 있으면 HTTPS로, 없다면 HTTP로 요청한다. DNS(Domain Name Server) 조회 브라우저/로컬 캐시를 확인해서 도메인에 해당하는 IP가 있는지 확인한다. 없다면 OS에게 DNS 서버에 요청을 지시 DNS 서버는 해당 도메인에 해당하는 IP를 돌려준다 (HTTP 요청) TCP 3-way handshake과정을 통해 연결을 설정한다. 클라이언트가 서버에게 연결 요청 (SYN 패킷) 서버가 클라이언트에게 요청을 수락하고 연결을 설정한다는 ..

브러우저의 랜더링 원리 브라우저가 화면에 나타나는 요소를 렌더링할 때, webkit이나 Gecko 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript를 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하며 아래의 단계들로 이루어진다. 토큰화된 HTML 문자열들을 이용해 DOM(Document Object Model) 트리를 구축 DOM은 Javascript를 이용해 실제 상호작용할 수 있는 HTML 엘리먼트로 이루어진 객체 HTML 파서의 특징 너그러운 속성 ▶ 최상단에 태그, 닫는 태그를 작성하지 않아도 정상적으로 렌더링된다. (HTML은 대부분의 프로그래밍 어너가 속한 촘스키의 문맥자유문법에 속하지 않기에 그렇다 한다) 파싱 과정..