본문 바로가기

[IT/Programming]/HTML related

week2 위클리 페이퍼 (브라우저가 어떻게 동작하는지 설명)

728x90
반응형
# week2 위클리 페이퍼 (브라우저가 어떻게 동작하는지 설명) ## PH
  • 2024-08-05 : First posting.
## TOC ## 브라우저가 어떻게 동작할까? 브라우저는 보통 사람들 (Clients) 이 domain name 을 통해 특정 웹사이트에 접속 할 때, DNS (Domain Name System) 을 통해서 해당 도메인 주소 (IP: Internet Protocol) 로 GET Request 를 보내서 페이지를 다운 받아 사용자에게 HTML 을 Parsing/Rendering 하여 보여주게 된다. 이 때 웹 페이지 내에 img tag 나 script tag, link tag 등이 있으면 해당 tag 의 src 로 GET Request 를 또 보내 데이터들을 다운로드 받아 적절하게 표현해주게 된다. 동적 웹사이트의 경우, GET Request 뿐만이 아니라, POST/PATCH/DELETE 등의 Request 들도 내부적으로 보낼때가 있다. 로그인을 할때라던지, 데이터들을 fetch 해야 할때라던지, update 요청이나 delete 요청을 보낼때 저런 Request 들을 보내게 된다. 웹 브라우저는 기본적으로 Request/Response 방식으로 작동한다. 사용자가 Request 를 서버에 보내고 받은 Request 에 대해 다시 Response 를 보낼때도 있다. 비동기적인 Request 의 경우 jquery 의 AJAX 를 사용하는 경우가 많다. ### Copilot 의 답변 웹 브라우저는 우리가 인터넷을 탐색하고 웹 페이지를 보는 데 필수적인 소프트웨어입니다. 그럼 브라우저가 어떻게 동작하는지 간단히 설명해 드릴게요. 사용자 인터페이스 (UI): 브라우저의 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등이 포함됩니다. 사용자가 요청한 페이지를 보여주는 창도 UI의 일부입니다. 브라우저 엔진: UI와 렌더링 엔진 사이의 동작을 제어합니다. 브라우저 엔진은 요청한 자원(일반적으로 HTML 문서)을 서버에 요청하고 받아옵니다. 렌더링 엔진: 렌더링 엔진은 HTML 문서를 파싱하여 화면에 표시합니다. 이때 CSS 스타일도 함께 적용됩니다. 렌더링 엔진은 렌더 트리를 생성하고 배치와 그리기 과정을 거쳐 화면에 내용을 표시합니다. 통신: 네트워크 호출에 사용되며, HTTP 요청과 같은 작업을 처리합니다. UI 백엔드: 콤보 박스, 창 등 기본적인 장치를 그립니다. OS 사용자 인터페이스 체계를 사용합니다. 자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행합니다. 자료 저장소: 자원을 저장하는 계층으로, 쿠키와 같은 정보를 하드 디스크에 저장합니다. 브라우저는 사용자가 선택한 자원(웹 페이지)을 서버에 요청하고, 렌더링 엔진은 이를 화면에 표시합니다. 최근에는 파이어폭스, 크롬, 사파리와 같은 오픈소스 브라우저들이 많이 사용되고 있습니다. 이들은 표준 명세를 따르며, 사용자 경험을 개선하기 위해 지속적으로 발전하고 있죠! 🌐✨ ## RRA
728x90
반응형