Web Browser와 Web 동작 원리

이정훈·2023년 8월 3일
0

Computer Science

목록 보기
1/9

1. 웹 브라우저(Web Browser)

  • 인터넷을 할 때 사용하는 GUI 기반의 소프트웨어
  • 사용자는 브라우저를 통해 요청한 웹 페이지의 리소스를 가져오거나, 웹 서버로 정보를 보낼 수 있음
  • 응답받은 자원(HTML, 이미지, PDF 등 다양한 리소스)를 화면에 출력함

2. 구성 요소

  • 사용자 인터페이스 : 주소 표시줄, 뒤로가기,앞으로가기 버튼, 새로고침 등
    사용자와 상호작용하는 영역
  • 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어, 사용자가 URI를 주소창에 입력하거나, 새로고침, 뒤로가기 버튼을 눌렀을 때, 해당 명령을 렌더링 엔진으로 전달
  • 렌더링 엔진: 요청한 URI에 해당하는 데이터를 네트워크(통신) 레이어에 전달하고, 브라우저 화면에 출력
    HTML을 요청하면, HTML과 CSS를 파싱하여, 화면에 표현
  • 통신: HTTP와 같은 프로토콜을 이용한 네트워크 호출을 담당
    웹 서버에서 HTML, CSS, 이미지 등의 리소스를 가져올 때 통신 측면을 처리
  • 자바스크립트 해석기: 자바스크립트를 파싱하고, 코드를 실행한다.
  • UI 백엔드: 플랫폼에서 명시하지 않은 인터페이스로서, 동작하고 있는 브라우저의 OS의 인터페이스
  • 자료저장소: 브라우저에서 자료(쿠키, 세션 등)를 저장하는 레이어

3. 동작 과정

웹의 동작과정은 다음과 같다.

  1. Client가 찾고 싶은 웹 브라우저의 URI를 입력한다.
  2. URI 주소 중 도메인 네임을 DNS 서버에서 검색하고, DNS 서버는 도메인에 해당하는 IP주소를 URI 정보와 함께 전달한다.
  3. 전달한 IP주소와 URI 정보는 HTTP 프로토콜을 이용하여, HTTP 요청 메세지를 생성하고, 요청메세지는 TCP 프로토콜을 이용하여, 해당 IP 주소의 웹 서버로 전송된다.
  4. 웹 서버로 도착한 HTTP 요청 메세지는 HTTP 프로토콜을 통해 웹 페이지 URI정보로 변환된다.
  5. 웹 서버는 검색된 URI 정보에 대한 데이터를 HTTP 프로토콜을 사용하여 HTTP 응답 메세지를 생성하여 Client에게 전송한다.
  6. 도착한 HTTP 응답 메세지는 HTTP 프로토콜을 통해, 웹 페이지 데이터로 변환되고, 웹 브라우저는 해당 데이터를 출력하여 사용자에게 보여준다.

3-1. DNS 서버

  • 웹 브라우저에 도메인 입력하면, 컴퓨터는 해당 IP 주소를 얻기 위해 DNS 서버에 요청을 보낸다. DNS 서버는 DB를 검색하거나, 다른 DNS 서버와 통신하여 해당 도메인과 매핑된 IP 주소를 찾고, 사용자 컴퓨터에게 반환된다.

도메인: IP는 사람이 기억하기 어렵기 때문에, 각 IP에 부여한 이름.
DNS: 네임서버 $라고도 하며, 사람이 읽을 수 있는 인터넷 주소(naver.com)를 컴퓨터가 이해할 수 있는 IP 주소로 변환

간단하게 네이버의 IP 주소를 알아보자.
dig 명령어를 이용하여 다음과 같은 쿼리를 보낸다.

dig naver.com


네이버에 접속하는 IP 주소는 총 4개가 보인다. (트래픽을 분산시키기 위해 -> 로드 밸런싱)

  • naver.com : 첫번째 필드는 도메인 네임을 리턴한다.
  • 263: DNS 레코드의 TTL(Time To Live) 값을 의미한다. TTL은 DNS 레코드가 변경사항이 적용될 때 까지 걸리는 시간을 의미한다. 즉 TTL 값이 263초인 레코드는 263초 이후 변경사항이 적용된다는 것을 의미한다.
  • IN : IN은 클래스이다. IN은 인터넷을 의미한다.
  • A : 타입을 의미한다. A Type은 IPv4 주소라는 것을 의미한다.

참고사항 출처

https://inpa.tistory.com/entry/%EB%B0%B1%EC%97%94%EB%93%9C-%EB%A1%9C%EB%93%9C%EB%A7%B5-%F0%9F%8C%90-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%99%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC
https://d2.naver.com/helloworld/59361
http://www.tcpschool.com/webbasic/works![]
https://www.akamai.com/ko/glossary/what-are-dns-servers

profile
원숭이도 이해할 수 있는 글을 쓰도록 하자

1개의 댓글

comment-user-thumbnail
2023년 8월 3일

개발자로서 성장하는 데 큰 도움이 된 글이었습니다. 감사합니다.

답글 달기