브라우저에 URL을 입력하면 어떤 일이 일어날까?

hyoribogo·2023년 6월 6일
25

데브코스

목록 보기
2/10
post-thumbnail

📘 네트워크 기초

데브코스 강의를 듣고 보충하여 정리한 글 😚


✔️ 미리 푸는 테스트

오늘 나올 개념들을 얼마나 알고 있는지 체크해보고 넘어가자! 😁
나중에 다시 이 글을 보게 되면 얼마나 망각했는지(?)를 체크할 수 있다.

🍔 URL의 구성 요소를 설명할 수 있다.
🍔 DNS를 요청하는 이유를 설명할 수 있다.
🍔 DNS로 요청을 보내기 전 체크하는 요소를 알고 있다.
🍔 DNS를 호출하면 어떤 일이 발생하는지 알고 있다.
🍔 IP 주소와 MAC 주소의 차이를 설명할 수 있다.
🍔 TCP가 무엇인지 알고 있다.
🍔 패킷이 무엇인지 알고 있다.
🍔 소켓이 무엇인지 알고 있다.




만약 모든 체크박스에 ✔️ 표시를 했다면, 당신은 ...

8개의 햄버거를 먹었습니다.
멋쨍이 입니다. 이 글을 안 읽고 넘기셔도 됩니다.

하지만 나 같은 경우에는 하나도 체크하지 못하기 때문에😂, 이 글을 여러 번 정독하며 점차 내 것으로 만드려 한다!




브라우저가 동작하는 원리

우리가 브라우저에 URL을 입력하면 잠깐의 로딩 사이에 웹사이트가 보이게 된다.
과연 이 로딩 중에 어떤 원리로 웹사이트가 보이게 되는 걸까?

  1. URL(Uniform Resource Locator)을 해석한다.
  2. DNS(Domain Name System)를 조회한다.
  3. 해당 IP가 존재하는 서버로 이동한다.
  4. ARP(Address Resolution Protocol)를 이용하여 MAC 주소 변환을 한다.
  5. TCP 통신을 통해 Socket을 열어야 한다.
  6. 서버는 응답을 반환한다.
  7. 브라우저는 렌더링한다.

요약하면 이러한 과정을 거쳐 웹사이트가 우리 눈에 보여지게 된다.
어려운 단어가 많지만 차근차근 단계별로 알아가보자!


1. URL(Uniform Resource Locator)을 해석한다.

💡 URL은 스키마, 계정 정보, 호스트, 포트와 같은 정보로 이루어져 있다.

protocol://username:password@host:port/path?query

  • 스키마(Scheme): 해당 URL이 사용하는 프로토콜을 나타낸다. 웹 브라우저가 어떤 방식으로 해당 URL을 처리해야 하는지를 나타내는 역할을 한다.

  • 프로토콜(protocol): 웹 브라우저나 다른 클라이언트가 서버와 통신하기 위해 사용하는 규칙과 절차의 집합이다. 예를 들어, HTTP, HTTPS, FTP 등이 있다.

    • http: HyperText Transfer Protocol(HTTP)를 사용하여 웹 페이지를 전송하는 데 사용된다. 일반적으로 웹 사이트에 접속할 때 사용된다.
    • https: HTTP의 보안 버전인 HTTP Secure(HTTPS)를 사용한다. 데이터의 암호화와 보안 통신을 제공하여 안전한 데이터 전송을 보장한다.
    • ftp: File Transfer Protocol(FTP)를 사용하여 파일을 전송하는 데 사용된다. 파일 공유나 다운로드를 위해 사용될 수 있다.
    • mailto: 이메일 주소를 가리키며, 사용자가 클릭하면 기본 이메일 클라이언트가 열리고 해당 주소로 새 이메일을 작성할 수 있다.
    • tel: 전화번호를 가리키며, 사용자가 클릭하면 전화를 걸 수 있는 기능을 제공한다.
    • file: 로컬 파일 시스템에 접근하기 위해 사용된다. 로컬 파일의 경로를 지정하는 데 사용된다.
  • 계정 정보(username:password): FTP를 이용해봤으면 알 것. 말 그대로 인증이 요구되는 경우 아이디와 패스워드를 입력하면 접속 허가를 받을 수 있다. 그러나 URL의 계정 정보를 사용하여 인증 정보를 전달하는 것은 보안적인 이유로 권장되지 않는다.

  • 호스트(host): 자원이 위치한 서버의 도메인 이름이나 IP 주소를 나타낸다.

  • 포트(port): 자원에 접근하기 위해 사용되는 포트 번호를 나타낸다. 일반적으로 생략되며, 생략 시 기본 포트 번호가 사용된다. (예: HTTP는 80번 포트, HTTPS는 443번 포트)

  • 경로(path): 서버 내에서 자원의 위치를 나타낸다. 디렉토리 경로나 파일 경로로 구성될 수 있다.

  • 쿼리(query): 자원에 전달되는 매개변수를 포함한 추가적인 정보를 나타낸다. 일반적으로 URL의 끝에 ?를 사용하여 나타내며, key=value의 형태로 구성된다.


참고로 protocol: 뒤에 있는 //는 생략해도 된다. 만든 사람이 멋있어 보여서 넣었다고 한다. 내가 생각해도 멋있긴 하다...
그래서 예를 들어 https:naver.com 로 들어가도 네이버로 들어가지는 것을 알 수 있다.


2. DNS(Domain Name System)를 조회한다.

DNS는 도메인과 IP주소를 서로 변환해준다. 따라서 IP주소를 받기 위해 DNS로 요청을 보내는 과정을 거치는 것이다.

💡 브라우저는 DNS로 요청을 보내기 전에 몇 가지 체크를 한다.

  1. 해당 도메인을 알고 있는지? YES - 4번 / NO - 2번
  2. 로컬 컴퓨터에 hosts 파일 참조 YES - 4번 / NO - 3번
  3. DNS 호출 - Root Server - TLD Server - Authoritative Server
  4. IP 반환
  • DNS로 요청을 보내기 전에 브라우저 캐시와 hosts 파일을 참조한다.
  • DNS는 보통 통신사(ISP)에서 제공하는 것을 사용한다.
  • DNS를 운영하는 서버를 보통 Name Server라고 부른다.
  • present.do, www.present.do, gateway.dev.present.do 전부 도메인은 present.do 나머지 서브 도메인이 붙는 경우는 전부 host라고 부른다.

🧐 Root Server - TLD Server - Authoritative Server 가 각각 무엇이고, 무슨 일을 할까?

Root Server(루트 서버): 최상위 도메인(.com .org .net 등)에 대한 정보를 제공하고, TLD 서버의 주소를 알려줌으로써 DNS 쿼리를 이어준다. 전 세계에 13개의 IP 주소로 분산되어 있으며, 각 IP 주소는 여러 대의 물리적 서버로 구성될 수 있다.

TLD(Top-Level Domain) Server (최상위 도메인 서버): 최상위 도메인에 대한 DNS 정보를 관리하는 서버이다. 루트 서버로부터 받은 DNS 쿼리를 기반으로 도메인 네임 서버(Nameserver)의 주소를 알려주어, 다음 단계의 권한 있는 서버로 쿼리를 전달한다.

Authoritative Server (권한 있는 서버): 특정 도메인에 대한 DNS 정보를 관리하는 서버이다. 해당 도메인의 IP 주소, 서브도메인, 메일 서버 등의 DNS 정보를 제공하여 쿼리를 응답한다.
예를 들어, "example.com" 도메인의 Authoritative Server는 "example.com" 도메인과 관련된 DNS 정보를 제공하는 것이다.


3. 해당 IP가 존재하는 서버로 이동한다.

💡 정확히는 해당 IP가 할당된 서버가 존재하는 대역으로 이동한다.

ex) 한국에서 미국에 있는 서버를 요청했다면, 네트워크 장비 라우터를 통해 여러 과정을 거쳐 해당 서버가 존재하는 대역으로 접근하게 되는 것이다.

  • 네트워크 장비 라우터를 통해 이동한다.
  • 동적 라우팅을 통해 이동한다.

4. ARP(Address Resolution Protocol)를 이용하여 MAC 주소 변환을 한다.

  • 논리 주소인 IP 주소를 물리 주소인 MAC 주소로 변환하는 프로토콜
  • 실제 통신을 위해 변하지 않는 고유한 MAC 주소가 필요하다.
  • 네트워크 내에 ARP를 Broadcasting하면 해당 IP 주소를 가지고 있는 기기가 MAC 주소를 반환한다.

💡 왜 논리적 주소와 물리적 주소로 나눈 걸까?
→ 용도가 다르기 때문이다.

예를 들어 경복궁의 주소는 서울 종로구 사직로 161이다. 만약, 이 주소 체계가 바뀐다면
우리는 경복궁의 위치를 알 수 없다. 따라서 GPS 좌표인 북위, 동경 등의 정확한 위치가 필요한 것이다. 비유하자면 도로명 주소나 지번 주소는 논리적 주소인 IP 주소이고, GPS 좌표는 물리적 주소인 MAC 주소이다.


5. TCP 통신을 통해 Socket을 열어야 한다.

  • 네트워크를 통해 해당 기기로 패킷을 전달한다.
  • 3 Way-Handshake로 연결을 요청한다.
  • 요청이 수락되면 기기는 패킷을 받아 처리한다.

🧐 TCP(Transport Control Protocol)란?
인터넷 프로토콜 스위트(Internet Protocol Suite)의 핵심 프로토콜 중 하나로, 신뢰성 있는 데이터 전송을 제공하는 연결 지향 프로토콜이다. TCP는 데이터를 패킷 단위로 분할하여 인터넷 상에서 안정적으로 전송하고, 데이터의 손실이나 손상을 검출하고 복구한다.

🧐 패킷이란?
컴퓨터 네트워크에서 데이터를 전송할 때 사용되는 작은 단위의 데이터 조각을 말한다. 네트워크 통신은 일반적으로 데이터를 작은 조각으로 분할하여 전송하고, 수신 측에서는 이러한 조각들을 수신하여 원래의 데이터로 재조립한다.

📍 패킷의 구성 요소

헤더(Header): 패킷의 제어 정보를 포함하는 부분으로, 출발지 IP 주소, 목적지 IP 주소, 포트 번호 등의 정보를 담고 있다. 헤더는 라우팅 및 전송 제어와 같은 네트워크 작업을 수행하는 데 필요한 정보를 제공한다.
페이로드(Payload): 패킷에 포함된 실제 데이터로, 송신측에서 수신측으로 전송되어야 하는 정보를 담고 있다. 페이로드는 예를 들어 전자 메일, 웹 페이지의 내용, 파일 데이터 등이 될 수 있다.
푸터(Footer): 패킷의 끝을 나타내는 부분으로, 패킷의 무결성을 검사하기 위해 사용될 수 있다. 일반적으로 패킷의 체크섬(Checksum) 값이 포함되어 패킷의 오류 여부를 확인한다.

🧐 소켓(Socket)이란?
컴퓨터 네트워크에서 프로세스 간 통신을 가능하게 해주는 소프트웨어 인터페이스이다. 소켓은 네트워크 상에서 데이터를 송수신하고, 클라이언트와 서버 간의 상호작용을 담당하는 역할을 수행한다.

🧐 3 Way-Handshake란?
TCP에서 통신을 하는 장치간 서로 연결이 잘 되어있는지 확인하는 과정/방식이다. 더 쉽게 말해서 송수신자 사이에 연결을 확인하는 과정이다.
더 자세한 과정을 알고 싶다면 3 Way-Handshake 정리 글을 참고하자!


6. 서버는 응답을 반환한다.

  • HTTP 프로토콜로 들어온 패킷을 읽고 처리한다.
  • 요청에 따른 적절한 응답 값을 반환한다.

7. 브라우저는 렌더링한다.

  • HTML을 읽어 DOM Tree를 구축한다.
  • 만들어진 DOM Tree를 이용하여 화면에 그린다.
  • 스크립트를 실행한다.

브라우저의 렌더링 과정은 추후 자세하게 포스팅할 예정이다. 😀


실제로는 알아야할 게 더 많다.

  • OSI 7 계층
  • Routing Table
  • Subnet mask
  • TCP Socket Stream

등등… 더 복잡한 개념들이 많다. 하지만 위의 기본적인 개념들은 꼭 알아두어야 하는 내용이다.


다음 게시물에서는 "http가 이미 있음에도 불구하고 https가 왜 탄생했는지, 왜 필요한지""https가 생김으로 인해 기존 과정에서 무엇이 추가되었는지"에 대해 정리할 예정이다.

profile
FE 개발자

6개의 댓글

comment-user-thumbnail
2023년 6월 6일

사진, 그림을 적절하게 잘 사용하셔서 읽기 좋아요. 체크박스도 있어서 좋네요 👍

1개의 답글
comment-user-thumbnail
2023년 6월 12일

잘보고갑니다!!!

1개의 답글
comment-user-thumbnail
2023년 6월 16일

맨날 까먹는 내용 ㅋㅋ
잘 보고 갑니다.

1개의 답글