반응형
- Creative Commons
- 저작자표시 - 적절한 출처와, 해당 라이센스 링크를 표시하고, 변경이 있는 경우 공지해야 합니다. 합리적인 방식으로 이렇게 하면 되지만, 이용 허락권자가 귀하에게 권리를 부여한다거나 귀하의 사용을 허가한다는 내용을 나타내서는 안 됩니다.
- 비영리 - 이 저작물은 영리 목적으로 이용할 수 없습니다.
- 변경금지 - 이 저작물을 리믹스, 변형하거나 2차적 저작물을 작성하였을 경우 그 결과물을 공유할 수 없습니다.
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
(If this article was helpful, please click the ad once. Thank you. ;)
Mode: Bright; Font: Noto Sans KR; font-size: 16px; line-height: 1.5;
width: 1280, height: 720, version: 3.3.3
Canonical URI: https://kipid.tistory.com/entry/week2-위클리-페이퍼-브라우저가-어떻게-동작하는지-설명
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/351
document.referrer: Empty
width: 1280, height: 720, version: 3.3.3
Canonical URI: https://kipid.tistory.com/entry/week2-위클리-페이퍼-브라우저가-어떻게-동작하는지-설명
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/351
document.referrer: Empty
week2 위클리 페이퍼 (브라우저가 어떻게 동작하는지 설명)
Table of Contents
T1.브라우저가 어떻게 동작할까?
▼ Show/Hide
브라우저는 보통 사람들 (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 를 사용하는 경우가 많다.
T1.1.Copilot 의 답변
웹 브라우저는 우리가 인터넷을 탐색하고 웹 페이지를 보는 데 필수적인 소프트웨어입니다. 그럼 브라우저가 어떻게 동작하는지 간단히 설명해 드릴게요.
사용자 인터페이스 (UI): 브라우저의 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등이 포함됩니다. 사용자가 요청한 페이지를 보여주는 창도 UI의 일부입니다.
브라우저 엔진: UI와 렌더링 엔진 사이의 동작을 제어합니다. 브라우저 엔진은 요청한 자원(일반적으로 HTML 문서)을 서버에 요청하고 받아옵니다.
렌더링 엔진: 렌더링 엔진은 HTML 문서를 파싱하여 화면에 표시합니다. 이때 CSS 스타일도 함께 적용됩니다. 렌더링 엔진은 렌더 트리를 생성하고 배치와 그리기 과정을 거쳐 화면에 내용을 표시합니다.
통신: 네트워크 호출에 사용되며, HTTP 요청과 같은 작업을 처리합니다.
UI 백엔드: 콤보 박스, 창 등 기본적인 장치를 그립니다. OS 사용자 인터페이스 체계를 사용합니다.
자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행합니다.
자료 저장소: 자원을 저장하는 계층으로, 쿠키와 같은 정보를 하드 디스크에 저장합니다.
브라우저는 사용자가 선택한 자원(웹 페이지)을 서버에 요청하고, 렌더링 엔진은 이를 화면에 표시합니다. 최근에는 파이어폭스, 크롬, 사파리와 같은 오픈소스 브라우저들이 많이 사용되고 있습니다. 이들은 표준 명세를 따르며, 사용자 경험을 개선하기 위해 지속적으로 발전하고 있죠! 🌐✨
▲ Hide
* 게시글 관련 링크들 in Recoeve.net (3S | Slow/Sexy/Sincere SNS)
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
유튜브 음악, K-Pop MV 들을 광고없이 목록재생 해서 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
츄츄와 루루 (포메라니안 6세/3.5kg, 3개월/1.2kg) 의 사진/동영상들을 모아 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
(If this article was helpful, please click the ad once. Thank you. ;)
반응형
'[IT|Programming] > HTML related' 카테고리의 다른 글
| AWS server|서버 에서 GitHub 가 너무 느려질때 해결 방법. (1) | 2024.08.18 |
|---|---|
| 자바스크립트 (JavaScript) 기초 (1) | 2024.08.12 |
| jQuery 분석 (Analysis): $.find([CSS Selector]) and $.parents([CSS Selector]) (2) | 2024.08.11 |
| Pattern Replace 를 이용한 http, https 링크 (그림, 동영상, 유튜브, 인스타그램, 틱톡, Soundcloud, 카카오TV, 네이버TV 등) 처리 | URI (Unique Resource Identifier) Rendering (12) | 2024.08.04 |
| Learning Node.js (0) | 2024.08.04 |
| Helper div with display: flex; margin, padding 으로 가로 너비 설정/맞추는 법 정리 (1) | 2024.07.31 |
| Vertical center align by CSS in HTML (0) | 2024.05.05 |
http/https 링크및 수식 (\ [ Outline 수식 \ ],\ ( inline 수식 \ )::\이후 띄어쓰기 없이) 을 넣으실 수 있습니다. 또한 code 는```시작,```/마지막으로 감싸 주시면 pretty-printed 되어서 나타납니다.```[.lang-js.scrollable.no-linenums]같이 언어를 선택해 주실수도 있고, 긴 수식의 경우 scroll bar 가 생기게 만드실 수도 있습니다. .no-linenums 로 line numbering 을 없앨수도 있습니다.댓글 입력 후 rendering 된 형태를 보시려면, Handle CmtZ (단축키: N) 버튼을 눌러주세요. 오른쪽 아래 Floating Keys 에 있습니다. 아니면 댓글 젤 아래에 버튼이 있습니다.