Website는 어떻게 보여지게되는 걸까? — ( 1 )
웹페이지가 브라우저에게 전달되는 과정을 정리해 보고자 합니다.
들어가기전에
- 브라우저가 필요한가?
- 브라우저에게 어떻게 문서가 전달될까?
- 브라우저는 서버에게 어떻게 데이터를 받아올까?
- 조금더 생각해볼점 Keep-Alive
- 추가적으로 공부해 볼 부분
1. 브라우저가 필요가?
특정 웹 사이트에 접근한다고 생각해보겠습니다.
- 사용자가 브라우저를 실행합니다.
- 접속하고 싶은 사이트의 url를 주소창에 입력합니다.
- 브라우저는 입력된 url의 서버에게 사이트 정보를 받아와 이를 화면에 표현합니다.
- 표현된 정보를 사용자가 활용합니다.
이처럼 브라우저는 서버에서 데이터를 받아 표현하는 역할을 담당하고 있습니다.
만약 웹 브라우저가 없다면 터미널에서 curl으로 데이터를 받아 텍스트로 표현해 줄 수 있습니다. 혹시나 웹브라우저가 없다면 terminal에서 wget 명령어를 이용하여 웹브라우저 설치 파일을 다운로드 받을 수 있습니다.
위 그림과 같이 브라우저는 받아온 정보를 화면에 표현하는 역할을 담당합니다. 그렇다면 어떻게 브라우저에게 문서가 전달 될 수 있을까요?
2. 브라우저에게 어떻게 문서가 전달될까?
해당 내용을 알기 위해서는 http 프로토콜과 네트워크에 대해서 알아야합니다.
HTTP는 Hypertext Transfer Protocol의 약자로 인터넷상에서 데이터를 주고받기 위한 프로토콜(약속)입니다. 데이터는 오디오 / 비디오 / 이미지 / 텍스트 등 어떠한 데이터의 종류를 가리지 않고 모두 HTTP 프로토콜을 이용해 전달하고 전달 받을 수 있습니다. 브라우저는 http 통신을 통해서 사이트 문서를 가져오고 이를 해석해 화면에 출력하게 됩니다.
이때 TCP/IP 계층의 순서로 네트워크에 접근하게 되는데, HTTP 프로토콜은 4계층은 Application 계층에 속해 있습니다. 4계층에서 정보를 만들어 전달하면 Transport 3계층에서 통신 노드를 연결하고, Internet 2계층에서 통신노드간 패킷을 전송과 라우팅하고, Network Interface 1계층에서 전기적 신호로 변환하여 실제로 전달합니다. 받는 쪽에서는 반대로 해석합니다.
모든 컴퓨터와 서버는 네트워크를 통해 외부에서 접근하려면, ip주소가 필요합니다. 하지만 사용자는 브라우저를 이용해 문자 url을 전달합니다. 때문에 이를 해석하기위해 DNS 서버로 접근하여 해당 도메인 네임에 맞는 ip를 받아옵니다. 받은 ip를 가지고 한번에 서버에 접근할수 없으며, ip를 알고있는 다른 서버에 접근하면서 경유하여 접근하게 됩니다. 해당 과정은 네트워크 과정을 통해서 더 자세히 배울 수 있습니다.
3. 브라우저는 서버에게 어떻게 데이터를 받아올까?
다시 HTTP 프로토콜로 돌아와서 브라우저는 서버에게 웹사이트 문서를 받아오기위해 클라이언트에서 Request 요청을 만들어 서버에게 전달합니다. 서버는 클라이언의 Request를 해석하고, 요청에 해당하는 Response를 전달하게 됩니다. 클라이언트 에서는 서버에서 전달해준 Response를 이용해 화면에 표현하게 됩니다.
HTTP 프로토콜의 데이터 형식은 크게 HEADER와 BODY로 구성되어 있습니다. HEADER에는 서버가 인식할 수 있는 약속된 형식을 따라야합니다.
Request
GET / HTTP/1.1 : HTTP전송 방법과 프로토콜 버전
Host: 요청하는 서버 주소
User-Agent: OS/브라우저 정보
Accept: 클라이언트 이해 가능한 컨텐츠 타입
Accept-Language: 클라이언트 인식 언어
Accept-Encoding: 클라이언트 인코딩 방법
Connection: 전송 완료후 접속 유지 정보 (keep-alive)
Upgrade-Insecure-Requests:신호를 보낼때 데이터 암호화 여부
Content-Type: 클라이언트에게 반환되어야하는 컨텐츠 유형
Content-Length: 본문크기
해당 형식으로 표현된 데이터를 전달하면 서버에서는 해당 형식을 해석하고 Response를 전달한다.
Response
HTTP/1.1 200 ok : 프로토콜 버전과 응답상태
Access-Control-Allow-Origin: 서버에 타 사이트의 접근을 제한하는 방침
Connection: 전송 완료후 접속 유지 정보 (keep-alive)
Content-Encoding: 미디어 타입을 압축한 방법
Date: 헤더가 만들어진 시간
ETag: 버전의 리소스를 식별하는 식별자
Keep-Alive: 연결에대한 타임아웃과 요청 최대 개수 정보
Last-Modified: 웹 시간을 가지고 있다 수정되었을때만 데이터 변경 ( 캐시연관 )
Server: 웹서버로 사용되는 프로그램 이름
Set-Cookie: 쿠키 정보
Transfer-Encoding: 인코딩 형식 지정
X-Frame-Options: frame/iframe/object 허용 여부
Body값에는 보통 HTML 문서정보가 포함됩니다.
<!DOCTYPE html>
<head></head>
<body></body>
</html>
Response 정보를 확인하고 브라우저는 정보에 맞게 표현하게 됩니다.
콘솔에서 해당 정보를 확인해 볼수 있습니다.
4. 더 생각해볼점
브라우저에서 서버에게 문서를 요청을하면 일정 연결과정을 거친후 문서를 다운로드 받습니다. 문서의 다운로드가 모두 완료되면, 순서에 따라 JS와 CSS, Image 등의 파일을 다시 서버에게 요청하여 다운로드 받기 시작합니다. 하지만 앞서 이루어졌던 연결 작업을 매 파일을 다운로드 할때마다, 반복하자면 오랜 시간이 걸리게 됩니다. 하여 HTTP/1.1부터는 Keep-alive를 지원하게됩니다.
Keep-alive란 문서전달 후 클라이언트의 연결을 바로 끊어버리지 않고, 일정시간 동안 연결을 유지하며, 재 연결 과정 없이 데이터를 전달 할 수 있게 됩니다. 서버의 재 연결 요청이 없어지므로 조금 더 빠른 다운로드를 받을수 있게 됩니다. Keep-alive는 브라우저가 요청할때 Header값에 포함되어 전달됩니다. 서버가 준비가 되어있다면, 바로 적용할 수 있습니다.
5. 추가적으로 공부해 볼 부분
Front-end 개발자라면 네트워크 영역은 필수적으로 공부해야 한다고 생각합니다. 네트워크 영역의 이해가 있어야지 CORS(크로스 도메인 이슈)가 발생되는 원인, User-Agent로 디바이스를 판단하는 방법 등등 다양한 시선에서 만들고 있는 웹페이지를 바라볼 수 있는 관점이 생길 수 있다고 생각합니다. 앞으로 실시간으로 통신이 빈번하게 일어나는 WebPage나 WebApplication이 많이 생길것 같습니다. 이에 발 맞춰 앞으로 HTTP/2.0이 많이 쓰여질 만큼 HTTP/2.0을 미리미리 준비해야 하겠습니다. 서버도 조금씩 경험해보며 역량을 넓혀 나가야겠습니다.
