🗣️ 브라우저에 URL을 입력하면 일어나는 일에 대해 순서대로 설명해주세요.
-
의도: 기본적인 브라우저 작동 방식에 대해 이해하고 있는지 확인하는 질문
-
팁: 순서대로 나누어 단계별로 설명한다.
-
나의 답안
사용자가 브라우저의 주소창에 URL을 입력하면, 브라우저는 입력된 URL을 파싱하여 URL의 구성 요소를 식별합니다.
브라우저는 URL에 포함된 도메인 이름을 IP 주소로 변환하기 위해 DNS, 즉 도메인 네임 시스템 서버에 요청을 보냅니다.
DNS 서버가 도메인 이름에 대한 IP 주소를 반환하면 브라우저는 이 IP 주소를 저장하여 이후의 요청에 사용합니다.그 후, 브라우저는 IP 주소를 사용하여 웹 서버와 TCP 연결을 설정한 후, 포트를 설정합니다.
참고로 HTTPS의 경우, TLS/SSL 핸드셰이크를 진행합니다.
브라우저는 서버의 SSL 인증서를 검증하고, 브라우저와 서버는 대칭 암호화 방식과 키를 설정하여 안전한 데이터 전송을 준비합니다.브라우저가 웹 서버에 HTTP 요청을 보낼 때, 요청 메서드, URL, 헤더, 바디 등을 포함시킵니다.
바디는 POST 요청 시 데이터를 담는 용도입니다.
서버는 요청을 처리한 후 HTTP 응답을 브라우저에 전송합니다.
응답에는 상태 코드, 헤더, 바디가 포함됩니다.
브라우저는 HTML, CSS, JavaScript 등이 들어 있는 응답 바디를 수신합니다.그 후, 브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성하고, CSS 문서를 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
DOM과 CSSOM을 결합하여 렌더 트리를 생성하고, 이 트리를 기반으로 웹 페이지의 레이아웃을 계산합니다.
브라우저는 JavaScript를 파싱하고 실행하여 페이지의 동작을 정의합니다.
JavaScript는 동적으로 DOM을 수정하거나 사용자 입력, 네트워크 응답 등 다양한 이벤트를 처리합니다.
마지막으로 브라우저는 계산된 레이아웃과 스타일을 바탕으로 최종 페이지를 화면에 렌더링하게 됩니다. -
제공된 답안 (모범 답안)
우리가 브라우저에 URL을 입력하면 일어나는 일을 단계별로 설명드리겠습니다.
네이버의 주소 naver.com을 주소창에 쳤다고 가정해 보겠습니다.
그러면 브라우저는 URL에서 프로토콜, 도메인 이름, 경로 등을 분석하게 됩니다.이후 브라우저는 도메인 이름을 IP 주소로 변환하고자 DNS, 즉 도메인 네임 서버에 요청을 보냅니다.
그럼 도메인 네임 서버는 도메인에 해당하는 IP 주소를 응답으로 보내줍니다.그리고 브라우저는 TCP 네트워크 연결을 구축하여 해당 IP 주소를 가진 웹 서버에 접근하여 데이터를 요청합니다.
그러면 웹 서버는 HTTP 응답을 브라우저에 보내고, 브라우저는 받아온 HTML, CSS, JS 코드를 화면에 렌더링하게 됩니다.
📝 개념 정리
-
브라우저에 URL을 입력하면 여러 단계의 과정이 진행된다.
-
이 과정을 이해하면 웹 브라우저와 웹 페이지가 어떻게 작동하는지 명확히 알 수 있다.
-
다음은 URL을 입력한 후 브라우저가 웹 페이지를 로드하기까지의 단계별 과정이다.
1. URL 입력 및 파싱
(1) URL 입력
- 사용자가 브라우저의 주소창에 URL을 입력하고 엔터 키를 누른다.
(2) URL 파싱
-
브라우저는 입력된 URL을 파싱하여 URL의 구성 요소를 식별한다.
-
URL은 보통
scheme://host:port/path?query#fragment과 같은 형식을 가진다.
예:https://www.example.com:443/path/to/resource?query=example#section
2. DNS 조회
(1) DNS 요청
- URL에 포함된 도메인 이름(예:
www.example.com)을 IP 주소로 변환하기 위해 DNS(Domain Name System) 서버에 요청을 보낸다.
(2) DNS 응답
- DNS 서버가 도메인 이름에 대한 IP 주소를 반환하면 브라우저는 이 IP 주소를 저장하여 이후의 요청에 사용한다.
3. TCP 연결
(1) TCP 핸드셰이크
-
브라우저는 IP 주소를 사용하여 웹 서버와 TCP 연결을 설정한다.
-
이 과정은 3-way 핸드셰이크로 이루어진다.
- SYN : 클라이언트가 서버에 연결 요청을 보낸다.
- SYN-ACK : 서버가 요청을 수락하고 응답을 보낸다.
- ACK : 클라이언트가 서버의 응답을 확인한다.
(2) 포트 설정
-
HTTP의 경우 기본적으로 80번 포트를 사용한다.
-
HTTPS의 경우 443번 포트를 사용한다.
4. TLS/SSL 핸드셰이크 (HTTPS인 경우)
(1) 서버 인증
- 브라우저는 서버의 SSL 인증서를 검증하여 서버의 신뢰성을 확인한다.
(2) 암호화 설정
- 브라우저와 서버는 대칭 암호화 방식과 키를 설정하여 안전한 데이터 전송을 준비한다.
5. HTTP 요청
(1) 요청 헤더 전송
-
브라우저는 웹 서버에 HTTP 요청을 전송한다.
-
요청에는 요청 메서드(GET, POST 등), URL, 헤더(브라우저 정보, 쿠키 등), 바디(POST 요청 시 데이터)가 포함된다.
예:GET /path/to/resource HTTP/1.1
(2) 서버 처리
- 서버는 요청을 처리하고 응답을 준비한다.
6. HTTP 응답
(1) 응답 헤더 수신
-
서버는 HTTP 응답을 브라우저에 전송한다.
-
응답에는 상태 코드(200 OK, 404 Not Found 등), 헤더(콘텐츠 유형, 길이 등), 바디(웹 페이지 내용)가 포함된다.
예:HTTP/1.1 200 OK
(2) 응답 바디 수신
- 브라우저는 응답 바디(HTML, CSS, JavaScript 등)를 수신한다.
7. HTML 파싱 및 렌더링
(1) HTML 파싱
-
브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다.
-
DOM 트리는 HTML 문서의 구조를 나타낸다.
(2) 리소스 요청
- HTML 문서에서 참조하는 외부 리소스(CSS 파일, JavaScript 파일, 이미지 등)를 요청한다.
8. CSS 파싱 및 스타일 적용
(1) CSS 파싱
-
브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다.
-
CSSOM 트리는 문서에 적용된 스타일을 정의한다.
(2) 스타일 적용
- DOM과 CSSOM을 결합하여 렌더 트리를 생성하고, 이 트리를 기반으로 웹 페이지의 레이아웃을 계산한다.
9. JavaScript 실행
(1) JavaScript 파싱 및 실행
-
브라우저는 JavaScript를 파싱하고 실행하여 페이지의 동작을 정의한다.
-
JavaScript는 동적으로 DOM을 수정하거나 사용자와 상호작용한다.
(2) 이벤트 처리
- JavaScript는 사용자 입력, 네트워크 응답 등 다양한 이벤트를 처리한다.
10. 페이지 렌더링
(1) 레이아웃 계산
- 렌터 트리를 기반으로 페이지의 각 요소의 위치와 크기를 계산한다.
(2) 페인팅
- 최종적으로 화면에 표시할 내용을 결정하고, 브라우저는 이를 화면에 그린다.
11. 페이지 표시
(1) 화면 표시
- 브라우저는 계산된 레이아웃과 스타일을 바탕으로 최종 페이지를 화면에 표시한다.
12. 추가 작업
(1) 자원 캐싱
- 브라우저는 자원(이미지, CSS, JavaScript 등)을 캐싱하여 후속 요청에서 빠르게 로드할 수 있게 한다.
(2) 작업 스케줄링
- JavaScript의 비동기 작업, 애니메이션, 사용자 상호작용 등의 처리를 스케줄링하여 페이지의 반응성을 유지한다.
