## 웹의 역사 초창기 인터넷은 대학이나 연구소, 주요 기업들을 물리적 케이블로 연결한 네트워크였고 애플리케이션마다 다른 프로토콜로 통신했었다. 초기의 웹은 이런 환경 위에서 만들어졌다. - 웹페이지는 컴퓨터에 저장된 특정 형식의 파일이었고 - URL은 특정 컴퓨터와 특정 파일 이름을 가리켰고 - 초기 서버는 디스크에서 파일을 읽어주는 수준의 기능만을 했다. 요즘 인터넷은 초창기와 비교했을 때 많은 것이 바뀌었다. - 웹페이지는 단순히 컴퓨터에 저장된 파일이 아니라 서버에서 동적으로 조합되기도 하고 (SSR) 클라이언트에서 동적으로 조합되기도 한다. (CSR) - URL은 특정 컴퓨터를 가리키는 것이 아니라 특정 리소스에 접근하기 위한 진입점 정도의 역할을 한다. > [!info]- 초창기 URL과 요즘 URL ([[CDN]]) > 초창기 URL은 말 그대로 특정 컴퓨터와 특정 파일의 위치를 정확하게 가리켰다. > 그래서 URL을 입력하면 [[DNS]]가 실제로 웹사이트가 호스팅되고 있는 단 하나의 서버 IP 주소로 URL을 변환시켜줬고, 사용자의 요청은 해당 IP 주소의 서버로 직접 전달되었다. 그럼 그 서버의 index.html이 응답되는 것이었다. > > 이 방법은 간단하지만 문제점이 있었는데, 서버와 사용자의 실제 물리적인 거리에 따라 지연이 발생할 수 있다는 것과, 여러 요청이 한 서버에게만 집중된다는 과부하 문제였다. > 그래서 등장한 것이 [[CDN]]이다. > > [[CDN]]는 전 세계 곳곳에 배치된 캐싱 서버 (엣지 서버)들의 분산 네트워크이다. [[CDN]]이 도입되면서 URL은 직접적으로 한 서버를 가리키는 것이 아니라 동적으로 라우팅되기 시작되었다. > URL을 입력하면 DNS는 CDN 제공 업체의 시스템으로 요청을 보낸다. 요청을 받은 CDN 시스템은 사용자의 지리적 위치, 현재 네트워크 상태, 각 엣지 서버들의 부하 상태 등 여러가지 요소를 고려해서 최적의 엣지 서버의 IP 주소를 돌려준다. 사용자의 요청이 엣지 서버로 전달되면, 엣지 서버는 캐싱되어있던 원본 콘텐츠의 복사본을 응답하는 방식으로 동작한다. 이렇게 많은 것들이 바뀌었지만,, 웹의 근본은 변하지 않았다. - 웹은 하이퍼링크로 연결된 정보 네트워크이고 - 사용자는 브라우저라 불리는 사용자 에이전트로 웹을 탐색하고 - 정보는 HTTP 프로토콜로 요청하고 응답받고, HTML 문서 형식으로 구조화된다. - 문서는 URL로 식별한다. - 웹 페이지는 이미지, CSS, JS 등 다양한 형식의 서브 리소스에 링크할 수 있고 - 이 모든 구성요소가 개방적이고 표준화되어 있어서 자유롭게 사용하고 재사용 할 수 있다. 근본 요소를 무엇이라고 생각하는지는 사람에 따라 다를 수 있지만 중요한 것은 웹을 구성하는 기술들은 진화하고 성장하겠지만, **웹의 본질은 계속 유지된다는 것**이다. > [!idea]- 웹의 본질이란 무엇일까 > 아직 모르겠음 ## 브라우저 HTML과 CSS는 무엇을 달성해야 하는지 설명하는 선언적 API이다. 이 API를 구현하는 것이 브라우저의 역할이다. > [!info]- HTML과 CSS는 무엇을 달성해야 하는지 설명하는 **선언적 API**이다. > 프로그래밍 방식에는 크게 두 가지가 있다. > - 명령적(Imperative) 방식 : 어떻게 할 것인지를 단계별로 명령하는 방식 > - 선언적(Declarative) 방식 : 무엇을 만들고 싶은지 결과 상태를 선언하는 방식 > > HTML과 CSS가 선언적인 이유는 > - **HTML은 문서의 구조와 의미를 선언하기 때문이다.** > `<p>` 태그를 사용하면 이 내용은 '단락'이라고 선언하는 것이다. 단락을 어떻게 화면에 띄울지는 HTML이 관여하지 않는다. > - **CSS는 요소의 스타일을 선언하는 것이기 때문이다.** > `color: blue;` 라고 선언하면 이 텍스트는 파란색이어야 한다고 요구하는 것이다. 실제로 화면에 어떻게 글씨를 파랗게 띄울 것인지는 CSS가 고려하지 않는다. 본래 의미랑 번역이랑 좀 다른 듯 ([Browsers and the Web \| Web Browser Engineering](https://browser.engineering/intro.html#browser-code-concepts)) 브라우저에는 제어의 역전, 제약 프로그래밍, 선언형 프로그래밍이 구현되어 있어 이러한 API를 구현할 수 있다. - **제어의 역전 (inversion of control)** [Inversion of control - Wikipedia](https://en.wikipedia.org/wiki/Inversion_of_control) 개발자가 브라우저로 <u>매개변수</u>와 콘텐츠를 전달하면, 브라우저는 개발자 대신 (제어를 역전) 랜더링을 처리한다. - **제약 프로그래밍 (constraint programming)** [Constraint programming - Wikipedia](https://en.wikipedia.org/wiki/Constraint_programming) 개발자가 랜더링을 위해서 전달하는 매개변수는 절대적인 값이 아닌 상대적인 크기나 위치 같은 **제약 조건**의 형태로 주어진다. 따라서 브라우저는 이 제약 조건을 풀어서 값을 계산해야 한다. - **선언형 프로그래밍 (declarative programming)** [Declarative programming - Wikipedia](https://en.wikipedia.org/wiki/Declarative_programming) 이벤트를 처리할 때 언제 이벤트를 처리해야 할지 지정하지 않고, 이벤트가 발생했을 때 처리할 것을 선언만 해 둔다. <u>브라우저는 이 처리를 최대한 지연시켰다가(lazy evaluation) 다른 API가 호출되거나 사용자에게 화면을 보여줘야 할 때 적용한다.</u> #좀더자료조사가필요할듯  ## 브라우저의 역할 웹은 문서 기반의 정보를 공유한다는 원래 목적을 넘어선 역할을 한다. [Progressive web app - Wikipedia](https://en.wikipedia.org/wiki/Progressive_web_app) [WebView - Wikipedia](https://en.wikipedia.org/wiki/WebView) ## 웹의 역사 - 1945년 버니바 부시가 기고한 ['우리가 생각하는 대로'](http://en.wikipedia.org/wiki/As_We_May_Think)라는 에세이에 등장한 [Memex](https://en.wikipedia.org/wiki/Memex) 웹의 초기 영감을 제공한 선구적인 개념 - 1964-65년 테드 넬슨의 [Project Xanadu](https://en.wikipedia.org/wiki/Project_Xanadu) 최초의 하이퍼텍스트 프로젝트 (하이퍼텍스트 : 하이퍼링크로 다른 텍스트와 연결된 텍스트) - 1968년 더글라스 엥겔바트의 ['모든 데모의 어머니'](https://en.wikipedia.org/wiki/The_Mother_of_All_Demos) 제너두 프로젝트에 영감을 받은 연구 발표. 웹의 핵심 개념과 마우스 같은 브라우저 UI의 핵심 요소도 소개함. - 1989-90년 팀 버너스 리가 개발한 최초의 브라우저와 웹 서버가 탄생 [WorldWideWeb, the first Web client](https://www.w3.org/People/Berners-Lee/WorldWideWeb.html) - 1990년 12월 20일 첫번째 웹페이지 [The World Wide Web project](https://info.cern.ch/hypertext/WWW/TheProject.html) ## 브라우저의 역사 - 1992년 최초로 널리 배포된 브라우저 [ViolaWWW](https://en.wikipedia.org/wiki/ViolaWWW) - 1993년 비올라 브라우저에 영감을 받은 [NCSA Mosaic](https://en.wikipedia.org/wiki/NCSA_Mosaic) - 1994년 모자익 제작자가 설립한 [넷스케이프](https://en.wikipedia.org/wiki/Netscape)에서 최초의 상업용 브라우저인 [넷스케이프 네비게이터](https://en.wikipedia.org/wiki/Netscape_Navigator) 개발 - 1995년 마이크로소프트에서 [인터넷 익스플로러](https://en.wikipedia.org/wiki/Internet_Explorer) 출시 - 1995-2001년 [첫 번째 브라우저 전쟁](https://en.wikipedia.org/wiki/Browser_wars#First_browser_war_(1995%E2%80%932001)) 발발 - 넷스케이프 vs 인터넷 익스플로러 - 이 시기에 CSS, DOM, JS 등이 브라우저에 포함되었다. - 1997년 넷스케이프가 개발한 [게코 렌더링 엔진](https://en.wikipedia.org/wiki/Gecko_(software)) -> [파이어폭스](https://en.wikipedia.org/wiki/Firefox)가 게코를 기반으로 만들어짐 (2004년) - 1999년 [KHTML](https://en.wikipedia.org/wiki/KHTML) 프로젝트 시작 -> [사파리](https://en.wikipedia.org/wiki/Safari_(web_browser))와 [크롬](https://en.wikipedia.org/wiki/Google_Chrome)과 [엣지](https://en.wikipedia.org/wiki/Microsoft_Edge) 같은 [크로미움](https://www.chromium.org/chromium-projects/) 베이스 브라우저들이 이 코드베이스에서 시작됨. - 2004-2017년 [두 번째 브라우저 전쟁](https://en.wikipedia.org/wiki/Browser_wars#Second_browser_war_(2004%E2%80%932017)) 발발 - 다양한 브라우저들간의 점유율 전쟁 - 인터넷 익스플로러, 파이어폭스, 사파리, 크롬이 주요 경쟁자였음 - 크롬이랑 사파리는 동일한 렌더링 엔진을 사용했었는데, 2013년에 크롬이 [Blink](https://en.wikipedia.org/wiki/Blink_(browser_engine))로 코드 베이스를 분리함 - 이 시기에 AJAX의 광범위한 사용, `<canvas>` 같은 HTML5 기능, 다양한 JavaScript 라이브러리와 프레임워크 같은 모던 웹의 많은 기능들이 개발되었다. ## 웹 표준 1994년 10월에 웹 기능에 대한 감독과 표준을 제공하기 위해서 [월드와이드웹 컨소시엄 (W3C)](https://www.w3.org/about/history/)이 설립되었다. 이전까지는 어떤 브라우저가 새로운 기능을 개발하면 나머지 브라우저들이 경쟁적으로 추가하는 방식이었는데, 표준 단체가 등장한 이후엔 초기부터 논의해서 새로운 기능을 추가하게 되었다. ## 오픈소스 두 번째 브라우저 전쟁의 결과에서 흥미로운 점 중 하나는 오픈소스 웹 렌더링/자바스크립트 엔진이다. - 크로미움, 게코, 웹킷 크로미움과 웹킷은 같은 코드베이스에서 시작했고, 게코는 넷스케이프의 오픈소스 버전에 기반을 두고 있다. 이렇게 오픈소스로 되어 있는 주요 브라우저들은 웹의 탈중앙적 특징을 강화한다...!