웹 동작 원리

gptj·2023년 1월 10일

텍스트_Tomcat 제품에 대해 구글링하면
뭔가 많이 나올거에요.
tomcat 제품에 대해 리뷰 하시고
웹 동작 원리도 구글링 하면서
리뷰하시고
궁금한거 있으면
질문해보세요.
그리고
리눅스 책 보면서
쉘스크립트 까지는
상식으로 알아야된다는
느낌으로 공부하시고
tomcat 제품,
startup.sh, shutdown.sh, catalina.sh
스크립트 파일 분석하세요.

❗ 브라우저의 구조는 다음과 같다.

  1. 사용자 인터페이스

    사용자가 접근할 수 있는 영역. URI를 입력할 수 있는 주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼 , 홈 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.

  2. 브라우저 엔진

    사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 한다.

  3. 렌더링 엔진

    웹 서버로부터 응답 받은 자원을 웹 브라우저 상에 나타낸다. 예를 들어 HTML 문서를 응답받으면 HTML과 CSS를 파싱 하여 화면에 표시한다.

    브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합하고 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타낸다.

  4. 통신

    HTTP 요청과 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용된다.

  1. UI 백엔드

    select, input 등 기본적인 위젯을 그리는 인터페이스.

  1. 자바스크립트 해석기

    자바스크립트 코드를 해석하고 실행한다.

  2. 자료 저장소

    Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역.

❓ 렌더링 엔진

-> html, xml, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진

  1. 브라우저에 요청해서 받은 html 파일을 읽어 파싱해서 dom트리를 구축한다.
  • DOM(document object model) : html문서에 대한 인터페이스
  • 파싱(parsing) : html,css파일을 브라우저에서 이해할 수 있도록 dom트리로 변환해주는 것
  1. DOM트리 파싱을 완료하면 완성된 DOM트리와 HTML파싱을 하면서 요청해 놓은 link태그, style태그를 결합시켜서 CSSOM트리를 생성한다.
  • CSSOM(Css Object Model) : 선택자와 선언 객체 그리고 css 문법과 일치하는 다른 객체를 포함한다.
  1. 마찬가지로 script태그를 만나면 javascript코드를 실행한다.
  • 자바스크립트는 자바스크립트 엔진이 처리한다. HTML파서는
  1. 만들어진 dom트리와 cssom트리가 합쳐져 렌더 트리를 생성하고 위치와 크기를 계산한다.

  2. 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정한다.

  3. 렌더 트리를 그린다.

profile
문과도 취업할 수 있다

0개의 댓글