웹의 동작 방식

이 이론은 단기적으로 봤을 때 웹 코드를 작성하기 위해 필수적인 것은 아니지만, 머지 않아 백그라운드에서 발생하는 것을 이해하는 것으로부터 오는 장점을 얻게 될 것입니다.

클라이언트와 서버

웹에 연결된 컴퓨터는 클라이언트 와 서버 라고 합니다. 그들이 어떻게 상호작용하는가에 대한 간소화된 다이어그램은 다음과 같습니다:

• 클라이언트는 일반적인 웹 사용자의 인터넷이 연결된 장치들 (예를 들어, 여러분의 컴퓨터는 WI-FI에 연결되어 있고, 또는 여러분의 폰은 모바일 네트워크에 연결되어 있습니다) 과 이런 장치들에서 이용가능한 웹에 접근하는 소프트웨어 (일반적으로 파이어폭스 또는 크롬 과 같은 웹 브라우저) 입니다.
• 서버는 웹페이지, 사이트, 또는 앱을 저장하는 컴퓨터입니다. 클라이언트의 장비가 웹페이지에 접근하길 원할 때, 서버로부터 클라이언트의 장치로 사용자의 웹 브라우저에서 보여지기 위한 웹페이지의 사본이 다운로드 됩니다.

도구 상자의 다른 부분들

위에서 설명한 클라이언트와 서버는 모든 내용을 알려주진 않습니다. 많은 다른 부분들이 포함되어 있고, 아래에서 그것들에 대해 설명할 것입니다.

지금은, 웹이 도로라고 상상해봅시다. 도로의 한 쪽 끝은 여러분의 집 같은 클라이언트 입니다. 다른 한 쪽 끝은 여러분이 뭔가를 사길 원하는 상점같은 서버입니다.

게다가 클라이언트와 서버에대해, 우리는 또한 인사할 필요가 있습니다:

• 인터넷 연결: 여러분이 웹에서 데이터를 보내고 받을 수 있게 해줍니다. 기본적으로 여러분의 집과 상점 사이의 거리와 같습니다.
• TCP/IP: Transmission Control Protocol (전송 제어 규약) 과 Internet Protocol (인터넷 규약) 은 데이터가 어떻게 웹을 건너 여행해야 하는지 정의하는 통신 규약입니다. 이것은 주문을 하고, 상점에 가고, 또 여러분의 상품을 살 수 있게 해주는 운송 장치와 같습니다. 우리 예시에서, 이것은 차 또는 자전거 (또는 여러분의 두 다리) 와 같습니다.
• DNS: Domain Name System Servers (도메인 이름 시스템 서버) 는 웹사이트를 위한 주소록과 같습니다. 여러분이 브라우저에 웹 주소를 입력할 때, 브라우저는 그 웹사이트를 검색하기 전에 DNS 를 살펴봅니다. 브라우저는 HTTP 메시지를 올바른 장소로 전송하기 위해 그 웹사이트가 있는 서버가 어떤것인지 찾아야 합니다 (아래를 보세요). 이것은 여려분이 접근하기 위해 상점의 주소를 찾아보는 것과 같습니다.
• HTTP: Hypertext Transfer Protocol (하이퍼텍스트 전송 규약) 은 클라이언트와 서버가 서로 통신할 수 있게 하기 위한 언어를 정의하는 어플리케이션 규약 입니다. 이것은 여러분의 상품을 주문하기 위해 여러분이 사용하는 언어와 같습니다.
• 컴포넌트 파일: 한 웹사이트는 여러분이 상점에서 사는 다양한 종류의 상품들과 같이 많은 다른 파일들로 만들어집니다. 이 파일들은 두개의 주요한 타입이 있습니다:
  • 코드 파일: 다른 기술들도 잠시 뒤 보게 되실것이지만, 웹사이트는 근본적으로 HTML, CSS, 그리고 JavaScript 로 생성됩니다.
  • 자원: 이것은 이미지, 음악, 비디오, 단어 문서, 그리고 PDF 같은, 웹사이트를 만드는 모든 다른 것들을 위한 공동적인 이름입니다.

그래서 정확히 무슨일이 발생할까요?

여러분이 브라우저에 웹 주소를 입력할 때 (우리의 비유에서 상점으로 걸어가는 것과 유사합니다):

1. 브라우저는 DNS 서버로 가서 웹사이트가 있는 서버의 진짜 주소를 찾습니다 (여러분이 상점의 주소를 찾습니다).
2. 브라우저는 HTTP 요청 메시지를 웹사이트의 사본을 클라이언트에게 보내기 위한 요청을 하고 있는 서버로 전송합니다 (상점으로 가서 상품을 주문합니다). 이 메시지, 그리고 클라이언트와 서버 사이에 보내진 모든 다른 데이터, 는 TCP/IP 를 사용한 인터넷 연결을 건너서 보내집니다.
3. 제공된 서버는 클라이언트의 요청을 승인하고, 서버는"물론 당신은 그 웹사이트를 볼 수 있습니다! 여기 있어요!" 라는 의미의 "200 OK" 메시지를 클라이언트에게 보냅니다. 그리고나서 웹사이트의 파일들을 데이터 패킷이라는 작은 덩어리들의 세트로써 브라우저에게 보내기 시작합니다 (상점은 여러분에게 상품을 주고, 여러분은 그것을 여러분의 집으로 가져옵니다).
4. 브라우저는 작은 덩어리들을 완전한 웹사이트로 모으고 여러분에게 보여줍니다 (상품이 여러분의 문에 도착합니다 — 새 것이죠, 멋져요!).

DNS 설명

실제 웹 주소는 멋지거나, 여러분이 선호하는 웹사이트를 찾기위한 주소 막대에 입력하는 기억할만한 문자가 아닙니다. 그것은 숫자들의 문자열입니다, 이렇게요: 63.245.217.105.

이것은 IP 주소라고 하고, 웹의 하나뿐인 특정 위치를 나타냅니다. 그런데, 기억하기 아주 쉽진 않습니다, 그렇죠? 그것이 도메인 이름 서버가 발명된 이유입니다. 도메인 이름 서버는 여러분이 브라우저에 입력하는 웹주소 ("mozilla.org" 같은) 를 웹사이트의 실제 (IP) 주소에 맞춰주는 특별한 서버입니다. 

웹사이트는 그들의 IP 주소를 통해 직접 접근될 수도 있습니다. 새 브라우저 탭의 주소막대에  63.245.217.105 를 입력하는것으로 모질라 웹사이트에 가보세요.

패킷 설명

앞서 우리는 서버에서 클라이언트로 보재니는 데이터의 포맷을 설명하기 위해 "패킷" 이라는 용어를 사용했습니다. What do we mean here? 기본적으로, 웹을 건너서 데이터가 보내질 때, 많은 다양한 웹 사용자가 동시에 같은 웹사이트를 다운로드 할 수 있도록 데이터는 수천개의 작은 덩어리로써 보내집니다. 만약 웹 사이트가 하나의 큰 덩어리로써 보내진다면, 한번에 한 사용자만 다운로드 할 수 있을 것입니다. 이것은 웹을 매우 비효율적이고 사용하기에 재미도 없게 만들 것입니다.

여기도 보세요

• 인터넷 작동 방식
• HTTP — 어플리케이션-계층 규약
• HTTP: Let’s GET It On!
• HTTP: 응답 코드

크레딧

거리 사진: Street composing, by Kevin D.