What is the Web?

What is the Web?

World Wide Web은 인터넷을 기반으로 한 정보 체계이고, 이러한 정보를 서버로부터 받아와서 우리의 컴퓨터에 잘 보이도록 돕는 것이 크롬, 사파리, 파이어폭스 등과 같은 웹 브라우저 프로그램이다. 이 때 정보를 주고 받기 위해 웹에서 사용되는 커뮤니케이션 규칙을 HTTP(Hyper-Text Transfer Protocol)라고 부른다.

우리가 웹 브라우저를 통해 요청하는 정보는 documents(문서)가 될 수도 있고, 사진, 음악, 동영상 등과 같은 resources가 될 수도 있다. 무엇을 원하든지 간에, 우리는 주소창에 URL(Uniform Resource Locator)을 입력함으로써 원하는 정보를 요청한다. 서버는 url을 분석한 뒤에, 해당하는 정보를 전송해 주거나, 해당하는 정보가 없다는 오류 발생 페이지를 보내줄 수 있다. 

 

브라우저의 주소 창에 "google.com" 이라는 URL을 검색하는 상황을 예로 들어보자. 

client, isp, server

 

1. 우리의 컴퓨터나 모바일의 브라우저에서 google.com을 검색한다
2. 브라우저는 우리가 입력한 정보 "google.com"을 ISP에게 전달하고, ISP는 "google.com"을 DNS 서버에 전달한다.
   • ISP는 인터넷 서비스 제공업체를 말한다. 한국의 kt, lg 등이 여기에 해당된다. 예를 들어 집에 설치되어 있는 와이파이 공유기를 통해, 우리의 요청이 isp에 닿는다. 
   • DNS 서버는 우리가 입력한 웹 사이트의 주소(google.com)를 해당하는 IP 주소로 반환해 준다. 
3. DNS 서버는 전달 받은 "google.com"을 IP주소로 반환한 뒤, ISP를 거쳐 우리 브라우저에 되돌려준다.
   • IP는 주소(address) 정보를 포함하고 있다. IP 주소는 모든 컴퓨터가 가지고 있는 고유한 주소를 말한다. 위의 예시에서는 google 서버 컴퓨터의 IP 주소를 반환해 준다. 
   • IP 주소가 반환되면, 요청 받은 데이터를 전달해야 한다. 데이터의 전송과 관련된 프로토콜(규칙)을 정의한 것이 TCP이다. 
   • TCP와 IP는 거의 함께 이용되기 때문에 TCP/IP라는 용어로 사용된다. 
4. 브라우저는 전달받은 IP주소에 해당하는 서버 컴퓨터, 즉 구글 서버 컴퓨터에 직접 웹 페이지 정보를 요청한다. 한국에서 구글 서버에 웹 페이지 정보를 요청하면, 해저에 설치되어있는 인터넷 wire를 통해 우리의 요청이 이동한다. 
5. 서버 컴퓨터에 우리의 요청이 도착하면, 서버는 그 요청에 맞는 응답을 되돌려준다. 이 때에도 바닷속 wire를 통해 정보가 이동한다. 
6. 웹 브라우저에 구글 홈페이지가 보여진다. 
7. 이 모든 일들이 millie-seconds 단위로 이루어진다. 

Request and Response

앞서 살펴보았듯이 웹 브라우저에서 클라이언트는 URL을 이용해 정보를 요청한다. 이 때 서버는 해당 URL에 어떤 정보로 응답하게되는데, 이 정보는 브라우저에게 어떤 지침(Instruction)을 내리는 코드를 말한다. 다시 브라우저는 이 코드를 우리가 볼 수 있도록 렌더링하는 역할을 한다. 

• Front-End vs. Back-End
  • Back-End | 특정 URL에 어떤 HTTP Response로 응답할 것인지를 결정하기 위해 실행되는 코드를 작성한다. 이 때 사용자의 상태(로그인 되어있는지, 권한이 있는 사용자인지 등)를 확인하기도 한다. 어떤 응답을 할 것인지  결정했다면, 이 응답을 html, css, js 파일의 형태로 브라우저에게 보내는 일을 한다. 브라우저는 바로 이 파일들을 렌더링한다. 
  • Front-End | 브라우저가 사용자에게 웹 페이지를 보여주기 위해 렌더링하는 html, css, js를 작성한다. 

 

크롬에서 마우스 우클릭>리소스 보기를 통해 서버가 보낸 기본 리소스를 확인할 수 있다(좌) 브라우저가 렌더링한 페이지(우)

HTML, CSS, JavaScript

• HTML | 웹 브라우저가 보여주는 모든 웹 페이지의 파일 형식으로, 해당 웹 페이지가 어떤 정보를 담고있는지 구조적으로 설명한다. 
• CSS | HTML에 작성된 요소(정보)에 스타일을 입힌다. 
• JavaScript | HTML에 작성된 요소에 사용자와 상호작용할 수 있도록 하는 기능을 구현한다.

 

 

참고자료

Udemy Colt Stele - Web develpment Bootcamp

Udemy Angela Yu - Web development Bootcamp