웹 작동 방식, 2부: URL을 방문하면 어떻게 됩니까?

게시 됨: 2016-12-06

이전 게시물에서 우리는 웹이 어떻게 생겨났는지에 대해 이야기했습니다. 이 게시물에서는 브라우저를 사용하여 URL을 방문할 때 어떤 일이 발생하는지 살펴보겠습니다. 또한 웹에서 사용되는 현대 기술과 이러한 기술이 모두 어떻게 결합되는지 살펴보겠습니다.

Enter 버튼을 누르는 순간부터 웹 페이지를 볼 때까지 관련된 기술은 다양합니다. 이전 게시물에서 하이퍼텍스트와 HTTP에 대해 이야기했지만 이것은 시작에 불과했습니다.

웹 서버 (apache2 및 nginx와 같은)는 웹 브라우저가 웹 데이터를 연결, 요청 및 수신할 수 있도록 하는 일부 다른 기능과 함께 HTTP 프로토콜을 구현합니다. HTTP는 메시지, 웹 페이지, 이미지 및 리소스가 웹 서버와 브라우저 간에 "이동"하는 채널입니다.

현대 웹은 상당히 까다롭고 현대 웹 서버는 그 도전에 직면해 있습니다. 확장성과 보안은 오늘날 세계의 두 가지 주요 관심사입니다. 최신 웹 서버는 확장성이 뛰어나고(10,000개 이상의 동시 연결을 처리할 수 있음) 로드 밸런싱을 위한 여러 옵션을 제공하고 SSL/TLS 및 HTTP/2를 지원합니다. HTTP/1.1에 비해 HTTP/2의 주요 개선 사항은 의심할 여지 없이 우수한 패킷 스트리밍 관리입니다. 오늘날 비디오 스트리밍은 널리 퍼져 있으며 HTTP/1.1은 오늘날의 다양한 장치, 네트워크 용량 및 온라인 웹 사용자 수의 요구 사항을 적절하게 처리할 수 없습니다.

HTML (HyperText Markup Language)은 태그를 사용하여 웹 브라우저에서 이해할 수 있는 구조화된 하이퍼텍스트 문서를 나타내는 언어입니다.

최신 버전인 HTML5는 많은 언어 개선 및 정리를 도입했지만 가장 인상적인 추가 기능은 기본 비디오 및 오디오 지원, 2D 및 3D 그래픽, 로컬 데이터베이스 저장소였습니다. 이러한 개선 사항은 Flash 및 Silverlight와 같은 멀티미디어 기술을 효과적으로 구식으로 만들었습니다.

CSS (Cascading Style-sheets)는 웹 디자이너가 많은 웹 페이지에서 시각적인 변경을 쉽게 하기 위해 사용하는 기술입니다.

CSS 코드는 HTML 내에 상주하거나 일반적으로 HTML 페이지에서 참조하는 별도의 파일입니다. CSS의 유용성은 콘텐츠를 프레젠테이션과 분리하여 웹 디자이너에게 웹사이트의 모든 미적 세부 사항을 중앙에서 관리할 수 있는 강력한 도구를 제공한다는 것입니다.

백엔드 (예: PHP 또는 Java)는 HTML과 혼합된 코드로, 계산이 끝나면 웹 서버에서 실행됩니다.

오늘날 모든 웹사이트는 동적입니다. 브라우저에 더 이상 단순한 .html 파일이 제공되지 않는다는 의미입니다. 웹 프레임워크라는 소프트웨어 라이브러리가 추가된 모든 최신 언어는 웹 사이트의 백엔드 솔루션으로 사용할 수 있습니다. PHP 7의 최근 릴리스와 여기에 도입된 뛰어난 성능 개선 및 기능, Facebook의 HHVM은 모두 전체 프로세스를 다음 단계로 끌어 올렸습니다.

프론트엔드 (Javascript)도 HTML과 혼합된 코드이지만 웹 브라우저에 의해 컴퓨터에서 로컬로 실행됩니다.

아마도 현대 웹에서 가장 놀랍고 인상적인 개발은 Javascript일 것입니다. 메뉴를 만들고 팝업을 표시하는 데 사용되는 Java의 단순한 동생에서 클라이언트와 서버 모두에서 사용되는 강력한 프로그래밍 언어로 바뀌었습니다. 요즘에는 웹 브라우저에서 빠른 속도로 모든 작업을 수행할 수 있습니다. Google의 V8 Javascript 엔진은 주요 기술 게임 체인저였습니다.

URL을 방문하면 어떻게 됩니까?

웹은 서로 다른 기술의 풍요로움이지만 오늘날에도 기본 기능이 변하지 않은 두 가지 개념이 있습니다. 웹 브라우저와 웹 서버. 이들은 다음과 같은 "이전" 클라이언트/서버 모델에서 작동합니다. 클라이언트는 주소(IP 또는 이름)를 사용하여 서버에 연결하고 무언가를 요청합니다. 그런 다음 서버는 클라이언트 등에 응답합니다. 클라이언트는 서버에 연결하지만 그 반대는 아닙니다. 오늘날의 웹 기술은 이 모델을 크게 변경했지만 이를 사용하여 프로세스를 단순화된 방식으로 설명합니다.

따라서 즐겨 사용하는 브라우저를 실행하고 웹 페이지를 방문합니다. Enter 키를 누르는 순간부터 표시된 페이지가 표시될 때까지 다음과 같은 일이 발생합니다.

브라우저는 먼저 컴퓨터에 구성된 DNS 확인자라는 소프트웨어 모듈을 호출하고 입력한 URL에 해당하는 IP 주소를 요청합니다.
DNS(Domain Name System)는 www.pressidium.com 과 같은 컴퓨터 이름 을 IP 주소로 매핑하는 핵심 인터넷 서비스입니다. IP 주소는 인터넷에 연결된 컴퓨터가 이해하고 연결할 수 있는 것입니다. 다음 포스트에서 이것이 무엇이며 어떻게 작동하는지 살펴보겠습니다.
그런 다음 브라우저는 포트 80 또는 443을 사용하여 해당 IP 주소에 대한 연결을 시작합니다.
IP 주소는 서버를 나타내고 포트 번호는 연결하려는 서비스를 나타냅니다. 모든 웹 서버는 기본적으로 포트 80에서 실행되는 반면 포트 443은 보안 웹 연결에 사용됩니다.
웹 서버는 입력한 URL을 처리하고 백엔드에 제어를 제공합니다. 백엔드 코드는 HTML 페이지를 생성하고 웹 서버에 전달합니다. 그런 다음 웹 서버는 마지막으로 HTTP 채널을 통해 HTML 페이지를 브라우저로 보냅니다.
웹 서버가 HTML을 다시 보내는 데 걸리는 밀리초 안에 많은 일이 일어나고 있습니다. 웹 사이트의 백엔드 코드는 일반적으로 데이터베이스에 연결하고, 쿼리를 실행하고, 데이터를 다시 가져오고, 다른 백엔드 서비스에 연결하고 마지막으로 모든 것을 HTML 문서로 조합합니다. 요청하는 개별 파일이 아니라 동적 리소스입니다. , 다양한 기술과 구성 요소를 사용하여 즉석에서 생성됩니다.
웹 브라우저는 HTML 페이지를 수신하고 웹 서버에 대한 연결을 닫은 다음 화면에 렌더링합니다. HTML에 있는 Javascript 코드를 실행합니다. 모던 웹 디자인은 반응형 디자인이라는 접근 방식을 따릅니다. 이 접근 방식은 HTML, CSS 및 Javascript를 사용하여 탐색에 사용하는 장치에 따라 웹 페이지 레이아웃을 동적으로 조정합니다. 이것은 모바일 및 태블릿 장치의 폭발적인 성장과 함께 오늘날 매우 중요해졌습니다.

무엇 향후 계획?

지금까지 다양한 최신 웹 기술과 URL을 방문하면 어떻게 되는지 간략하게 살펴보았습니다. 의심할 여지 없이 웹 기술은 복잡하고 다양하며 한 기사에서 만족스럽게 다룰 수 없습니다. 이 포스트 시리즈를 통해 우리는 주로 인터넷과 웹에 대한 "독수리" 관점을 제공하는 것을 목표로 합니다.
이 흥미로운 시리즈의 다음 기사에서는 또 다른 중요한 인터넷 인프라인 도메인 이름 시스템(Domain Name System)을 살펴보겠습니다. 그것 없이는 아무 것도 작동하지 않을 것입니다! (적어도 우리 인간에게는).