What You Will Learn

• 웹이 어떻게 동작하는지 기본적으로 설명할 수 있다.
• 배포, 호스팅, ip주소, 서버, url, 프론트, 백앤드 등의 용어를 명확히 이해한다.

웹은 어떻게 동작하는가?

부제: 브라우저에 url을 치면 일어나는 일들

웹에 적속하면 어떤일들이 일어나는지 구체적으로 설명하라는 면접 질문도 많이나온다.

• 사용자가 브라우저에 url을 치면 브라우저가 서버에 요청을 해서 서버가 응답을 해준다.
  • 브라우저에 www.wecode.co.kr 를 치면 wecode 서버에 요청을 하게된다.
  • wecode서버가 응답을 하면 그 컨텐츠를 브라우저에 보여주게 되는것이다.

Hosting (호스팅, Web hosting service)
인터넷에 띄운다는 것은 홈페이지의 구성파일들이(html, css, js) 인터넷에 "항상" 연결되고, "절대" 꺼지지 않는 호스트 컴퓨터(웹 서버)에 저장되어 있다가 사용자의 요청이 오면 언제든지 응답하는 것
서비스 예) AWS ec2/S3, cafe24 호스팅 센터 등

• 사용자가 언제 어디서 하게될지 모른다. 즉, 요청이 언제 올지 모르다보니 서버는 24시간 켜져있다. (서버는 거대한 컴퓨터라고 생각하면 좋다. 물론 개인컴퓨터도 가능하다.) 그 안에 브라우저에 컨텐츠를 보여줄 수 있는 html, css, js 파일이 들어있다.

• 절대 꺼지지 않는 컴퓨터의 일부를 빌려서 우리에게 빌려주고 사용할 수 있게 하는게 호스팅 이다.

• 그리고 이런 서버를 호스트 서버라고 한다.

• HTML: 웹사이트 구조 / CSS: 스타일링 / JavaScript: interaction

• 그런데 www.wecode.co.kr 을 치면 이 url이 특정서버에 접속을 하게될까?

  • 그건 IP 때문이다.

    IP (Internet Protocol)
    iP 주소는 Internet을 통신하는 각 device(컴퓨터, 통신장비)에 부여된 고유한 값.
    
    
    스마트폰이나 노트북부터 대규모 소매 웹 사이트의 콘텐츠를 서비스하는 서버에 이르기까지 인터넷의 모든 컴퓨터는 숫자를 사용하여 서로를 찾고 통신하며, 이러한 숫자를 IP 주소라고 한다.
    
    
    172.16.254.1 : IPv4 - 이 주소는 가득하서 이제 IPv6로 넘어가고 있다.

    Domain (Domain name)
    문자(string)으로 된 고유 주소, 수많은 IP 주소를 사람이 외워서 접속할 수 없기 때문에 기억하기 쉽다.
    ex) www.wecode.com, www.google.com
    도메인 이름은 사야된다.

  • https://www.wecode.co.kr:8000/products?category=clothes

    • https : protocol
    • www : subdomain
    • wecode : domain
    • co.kr : top lovel domain (tld)
    • :8000 : port (개발할때는 보통 쓰고 사용한다. 기본포트가 80이다. 생략가능하다. 여기까지는 base url이라고 한다.
    • /뒤에 있는 products : path
    • ?category=clothes : query string(a.k.a parameter)

    DNS (Domain Name System)
    DNS 또는 Domain Name System은 사람이 읽을 수 있는 도메인 이름을 머신이 읽을 수 있는 IP 주소로 변환한다.
    
    
    DNS는 이름과 숫자간의 매핑을 관리하여 마치 전화번호부와 같은 기능을 한다. DNS 서버는 이름에 대한 요청을 IP 주소로 변환하여 최종 사용자가 도메인 이름을 웹 브라우저에 입력할 때 해당 사용자를 어떤 서버에 연결할 것인지를 제어. 이 요청을 쿼리라고 부른다.
    
    
    서비스 예) Amazon Route 53, Cafe24 도메인관리, 가비아 네임서버 관리
    
    
    DNS 서버란 도메인과 서버를 연결해주는 중간 서버로, 도메인 이름을 인터넷상의 주소 (IP 주소)로 변환시켜 원하는 컴퓨터를 찾아갈 수 있도록 한다.

• 사용자가 브라우저를 열고 주소를 적으면 DNS Server로 가서 어떤 IP 주소일까 확인한다. 그리고 그걸 브라우저가 반환받으면 그 IP주소를 기억하고 있다가 요청할 때마다, 해당 타켓서버로 요청을 보내서 응답받게된다.

• 이게 브라우저에 주소를 쳤을 때, 일어나는 최소한의 개념이다.

• 사용자가 브라우저를 띄워서 url을 치면 이 도메인을 IP주소를 바꿔줄 수 있는 DNS 서버를 중간에 거쳐서, DNS 서버가 이 도메인에 매칭되는 IP주소를 브라우저에게 넘겨준다. 브라우저는 이 IP를 갖고있다가 그 IP주소로 타겟호스트서버로 가서 최종적으로 html, css, js를 응답받아서 브라우저에 띄워주는 것이다.

배포 (번외)
배포(deploy)한다. 디플로이한다. 라는 말을 앞으로 자주 하고, 듣게 될 것. 배포란, 그동안 개발하던 것을 세상(인터넷상)에 드디어 공개하고 모든 사람들이 접근해서 볼 수 있게 하는 것을 의미한다. 호스트 서버에 올린다는 것이다. 내 컴퓨터에서 작업을 하다가 파일들을 호스트 서버에 업로드를 하면 이제 모든 사람들이 볼 수 있게 된다.

• 참고로 IP주소를 입력하면 해당 서비스를 응답받을 수 있다. 그때는 DNS 서버를 거치지않고 바로 타겟서버로 가게된다.

이후에 알아봐야할 추가 개념들

• CSR / Static Website / SSR / Single page application
• IP, DNS, DOMAIN, HOSTING + 네트워크 7계층 등

이후에 봐야할 참조 자료들
TIL no.97 - WEB - 3 - How Browsers Work
What Is DNS? | How DNS Works
인터넷이 동작하는 아주 구체적인 원리
How the web works?