[Network] Browsers and how they work?

브라우저가 어떻게 동작되는지 알아보기 전에 먼저 브라우저가 무엇인 지 알아보자. 

 

브라우저(Browser)란?

브라우저는 인터넷에 접속하여 정보를 얻기 위해 사용되는 소프트웨어 응용 프로그램입니다. 사용자는 브라우저를 통해 웹 사이트를 탐색하고 미디어 콘텐츠를 시청하고 온라인 응용 프로그램 및 서비스와 상호 작용할 수 있습니다. 우리가 흔히 알고 있는 크롬, 사파리, 파이어폭스 등이 이에 속합니다. 

 

브라우저는 클라이언트로서 웹 서버에 접속하여 정보를 요청(request)하고 웹 서버는 컴퓨터나 브라우저를 지원하는 장치에 결과를 표시하는 브라우저로 정보를 응답(response)함으로써 소통합니다. 예를 들면 사용자가 브라우저의 주소창에 웹 URL을 입력하면 브라우저는 해당 웹 서버에 요청을 보낸 다음 HTML, CSS, JS 등으로 요청된 데이터를 다시 보냅니다. 

 

최신 브라우저는 인터넷 접속을 위한 기본적인 기능 외에도 피싱 공격 등의 온라인 위협으로부터 보호하기 위한 보안 기능을 지원할 수 있습니다. 또한 사용자가 브라우저의 동작을 지정하고 새로운 기능을 추가할 수 있는 확장프로그램을 지원할 수도 있습니다.

 

브라우저의 주요 구성 요소

 

• User Interface : 사용자가 브라우저와 상호 작용하는 공간을 말합니다. 뒤로 및 다음 버튼, 홈 버튼, 새로 고침 및 중지, 책갈피 옵션 등이 포함됩니다. 요청된 웹 페이지가 표시되는 창을 제외한 다른 모든 부분은 User Interface보다 더 아래 요소들에서 처리됩니다.
• Browser Engine : User Interface와 Rendering Engine 사이를 연결해 주는 역할을 합니다. 다양한 사용자의 입력에 따라 Rendering Engine에게 요청하고 조작합니다.
• Rendering Engine : 브라우저 화면에 요청된 웹 페이지를 실시간으로 그려주는 역할을 합니다. CSS를 사용하여 형식화된 HTML, XML 문서 및 이미지를 해석하고 레이아웃을 생성합니다. 추가로 플러그인이나 확장을 사용하면 다른 유형의 데이터도 표시할 수 있습니다. 브라우저마다 Rendering Engine을 다르게 사용합니다.
• Networking : HTTP 또는 FTP의 일반적인 인터넷 프로토콜을 사용하여 URL을 검색하는 브라우저의 구성 요소입니다. 인터넷 통신 및 보안의 모든 측면을 처리해 주며 네트워크 트래픽을 줄이기 위해 검색된 문서의 캐시를 구현합니다.
• JavaScript Interpreter : 웹사이트에 포함된 자바스크립트 코드를 해석하고 실행하는 브라우저의 구성 요소입니다. 해석된 결과는 사용자에게 보여주기 위해 Rendering Engine으로 전송됩니다.
• UI Backend : combo box 및 windows과 같은 기본 위젯을 그리는 데 사용됩니다. 플랫폼에 국한되지 않는 일반적인 인터페이스를 노출합니다. 
• Data Persistence : 브라우저가 설치된 컴퓨터의 로컬 드라이브에 생성되는 작은 데이터베이스입니다. 브라우저는 localStorage, IndexedDB, WebSQL 및 FileSystem과 같은 저장 구조를 지원하며 캐시, 쿠키, 북마크, 기본 설정과 같은 사용자의 데이터를 관리합니다.

 

 

참고

https://medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509#:~:text=A%20browser%20is%20a%20software%20application%20used%20to%20locate%2C%20retrieve, Web%20server%20and%20requests%20information.

How does web browsers work?

https://runmad84.com/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C/

5. 브라우저(Browser)란 무엇인가? - 디지털 시대의 길라잡이

https://oneroomtable.com/entry/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%97%AD%ED%95%A0