[네트워크] 브라우저 주소창에 URL을 입력 시 일어나는 일 정리 (DNS)
📌 웹 브라우저 주소창에 www.google.co.kr 을 입력하면 어떤 일이 일어나나요?
개발 직무 면접 시 자주 등장하는 질문입니다.
이는 웹 사이트가 사용자에게 보이기까지의 네트워크 과정을 알고 있는지
확인하는 질문입니다.
이 과정에서 웹 브라우저, PC의 운영 체제, 인터넷 서비스 제공업체,
웹 사이트를 호스팅 하는 서버, 해당 서버에서 실행되는 서비스에 대한 지식 등이 약간씩 필요합니다.
이 지식을 통해 웹 사이트 성능 문제의 위치를 파악하고 사용자에게 안전한 경험을
제공하고 있는지 확인하는 것이 중요합니다. 😎
📝요약 미리보기
1. 웹 브라우저에 URL을 입력하고 Enter 키를 누릅니다.
2. 웹 브라우저가 도메인의 IP 주소를 조회합니다. (먼저 캐시를 찾고, 그다음 DNS를 검색합니다.)
3. 웹 브라우저가 찾은 IP 주소를 기반으로 서버와의 TCP 연결을 시작합니다.
4. 웹 브라우저가 HTTP 요청을 서버로 전송합니다. (필요한 경우, HTTPS 보안 통신이 진행됩니다.)
5. 웹 서버가 요청을 처리하고 응답을 다시 웹 브라우저로 전송합니다.
6. 웹 브라우저가 전송 받은 콘텐츠를 렌더링합니다.
📝1. URL 입력 및 구조
⦁ 통신규약 (Protocol)
✔ https:// 는 통신 프로토콜입니다. 이 스키마는 브라우저에 전송 계층 보안(TLS)를 사용하여 서버에 연결하도록 지시합니다. HTTPS를 사용하면 암호나 신용 카드 정보와 같이 브라우저와 서버 간에 교환되는 데이터가 암호화됩니다.
⦁ 도메인(Domain)
✔ www.google.com은 웹 사이트의 도메인 이름입니다. 기억하기 쉬운 주소이며 특정 서버의 IP 주소를 나타냅니다.
📝2. 도메인명의 IP 주소 조회
✔ 이제 브라우저는 인터넷에서 연결할 서버를 파악해야 합니다.
DNS 조회를 사용하여 웹 사이트를 호스팅 하는 서버의 IP 주소를 조회합니다.
* DNS(Domain Name Server)란?
인터넷 전화번호부와 같습니다. DNS는 웹 사이트의 IP 주소와 도메인 주소를 연결해 주는 시스템이며,
인터넷의 모든 URL에는 고유한 IP 주소가 할당되어 있습니다.
IP주소는 엑세스 요청 웹 사이트의 서버를 호스팅 하는 컴퓨터에 속합니다.
DNS는 복잡하고 매우 빨라야 하기 때문에 DNS 데이터는 웹 브라우저 사이의 서로 다른 계층과 인터넷 다양한 위치에 임시로 저장됩니다. 이를 캐시(Cache)라고 합니다. 브라우저는 네 개의 캐시를 확인합니다.
1. 브라우저 캐시 확인
브라우저는 내가 이전에 방문한 웹 사이트의 기록을 일정 기간 저장하고 있습니다.
2. OS 캐시 확인
브라우저 캐시에 원하는 DNS 레코드가 없다면, 내 컴퓨터 OS에 시스템 호출 (gethostname)을 통해 DNS 기록을 가져옵니다.
3. 라우터 캐시 확인
만약 컴퓨터에도 원하는 DNS 레코드가 없다면, 브라우저는 라우터에서 DNS 기록을 저장한 캐시를 확인합니다.
4. ISP 캐시 확인
위 모든 단계에서 DNS 기록을 찾지 못한다면, 브라우저는 ISP에서 DNS 기록을 찾습니다.
ISP(Internet Service Provider)는 DNS 서버를 가지고 있는데, 해당 서버에서 DNS 기록 캐시를 검색할 수 있습니다.
만약, 웹 브라우저가 캐시 계층에서 IP 주소를 찾을 수 없는 경우 회사 네트워크 또는
ISP의 DNS 서버가 재귀적 DNS 조회를 수행합니다. 재귀적으로 여러 DNS 서버를 요청하며,
검색이 될 때까지 많은 DNS 서버에 요청합니다.
📝3. 웹 브라우저 - 서버 TCP 연결 시작
✔ 인터넷에 연결된 웹 브라우저 요청 패킷은 TPC/IP라고 하는 전송 제어 프로토콜을 사용하여
라우터 장비, 인터넷 서비스 제공회사 교환기를 통해 이동되어, 통신 회사 간 경로인 라우팅 테이블을 따라서 연결할 IP 주소가 있는 웹 서버를 찾습니다.
하지만 요즘 많은 웹 사이트들이 직접 서버에 연결하기 보다 콘텐츠 전송 네트워크(CDN)를 사용하며 콘텐츠를 웹 브라우저 가까이 위치 시킵니다.
✔ 웹 브라우저가 인터넷에서 서버를 찾으면 웹 서버와 TCP 연결을 설정하고,
HTTP를 통해 통신을 시작합니다. 요새는 대부분 HTTPS를 사용해 주고 받는 데이터를 암호화를 위한 TLS 핸드셰이크 과정을 수행합니다.
* TLS란?
안전한 인터넷 통신을 위한 암호화 및 인증 프로토콜입니다. TLS 핸드셰이크는 TLS 암호화를 사용하는 통신 세션을 실행하는 프로세스입니다. TLS 핸드셰이크 중에, 통신하는 양측에서는 메시지를 교환하여 서로를 인식하고 서로를 검증하며 사용할 암호화 알고리즘을 구성하고 세션 키에 합의합니다. TLS 핸드셰이크는 HTTPS 작동 원리
의 근간을 이룹니다.
출처 : https://www.cloudflare.com/ko-kr/learning/ssl/what-happens-in-a-tls-handshake/
HTTP 통신이 진행될 때 필요한 DNS를 찾는데 걸린 시간, 연결 시간 등을 확인할 수 있습니다.
웹 브라우저의 개발자 도구(F12)에서 확인 가능합니다.
📝4. 웹 브라우저가 HTTP 요청을 서버로 전송
✔ 웹 브라우저가 서버에 연결되면(TCP), HTTPS 프로토콜에 대한 통신 규칙을 따릅니다.
웹 브라우저가 페이지의 콘텐츠를 요청하기 위해 서버에 HTTP 요청을 전송하는 것으로 시작합니다.
HTTP 요청에는 요청 라인, 헤더, 본문이 포함됩니다.
⦁ 요청 라인 (Start Line)
✔ GET POST PUT DELETE 등 요청 메서드
✔ 요청된 리소스를 가르키는 경로 ( 예시: /login )
✔ 통신할 HTTP 버전
⦁ 헤더 (Headers)
✔ 해당 요청의 대한 추가 정보를 담고 있는 부분
✔ Key-Value 값으로 되어있다.
* 자주 사용되는 header 정보
HOST : 요청이 전송되는 target의 host ur+
User-Agent : 요청을 보내는 클라이언트의 대한 정보 : 예를 들어, 웹브라우저에 대한 정보
Accept : 해당 요청이 받을 수 있는 응답(response) 타입
Connection : 해당 요청이 끝난후에 클라이언트와 서버가 계속해서 네트워크 커넥션을 유지할 것인지
Content-Type : 해당 요청이 보내는 메세지 body의 타입
Length: 메시지 body의 길이
⦁ 본문 (Body)
✔ 클라이언트가 서버로 전송하는 데이터를 포함하는 부분
✔ 서버는 요청의 본문을 읽어 해당 데이터를 처리하고 응답을 생성
📝5. 웹 서버가 요청을 처리하고 응답을 전송
웹 서버는 요청을 받고 요청 라인, 헤더 및 본문의 정보를 기반으로 요청 처리 방법을 결정합니다.
✔ 클라이언트에게 요청 상태를 알려주는 상태 라인
✔ 브라우저에 응답 처리 방법을 알려주는 응답 헤더
✔ 해당 경로에서 요청된 리소스 (HTML, CSS, JS, 이미지 같은 콘텐츠 또는 데이터)
* 응답예시
HTTP/1.1 200 OK
Date: Tue, 25 May 2021 19:40:59 GMT
Server: Apache
X-Frame-Options: SAMEORIGIN
X-Powered-By: Express
Cache-Control: max-age=0, no-cache
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding X-Mod-Pagespeed: 1.13.35.2-0
Content-Encoding: br
Keep-Alive: timeout=1, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
<!DOCTYPE html>
<html lang="ko">
<head>
나머지 HTML 항목
웹 브라우저는 200의 상태 코드를 성공으로 간주합니다.
지금까지 서버 → 브라우저 전송을 위한 응답 구축 방법이었고,
이제 웹 브라우저가 어떻게 응답을 처리하는지 알면 됩니다.
📝6. 웹 브라우저가 콘텐츠 렌더링
웹 브라우저가 서버로부터 응답을 받으면 응답 헤더를 검사하여 렌더링에 대한 정보를 확인합니다.
(Content-Type)
브라우저는 응답받은 HTML을 화면에 단계별로 표시합니다.
1. HTML 골격을 렌더링
2. HTML 태그를 확인하고, 이미지, CSS, JS 파일 등 웹 페이지의 추가 요소에 대한 GET요청 전송
3. 정적 파일(Static File)은 브라우저에서 캐싱 되므로 다시 페이지를 방문할 때 가져올 필요가 없다.
4. 페이지를 브라우저에 렌더링 한다.
지금까지 면접 질문 국룰인
"브라우저에 URL을 입력하면 어떤 일이 벌어지나요?"를
알아봤습니다. 😀
단순한 질문이지만, 개발자도 종류가 다양하기 때문에
깊게 파고들면 한없이 깊어지는 질문이라고 합니다.
얕게나마 정리하면서 네트워크 지식을 쌓을 수 있어서 좋았습니다. 😎
참고 문헌 :
https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/