웹 브라우저에 URL을 입력하면 어떤 일이 생기나요? | Amazon Web Services 한국 블로그

Article Date	2022.07.13
URL	https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/

웹 브라우저에 URL을 입력하고 Enter 키를 누르면 발생하는 일

• 웹사이트
  • HTML, CSS, Javascript 및 이미지와 같은 파일 모음
  • 브라우저에 사이트, 이미지 및 데이터를 표시하는 방법을 지정

• DNS 도메인 이름 시스템
  • 웹 브라우저에서 URL을 가리키면 브라우저가 찾는 인터넷의사이트를 호스팅하는 서버를 찾을 때 사용하는 것
  • IP 주소의 특정 주소를 외울 수 없기 때문에 편하게 쓰기 위한 연락처와 같은 것

1. 웹 브라우저에 URL을 입력하고 Enter 키 입력
   • URl 분석 https://channy.creation.net/blog/hello-world
     • Protocol 통신 프로토콜 : https://
       • TLS(전송 계층 보안)사용한 서버 연결 지시
       • 인터넷 통신 보호 암호화 프로토콜 T
     • 도메인 : channy.creation.net
       • 특정 서버 IP 주소를 가리키는 것
     • 경로 Path : blog
       • hello-world로 이어지는 경로
     • 리소스 Resource
       • 웹사이트의 .html 파일 확장자의 콘텐츠

1. 웹 브라우저가 도메인명의 IP 주소 조회
   • Enter키를 누른 후, 웹 브라우저는 인터넷에서 연결할 서버 파악 시작
   • 캐시=임시 파일 확인
     • 고유한 캐시, 운영 체제 캐시, 라우터의 로컬 네트워크 캐시, 회사 네트워크 또는 인터넷 서비스 제공업체(ISP)의 DNS 서버 캐시를 확인
     • 캐시 계층에서 IP 주소를 확인 못하면, 인터넷에 있는 여러 DNS 서버를 요청하여 재귀적으로 DNS 조회

1. 웹 브라우저가 서버와의 TCP 연결 시작
   • TCP/IP 전송 제어 프로토콜 사용, 라우터를 따라 IP 주소가 있는 웹 서버 찾기
     • 또는, 콘텐츠 전송 네트워트 CDN 사용한 동적, 정적콘텐츠 위치ex) 미디어 영상 등 버퍼링을 없애기 위해
        

💡
BE 단에서 알아두어야할 네트워크 프로토콜에 대한 내용.
TCP/IP updated Protocol일 계층으로 L3 L4의 네트워크계층과 전송계층의 프로토콜인 IP와 TCP(Transmission Control Protocol)으로 CS 강의에서 학습하고 정리한 개념과 직접적으로 이어진 부분이다.
사용자 또는 기기간의 내용인줄 알고 있었지만, 이렇게 브라우저가 서버에 요청하고 받는 송신 수신을 통해 렌더링 되는 절차역시 이러한 개념을 다루고 있음을 알고 있어야할 듯
즉, 가장 기본이 되는 네트워크 구조에 대해서는 Java 개발자 준비를 한다고 무시하지 말고 계속적으로 찾아보고 알아갈 수 있어할 것이다.

1. • DNS가 원본 서버 / 콘텐츠 배포 연결 지점의 IP 주소 반환
   • TCP 연결을 설정, HTTP 통신 시작

1. 웹 브라우저가 HTTP 요청을 서버로 전송
   • HTTP(s) 프로토콜 통신 규칙을 따르면서 요청을 전송 시작
     • 요청 라인 GET /blog/1620 HTTP/1.1
       • GET, POST, PUT, PATCH, DELETE 또는 몇 가지 다른 HTTP 동사 중 하나인 요청 메서드 : GET
       • 리소스 경로 : blog/1620
       • 통신 HTTP 버전 : HTTP/1.1
     • 요청 헤더
       • 요청을 라우팅하는 데 도움이 되는 추가 정보를 클라이언트에서 전달
       • key - value 페어 값들

1. 웹 서버가 요청을 처리하고 응답을 다시 전송
   • 응답 전송
     • 클라이언트에게 요청 상태를 알려주는 상태 라인
     • 브라우저에 응답 처리 방법을 알려주는 응답 헤더
     • 해당 경로에서 요청된 리소스
       • HTML, CSS, Javascript, 이미지 파일과 같은 콘텐츠 또는 데이터
       • html 파일 / img 파일 등

1. 웹 브라우저가 콘텐츠 렌더링
   • 브라우저가 응답받은 HTML 파싱, 렌더링
     • 렌더링 하기 위해 추가 Javascript, CSS, 이미지 리소스 요청할 수도

✏️
서버로 요청한 요청 헤드를 Content-Type을 기반으로 형식을 이해하면서 보낸 HTML 리소스를 한번더 브라우저가 렌더링을 할 필요가 있음
FE 엔지니어라면 반드시 알아두는 것이 웹 브라우저의 렌더링 기술 과정은 중요한 정보이자 지식

💡
BE Java Developer 준비하지만, 아티클과 CS강의가 연계되는 것이 있어 개발자는 항상 풀스택을 기본으로 상황에 따라서 어떤 언어를 다루고 어떤 분야에서 일하게 되는지 모르기 때문에 스크린 단에서 사용자에게 보여지는 곳 까지 이뤄지는 일종의 구현 단계를 알아둘 필요가 있다.