항해99 사전스터디 1주차_웹_동작원리

 

클라이언트와 서버

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

• 클라이언트는 일반적인 웹 사용자의 인터넷이 연결된 장치들 (예를 들어, 여러분의 컴퓨터는 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" 메세지를 클라이언트에게 전송합니다. "200 OK"는 "물론이죠. 당신은 웹 사이트를 볼 수 있어요! 여기 있어요" 라는 의미입니다. 그 다음 서버는 웹사이트의 파일들을 데이터 패킷이라 불리는 작은 일련의 덩어리들로 브라우저에 전송하기 시작합니다.(상점은 여러분이 주문한 상품을 전달하고, 여러분은 그것을 집으로 가져갑니다.)
4. 브라우저는 이 작은 덩어리들을 완전한 웹 사이트로 조립하고, 당신에게 보여줍니다. (상품이 당신의 문에 도착합니다. — 새 것이죠, 멋져요!)

DNS 설명

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

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

웹사이트는 그들의 IP 주소를 통해 직접 접근될 수도 있습니다. 여러분은 IP Checker와 같은 도구에 도메인을 입력해 IP 주소를 찾을 수 있습니다.

 

-----------------------------------------------------------------------------------------------------------------------------------

프로토콜(protocol)

프로토콜(protocol)이란 컴퓨터끼리 정보를 주고받기 위한 일종의 규칙이나 약속을 의미합니다.

우리가 보통 다른 사람과 대화하려고 할 때는 사용할 언어나 장치 등을 서로 일치시켜야만 원할한 대화를 할 수 있습니다.

이와 마찬가지로 컴퓨터끼리도 정보를 교환할 때 데이터의 형식이나 통신 순서 등을 미리 일치시켜야만 통신이 가능합니다.

이렇게 컴퓨터 사이의 통신에서 정보를 교환하기 위해 미리 만들어 둔 네트워크 통신 규약을 프로토콜이라고 부릅니다.

 

대표적인 프로토콜에는 인터넷에서 사용되는 TCP(Transmission Control Protocol)와 IP(Internet Protocol), 웹에서 사용되는 HTTP(HyperText Transfer Protocol), 파일을 주고 받을 때 사용되는 FTP(File Transfer Protocol) 등이 있습니다.

---

인터넷 주소

인터넷 상에서 특정 컴퓨터나 서버를 찾기 위해서는 다음 두 가지 타입의 주소 중 하나를 알고 있어야만 합니다.

 

1. IP 주소(Internet Protocol address)

2. 도메인 네임(Domain Name)

 

정확히 말해 인터넷 주소는 IP 주소만을 의미하며, 도메인 네임은 DNS 서버에서 IP 주소로 자동 변환됩니다.

---

IP 주소(Internet Protocol address)

인터넷 상에는 수많은 컴퓨터와 서버들이 무수히 많이 연결되어 있습니다.

이렇게 많은 컴퓨터들이 인터넷 상에서 서로를 인식하기 위해 지정받은 식별용 번호가 바로 IP 주소입니다.

현재 사용되고 있는 IP 주소 체계는 IPv4(IP 버전4)로 0부터 255까지의 십진수 네 개를 점(.)으로 구분하여 사용합니다.

32비트의 주소 체계인 IPv4는 이론상 약 43억 개의 IP 주소를 나타낼 수 있지만, 인터넷의 급격한 발달에 따라 IP 주소가 부족해지는 현상이 발생합니다.

따라서 이에 대한 해결책으로 고안된 128비트의 주소 체계인 IPv6(IP 버전6)의 사용이 점점 증가되고 있는 추세입니다.

 

현재는 IPv4와 IPv6의 주소 체계가 같이 사용되고 있습니다.

---

도메인 네임(Domain Name)

IP 주소는 '202.179.177.22'처럼 0부터 255까지의 십진수 네 개로 구성되기 때문에 사람이 외우기가 매우 어렵습니다.

이처럼 외우기 어려운 숫자 형태의 IP 주소를 사람이 기억하기 쉬운 문자 형태로 표현한 주소를 도메인 네임(Domain Name)이라고 합니다.

 

도메인 네임은 'naver.com'처럼 몇 개의 의미있는 문자들과 점(.)의 조합으로 구성됩니다.

이러한 도메인 네임은 네트워크 상에서 각각의 컴퓨터를 식별할 수 있게 해주는 호스트명이 됩니다.

---

도메인 네임 시스템(Domain Name System, DNS)

도메인 네임은 오로지 사람이 외우기 쉽도록 만든 주소로 컴퓨터는 사실 그 의미를 이해할 수 없습니다.

따라서 도메인 네임을 실제 IP 주소로 변경해 주어야만 컴퓨터가 목적지를 제대로 찾아갈 수 있습니다.

 

이때 사용할 수 있도록 미리 도메인 네임과 함께 거기에 해당하는 IP 주소값을 한 쌍으로 저장하고 있는 데이터베이스를 DNS라고 부르며, 이 변환 과정은 네트워크 내부에서 자동으로 수행됩니다.

웹의 동작 원리

다음은 여러분이 웹 브라우저를 통해 웹 사이트에 접속하여 원하는 웹 페이지를 가져오는 과정을 도식화한 그림입니다.

 

 

①② 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력함.

③ 사용자가 입력한 URL 주소 중에서 도메인 네임(domain name) 부분을 DNS 서버에서 검색함.

④ DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달함.

 

⑤⑥ 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메시지를 생성함.

이렇게 생성된 HTTP 요청 메시지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 해당 IP 주소의 컴퓨터로 전송됨.

 

⑦ 이렇게 도착한 HTTP 요청 메시지는 HTTP 프로토콜을 사용하여 웹 페이지 URL 정보로 변환됨.

⑧ 웹 서버는 도착한 웹 페이지 URL 정보에 해당하는 데이터를 검색함.

 

⑨⑩ 검색된 웹 페이지 데이터는 또 다시 HTTP 프로토콜을 사용하여 HTTP 응답 메시지를 생성함.

이렇게 생성된 HTTP 응답 메시지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 원래 컴퓨터로 전송됨.

 

⑪ 도착한 HTTP 응답 메시지는 HTTP 프로토콜을 사용하여 웹 페이지 데이터로 변환됨.

⑫ 변환된 웹 페이지 데이터는 웹 브라우저에 의해 출력되어 사용자가 볼 수 있게 됨.

 

웹 동작원리 출처 TCP_School

http://tcpschool.com/webbasic/works

코딩교육 티씨피스쿨

웹 동작원리 출처 MDN

https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works

웹의 동작 방식 - Web 개발 학습하기 | MDN

 

같이보면 좋은 글

HTML 기본

https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics

CSS기초

https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics