HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💻
프로그래밍
/
브라우저에 URL을 입력하면 발생하는 일
브라우저에 URL을 입력하면 발생하는 일
브라우저에 URL을 입력하면 발생하는 일

브라우저에 URL을 입력하면 발생하는 일

태그
네트워크 과정
대주제
학습포스팅
상태
완료
수정필요 부분
중분류
Front-End
생성일
Mar 22, 2022 08:03 AM

브라우저에 URL을 입력하면 발생하는 일

  • 페이지 이동을 하는 경우, 브라우저가 이벤트를 감지하여 일련의 과정을 수행
“잠깐의 로딩동안 많은 일들이 일어난다.”
notion image

Step1 . URL을 해석 이벤트감지

  • 브라우저에서 url을 해석하여, 해당 주소의 해당하는 자원을 요청한다.
    • 목적지와 받을 물건을 설정하는 단계
      • ex) 인수네집에서 홈페이지 가져다 줘
https://www.naver.com:443
protocol URL Port

Step2. DNS 조회 DNS

  • Domain Name System
    • 도메인 주소를 IP주소로 요청하는 과정
    • 컴퓨터는 도메인 주소를 읽을 수 없기 때문에, IP 주소로 변환하는 과정 필요
      • ex) IP주소는 신정이펜1로 50 에해당
  • 1) 로컬호스트와 브라우저 캐시에 해당 URL 존재하는 지 확인 → IP주소 요청 (Appache) 2-1) 없다면, root DNS 서버에 URL의 IP주소 요청
    • 2-2) 없다면, .com 도메인에 대한 하위 TLD이름 서버에 요청 3) 발견했다면 해당 IP주소를 반환하고, 다음 번에 빠르게 반응하기위해 일정시간 IP주소를 캐싱

Step3. IP가 존재하는 서버로 이동

  • 네트워크 장비가 IP주소의 실제 경로를 지정해줌
    • ex) 신정이펜1로 저쪽 으로 가세요~
  • 라우터를 통해 해당 서버가 존재하는 게이트웨이까지 이동

Step4. ARP를 이용하여 MAC 주소 변환

  • IP 주소를 MAC 주소로 변환
    • ARP는 실제 통신을 위해 논리주소인 IP주소(서울-양천구-신정동) 을 통해 범위를 좁혀나간 후 최종적으로 실제 위치인 MAC 주소(gps좌표) 를 반환한다.
    • ex) 신정이펜1로 50 → (x: 127.0 , y: 35.2)
  • ARP: Address Resolution Protocol
    • 논리주소인 IP 주소를 물리 주소인 MAC 주소로 변환하는 프로토콜
    • MAC 주소는 기계의 실제 위치를 의미하는 고유한 주소이므로 실제 통신에 사용된다.
      • gps좌표와 같다. (37.567, 126.71)

Step5. TCP 통신을 위한 Socket을 여는 단계 TCP단계

  • 대상 서버와 통신을 위한 TCP 소켓 연결
    • TCP : client와 server의 연결을 보장하는 연결형 서비스 ↔ UDP
  • TCP 연결은 3-way-handshake 과정을 통해 진행
    • 3way-handshake
      • 클라이언트와 서버가 서로를 확인하고 연결하는 작업
        • 3 way handshake는 TCP/IP 프로토콜을 이용한 통신에서 데이터를 전송하기 이전에 정확한 전송을 위하여 클라이언트와 서버의 세션을 수립하는 과정입니다. 클라이언트는 서버에 접속시작을 알리는 패킷을 보내고, 서버는 이 요청을 받아 수락한다는 표시를 추가한 패킷을 클라이언트에 응답합니다. 클라이언트는 이 응답을 받아 확인했다는 응답을 최종적으로 보내주게 되면 서버와 클라이언트는 연결이 되어 신뢰성을 가지게 됩니다.

Step6. 서버가 응답을 반환

  • HTTP/HTTPS 프로토콜로 들어온 패킷을 읽고 처리
  • 요청에 따른 적절한 응답 값을 반환
    • 요청: www.naver.com 의 index 해당하는 resourse 줘
    • 반환: HTML, CSS , Javascript 파일

Step7. 브라우저 렌더링

📕
브라우저 렌더링
  • HTML 파일을 읽어 DOM Tree 구축
  • DOM Tree를 화면에 렌더링
  • 스크립트 실행
 
 

참고링크

NAVER D2
NAVER D2
https://d2.naver.com/helloworld/5237120
브라우저에 URL을 입력했을 때 발생하는 일들
지금부터 제 인터넷 브라우저에 www.daum.net을 입력해보고 어떤 일이 일어나는지 과정을 알아보겠습니다. 웹 통신의 큰 흐름에 대해 간략하게 알아보겠습니다. 1. 브라우저의 URL 파싱 URL을 입력받은 브라우저는 일단 이 URL의 구조를 해석합니다. 어떤 프로토콜로 어느 도메인으로 어떤 포트로 보낼지 해석하게 되는 것이죠. 기본적으로 URL의 구조는 아래와 같습니다.
브라우저에 URL을 입력했을 때 발생하는 일들
https://deveric.tistory.com/97
브라우저에 URL을 입력했을 때 발생하는 일들
[브라우저에 url 입력 후 일어나는 일들] intro
1. 브라우저에서 URL 해석한다. http://wangin9.tistory.com/ - 프로토콜 : http -> 하이퍼 텍스트 전송 규약을 사용 - 자원 "/" : 메인(인덱스) 페이지를 가져오기 2. DNS 검색 - DNS 서버 통해서 IP 변환. 3. ARP 프로세스 - ARP : 주소 결정 프로토콜 - 목적지 IP 주소와 MAC 주소 알아야 함.
[브라우저에 url 입력 후 일어나는 일들] intro
https://wangin9.tistory.com/entry/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90-url-%EC%9E%85%EB%A0%A5-%ED%9B%84-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EC%9D%BC%EB%93%A4-intro?category=827054
[브라우저에 url 입력 후 일어나는 일들] intro