how does the web work?

네트워크란?

• 두 대 이상의 컴퓨터가 상호간 통신을 위해 물리적인 방법(에더넷 케이블 등) 혹은 무선으로 연결된 것

라우터란?

• 라우터란 일종의 컴퓨터로 송신 컴퓨터에서 보낸 메시지가 수신 컴퓨터에 잘 도착하도록 보장하는 역할
• 10대의 컴퓨터가 있을 때 각각을 케이블로 연결해서 네트워크를 구성하려면 45개의 케이블이 필요하지만, 1대의 라우터에 각각의 컴퓨터를 연결해서 구성하면 10개의 케이블만으로도 충분하다!
• 라우터 또한 컴퓨터이기 때문에 이러한 라우터들끼리 케이블 연결해서 네트워크를 계속 확장할 수 있다
  https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work

인터넷이란?

• 인터넷이란 네트워크들의 네트워크를 가능케 하는 기술적인 인프라스트럭처를 의미한다
  <-> web : 인터넷이라는 인프라스트럭처를 기반으로 하는 서비스
• 라우터는 케이블을 필요로 하지만 이웃집이나 해외에 사는 친구의 집에 케이블로 직접 연결할 수는 없다
• 그렇다면 라우터와 컴퓨터로 구성된 우리의 네트워크를 어떻게 더욱 확장시킬 수 있을까?
  1. 이미 깔려있는 전화선을 이용해 외부 네트워크와 연결한다
     • 이때, 모뎀이라는 장치를 이용해 네트워크의 정보 디지털 신호와 전화선의 아날로그 신호를 서로 이해할 수 있도록 변환한다
  2. 연결에 성공했다면 이제 ISP의 도움을 받아 메시지를 전송한다
     • Internet Serivices Provider(이하 ISP)는 서로 연결되어 다른 ISP의 라우터에도 접근할 수 있는 특수한 라우터들을 관리한다
     • 즉, 나의 네트워크에서 전송한 메시지는 ISP 네트워크의 네트워크를 거쳐 목적지에 도착하는 것!

IP주소란?

• 네트워크에 연결된 컴퓨터가 갖는 고유한 주소를 의미한다
• 192.168.2.10과 같이 .으로 구분된 4개의 숫자로 이루어져 있다

DNS 요청이란?

• 하지만 실제로 사람들이 IP주소를 일일히 기억할수 없으로 보다 외우기 쉬운 Domain Name System(DNS)이 등장했다!
• www.google.com, www.naver.com 등이 바로 도메인 이름이다
• DNS 작동 과정
  1. velog.io를 검색창에 친다
  2. 브라우저가 운영 체제에 혹시 해당 도메인 이름에 해당하는 IP주소를 아는지 물어본다
  3 - 1. 안다면 도메인 네임을 IP주소로 변환해서 해당 주소에 찾아간다
  3 - 2. 모른다면 DNS 서버에 찾아가서 IP주소를 물어본다
  4. IP주소를 찾아서 해당 주소로 찾아간다
• https://www.youtube.com/watch?v=72snZctFFtA&t=45s 참고!

클라이언트란?

• 인터넷에 연결된 웹 사용자의 기기와, 해당 기기에서 웹으로의 접근을 가능케 하는 소프트웨어
• 개인용 노트북, 스마트폰 등

서버란?

• 웹 페이지, 사이트, 앱 등을 저장하는 컴퓨터

클라이언트와 서버 간 데이터 전송 과정

1. 클라이언트가 브라우저에 특정 웹 페이지 주소를 입력
2. 브라우저는 DNS 서버에 가서 도메인 이름에 대응되는 IP주소를 찾아옴
3. 브라우저가 IP주소를 이용해서 서버에 웹 페이지의 복사본을 보내달라는 HTTP 요청 메시지를 보내며, 해당 메시지를 포함해 클라이언트와 서버간 모든 데이터 전송은 TCP/IP를 이용해 이루어짐
   • Hyper Text Protocol(HTTP): 클라이언트와 서버간 통신을 위한 프로토콜
   • TCP(Transmission Control Protocol)/IP(Internet Protocol) : 인터넷에서 데이터를 어떻게 주고 받아야할지에 관한 프로토콜
4. 서버는 클라이언트의 요청 승인 시 '200 OK'메시지를 전송한 뒤, 웹 사이트의 파일들을 데이터 패킷이라는 작은 단위들의 형태로 전송
   • cf) 왜 패킷을 사용할까?
     • 전송 중 손상/손실되더라도 작은 단위만을 재전송하면 됨
     • 속도, 효율성 향상!
5. 브라우저는 패킷들을 다시 조합해 웹 페이지를 완성해서 클라이언트에게 전시

웹 페이지, 웹 서버, 웹 브라우저, 검색 엔진?

웹 페이지

• 웹 브라우저에서 볼 수 있는 문서

웹 사이트

• 동일한 도메인 네임을 공유하는 웹 페이지들의 모음

웹 브라우저

• 크롬, 사파리, 파이어폭스와 같이 웹 페이지를 전시하는 소프트웨어

웹 서버

• 인터넷에 웹 사이트를 호스팅하는 컴퓨터
  cf) 호스팅 : 해당 컴퓨터에서, 해당 웹 사이트의 모든 페이지들과 구성 파일들에 접근 가능함을 의미
• 하나의 웹 서버는 여러 개의 사이트를 호스팅할 수 있음
• 클라이언트의 요청 시 호스팅하고 있는 사이트의 페이지를 클라이언트의 브라우저에 전송

검색 엔진

• 구글, 네이버, 다음과 같이 다른 웹 페이지를 찾는 것을 도와주는 웹 사이트
• 웹브라우저(인프라스트럭처) <-> 검색엔진(서비스)

References

• https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work
• https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines
• https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works#clients_and_servers
• https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name#how_does_a_dns_request_work