본문 바로가기

Web

How the Web works

사용자가 크롬 주소창에 www.google.com을 치면 크롬은 구글 홈페이지를 띄운다. 컴퓨터에 홈페이지의 html 파일이 있는 것도 아닌데 어떻게 보여줄까? 

크롬이 구글 홈페이지의 html 파일을 가져오는 과정을 4단계로 보자면 아래와 같다.

출처 https://kripeshadwani.com/dns-records-explained/

1. 브라우저가 DNS 서버에 IP 주소를 찾기 위한 요청을 보낸다. 이 때 이 요청에 domain name이 담겨있다.

2. DNS 서버가 IP 주소를 찾아 응답한다.

3. 해당 IP 주소가 나타내는 웹 서버(호스트 서버)에 브라우저가 요청을 보낸다.

4. 브라우저는 호스트 서버의 응답을 받아 사용자에게 보여준다.

 

조금 더 자세히 보자면,

1. Send a request to the DNS Server

구글 홈페이지 html 파일은 구글 웹서버에서 가져와야 된다. 내 컴퓨터의 크롬(브라우저)이 구글 웹 서버가 어디 있는지 찾으려면 웹 서버의 IP 주소가 필요하다. IP는 '인터넷으로 통신하는' 각 device에 부여된 '고유한' 값이다. 단서는 주소창에 입력한 url에 있다.

www.google.com에는 구글의 domain name이 포함되어 있다(참고 링크). Domain은 문자로 된 고유 주소로, IP주소를 사람이 외워서 접속할 수 없기 때문에 만들어진 식별 문자열이다. 브라우저는 IP 주소를 알아내기 위해 이 domain name을 DNS 서버로 보낸다. DNS(domain name system)는 domain name을 IP 주소로 변환해 머신이 읽을 수 있도록 하는 시스템이다. 이렇게 브라우저가 domain name으로 IP 주소를 찾으려고 보내는 요청을 query라고 한다.

2. DNS Server returns a response

DNS 서버는 자신이 갖고 있거나 다른 DNS 서버들에게 물어 얻은(참고 링크) IP 주소를 클라이언트(브라우저)에게 응답한다. 이제 브라우저는 구글 웹 서버의 IP 주소를 알았다.

 

1, 2의 요청과 응답에서 쓰인 통신 형태는 Application Layer의 프로토콜 중 하나인 DNS이다.

네트워크 7계층 참고 링크

3. Send a request to the Web Server

브라우저가 구글 웹 서버(호스트 서버)에게 요청을 보낸다. 이 요청은 start line, headers, body 이렇게 세 부분으로 이루어져 있다. 

4. Web Server returns a response with files

응답을 통해 파일을 받았다. 이 응답은 status line, headers, body 이렇게 세 부분으로 이루어져 있다. 이제 사용자가 크롬에서 구글 홈페이지를 볼 수 있다.

 

 

3, 4의 요청과 응답에서 쓰인 통신 형태는 Application Layer의 프로토콜 중 하나인 HTTP이다.

 

프로토콜은 협약 통신 규약이고 HTTP는 컴퓨터들끼리 HTML 파일을 주고받을 수 있도록 하는 소통 방식 또는 약속이다. HTTP가 갖고 있는 성질 한 가지는 요청과 응답 쌍으로 이루어져있다는 것이다. 404도 서버와 통신할 수는 있었지만 요청한 바를 찾을 수 없다는, 응답의 일종이다. 만일 응답이 없으면 계속 로딩한다.

다른 성질 한 가지는 stateless이다. 얼굴을 가린 사람과 슉 해치운 밀거래처럼, 요청-응답 통신이 끝나면 웹 서버는 방금 누구한테 뭘 보낸지도 모른다. 이런 특성 때문에 연속된 처리가 필요한 경우를 위해 로그인 토큰, 브라우저의 쿠키, 웹 스토리지 등이 있는데, 개발자도구의 Application panel에 대해 공부하며 쓴 글에 이에 대한 내용이 좀 있다(참고 링크).

 

HTTP는 웹개발자와 관련이 깊은 프로토콜이다. 이 서버단에 들어있는 걸 만들고 배포까지 해두어야 비로소 웹상의 홈페이지가 된다.

배포(deploy)란 파일을 호스트 서버에 올려 인터넷상에 공개하고, 사람들이 접근해서 볼 수 있게 하는 것이다. 홈페이지의 구성 파일들이 인터넷에 '항상' 연결되고, '절대' 꺼지지 않는 호스트 컴퓨터(웹 서버)에 저장되어 있다가 사용자의 요청이 오면 언제든 응답한다.

이렇게 배포할 수 있도록 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 걸 호스팅이라 하는데, 이런 서비스의 예시로는 AWS EC2가 있다.

 

아래 더보기는 HTTP 관련 메모. 직접 좀 해보면서 예시로 쓸 코드가 있을 때 HTTP에 대한 글을 따로 써야겠다.

더보기

get, delete는 body내용을 담지 않음

restful api의 엄격한 규칙으로는 url에다 id=30 이런 식으로 담음

 

데이터를 가져오는 건 무조건 get

단순 조회로는 post를 쓰지 않음.

수정할 때, 전송을 위해서는 post

 

get, post 섞어쓰는건 비추

각 method의 정의와 동작을 알고 생각하기.

 

요청,응답 보는 도구

윈도우에서는 postman

맥, 우분투에서는 http

'Web' 카테고리의 다른 글

RESTful API  (0) 2021.03.01
Style We 프로젝트 이미지 2  (0) 2021.02.24
Style We 프로젝트 이미지 1  (0) 2021.02.24
Auth  (0) 2021.02.08
개발자 도구 - Application panel  (0) 2021.01.15