>웹 프론트엔드 >JS 튜토리얼 >웹 기술과 브라우저의 진화

웹 기술과 브라우저의 진화

DDD
DDD원래의
2024-11-03 07:08:03455검색

Evolution of Web Tech and Browsers

안녕하세요! 웹이 정확히 어떻게 작동하는지, 그리고 신비한 브라우저에 URL을 입력하면 실제로 어떤 일이 일어나는지 궁금한 적이 있습니까? 걱정하지 마세요. 혼자가 아닙니다.  우리 대부분은 웹을 일종의 블랙박스로 취급합니다. 하지만 이 블로그를 클릭하셨으니, 내부를 들여다보고 싶으실 수도 있을 것 같습니다. 정말 환상적이에요! 호기심이 고양이를 죽일 수도 있지만, 개발자에게는 이것이 비결입니다.

작동 방식에 대해 조금 알고 있더라도 왜 이런 식으로 진화했는지 의문이 생길 수 있습니다. 나는 “현재를 이해하고 미래를 예측하거나 영향을 미치려면 과거를 알아야 한다”고 믿습니다. 아니면 일부 사람들이 제안한 것처럼, hum chronology samajhna chahiye! 이제 웹 기술과 브라우저의 발전 과정을 명확하게 설명하기 위해 단순화된 4단계로 나누어 살펴보겠습니다. 이 여정이 끝나면 웹 기술이 어떻게 발전했는지뿐만 아니라 내부적으로 어떤 일이 일어나는지, 이러한 변화가 발생한 이유와 웹의 미래에 어떤 의미가 있는지 이해하게 될 것입니다.

참고 : 정확한 일정은 아니고 이해를 돕기 위해 단계를 단순화한 것입니다.

제로스 페이즈: 선사시대 거미줄

1980년대 이전으로 돌아가보자

많은 연구자들이 데이터를 전송하거나 공유하기 위해 컴퓨터 사이에 물리적인 전선을 설치하여 미국 대학을 돌아다니고 있다고 상상해 보세요. 이러한 기술 선구자들은 파일을 공유하고 이메일을 보내기 위해 FTP(파일 전송 프로토콜) 및 SMTP(간단한 메일 전송 프로토콜)와 같은 프로토콜을 확립했습니다. 대부분은 획기적인 실험과 가끔씩 발생하는 사무실 소문에 관한 것입니다. 예전에는 원격 클라이언트를 통해 연결하고, 작성된 명령을 사용하여 디스크에 파일을 저장하거나 가져올 수 있는 서버가 있었습니다.

이것은 적은 양의 데이터에는 좋았지만 데이터가 점점 더 빠르게 증가함에 따라 특정 정보를 찾는 것이 정말 골치 아픈 일이 되었습니다. 데이터를 검색하려면 정확한 경로, 서버 주소를 알아야 하고 컴퓨터 신들을 달래기 위해 약간의 춤도 추어야 했습니다. 양말이 빨래의 소용돌이 속으로 사라지는 것처럼 귀중한 정보가 디지털 셔플 속에서 서버 전체에 흩어져 손실될 위험이 있었습니다.

첫 번째 단계: 웹의 탄생

1980년대 후반~1990년대 초반으로 들어가세요

Tim Berners-Lee 경이라는 뛰어난 영국인이 함께 왔습니다. 그는 정보관리: 제안이라는 제안서를 썼습니다. 그는 거대한 거미줄처럼 연결된 관련 정보에 대한 링크를 포함하는 텍스트를 의미하는 "하이퍼텍스트"로 알려진 비선형 텍스트 시스템 사용에 대해 이야기했습니다. 따라서 관련 데이터를 탐색하고 탐색하는 것이 더 쉬워지고 정보 손실이 최소화됩니다!

이번 제안에서 그는 상호 연결된 컴퓨터를 '웹'이라고 부르기도 했습니다. 그리고 그렇게 월드와이드웹(World Wide Web)이 탄생했습니다! 그는 거기서 멈추지 않았습니다. 그는 계속해서 HTTP(HyperText Transfer Protocol)를 발명하고 WorldWideWeb이라는 매력적인 이름의 첫 번째 브라우저(나중에 Nexus로 브랜드 변경), 첫 번째 HTTP 웹 서버 및 첫 번째 웹사이트를 개발했습니다. 초과 달성에 대해 이야기해 보세요!

  • HTTP(HyperText Transfer Protocol): 클라이언트(예: 웹 브라우저)와 웹 서버(예: 웹 브라우저) 간의 정보 전송에 사용되는 일련의 규칙, 구문 및 의미 체계입니다. 웹사이트를 호스팅하는 원격 컴퓨터). 이름이 궁금하다면 처음에는 HTML 파일 전송에만 사용되었습니다. 그러나 헤더, 특히 Content-Type 헤더가 도입된 이후 이후 버전에서는 모든 유형의 데이터 전송을 지원하도록 발전했습니다.

  • HTTP 웹 서버 : 이 HTTP 프로토콜을 이해할 수 있는 컴퓨터입니다. 주요 작업은 요청을 구문 분석하고 요청된 응답을 제공하는 것입니다. 현재로서는 대부분 정적 HTML, CSS, JPG 파일입니다.

여기서 HTML(Hypertext Markup Language)이 등장하여 하이퍼텍스트 개념과 SGML(Standard Generalized Markup Language)을 결합하여 문서 서식을 지정하는 데 사용했습니다. HTML의 첫 번째 버전은 매우 기본적이었습니다. 제목, 단락, 목록 및 링크를 지원했습니다. 화려한 글꼴이나 화려한 애니메이션은 없습니다.  꼭 필요한 것만 있습니다.

처음 몇 년 동안 웹은 연구자와 학계의 전담 동아리와 같았습니다. 그러다가 일부 영리한 사람들이 이미지를 표시할 수 있는 모자이크라는 브라우저를 개발했습니다. 응, 이미지야! 이로 인해 일반 대중이 웹에 더 쉽게 접근할 수 있게 되었습니다. 왜냐하면 사진 한 장이 천 줄의 가치가 있기 때문입니다(이 블로그에는 사진이 없나요?)!

브라우저 내부

그러므로 바로 위의 기능을 갖춘 브라우저 내부에서 무슨 일이 일어나고 있는지 살펴보겠습니다

사용자 인터페이스: 모든 브라우저 상단에는 열려 있는 모든 탭(또는 당시 창)을 볼 수 있는 탐색 표시줄이 있었습니다. 그 아래에는 웹사이트 주소를 입력하는 주소 표시줄이 있었습니다. 그 아래에는 입력한 웹 사이트의 내용이 표시되는 장소(뷰포트)가 있습니다. 이는 검색 엔진 이전의 일이므로 정확한 주소를 모르면 운이 없는 것입니다.  GPS나 지도 없이 장소를 찾으려는 것과 같습니다.

데이터 가져오기 : 웹사이트 주소를 입력하면 브라우저의 네트워크 모듈이 DNS 확인과 같은 작업을 수행하고 서버와 보안 연결을 설정하여 통신을 시작하여 데이터를 가져옵니다. 그러면 브라우저는 서버로부터 HTML 형식의 데이터를 수신하게 됩니다.

렌더링 엔진 : 렌더링 엔진이 HTML 구문 분석을 시작합니다. 이미지() 또는 스타일(