Bootcamp : 1주차 개발일지

cad·2022년 4월 6일
0

Bootcamp

목록 보기
1/5

1주차 목표

  • HTML, CSS, JS의 기초 지식과 활용을 배운다.
  • Bootstrap을 활용해서 작은 로컬 웹페이지를 만들며 익힌다.

HTML : 뼈대, 여러 tag를 활용해서 구역별 레이아웃 지정한다.

CSS : 꾸미기, 각 tag의 class, id값을 활용해서 디자인한다.

Javascript : 동적 제어

Bootstrap : 오픈소스 CSS 라이브러리, 간편하게 디자인 레이아웃을 생성할 수 있다.

강의를 마치고 HTML, CSS, JS가 어떻게 브라우저 상에 표시되는지 궁금해져서 찾아보다 좋은 글을 발견했다. 자세하게 다루어 주셨는데 일부분만 따로 가져와 적어보았다.

HTML, CSS, JS : 웹 브라우저는 어떻게 동작할까?

브라우저(Browser)란?

웹 브라우저는 동기(Synchronous)적으로, HTTP, CSS, Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어입니다.

동기적인 이유

  • HTML 요소들이 script 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
  • DOM이 완성되기 전에 script가 DOM을 조작한다면 에러가 발생한다.
  • 자바 스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.

브라우저 구조

1. 사용자 인터페이스

  • 사용자가 접근할 수 있는 영역
  • 주소 표시줄, 이전/다음 버튼, 등등 브라우저 상단 메뉴들

2. 브라우저 엔진

  • 사용자 인터페이스와 렌더링 엔진 사이 동작 제어
  • Data storage 를 참조에 데이터을 쓰고 읽으며 다양한 작업을 한다.

3. ⭐렌더링 엔진⭐

  • 웹 서버에서 응답받은 자원을 웹 브라우저 상에 나타낸다.
  • HTML, CSS를 Parsing 하여 화면에 표시한다.
  • 브라우저의 동작 원리를 파악하기 위해선 렌더링 엔진의 이해가 중요하다.

4. 통신

  • HTTP 요청 등, 서버와 토잇ㄴ이 가능하게 하는 네트워크 호출에 사용된다.

5. UI 백엔드

  • select, input 등 기본적인 위젯을 그리는 interface

6. JS 해석기

  • JS 코드를 해석하고 실행한다.

7. 자료 저장소

  • 쿠키, local storage, Indexed DB등 브라우저 메모리를 활용하여 저장하는 영역

렌더링 엔진

HTML Parser와 CSS Parser가 Parsing되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합한다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 나타낸다.

빠르게 페이지를 띄워주기 위해서 일련의 과정은 비동기적으로 진행된다. HTML을 파싱할 때 렌더 트리 배치와 그리기 과정을 동시에 수행한다.

렌더링 엔진 동작 과정

  1. 렌더링 엔진은 HTML 문서를 파싱하여 DOM 트리를 구축한다.
  2. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.
  3. DOM 트리와 2번 과정의 결과물을 합쳐 렌더 트리를 구축한다.
  4. 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정한다.
  5. UI 백엔드에서 렌더 트리의 각 노드를 그린다.

  • DOM 트리

  • CSSOM(CSS object Model) 생성

  • 렌더 트리(DOM+CSSOM) 생성

  • DOM 트리가 구축되는 동안 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성한다.

  • 렌더 트리는 문서를 시각적인 구성 요소로 만들어주는 역할을 한다.

Javascript는 어떻게 동작하는가?

  • Javascript는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.
  • HTML 파서는 script 태그를 만나면 DOM생성 프로세스를 멈추고 자바스크립트 엔진으로 권한을 넘긴다.
  • 태그 내의 JS 코드 등 src 속성에 정의된 JS파일을 로드하고 파싱해서 실행한다.
  • 이후 다시 HTML 파서로 권한을 받고 DOM 생성을 재개한다.
  • 이러한 과정에서 알 수 있듯이 JS 코드가 모두 로드되지 않은 상태에서 DOM을 조작하면 에러가 난다. 그렇기 때문에 script는 구문은 body 태그 하단에 위치시켜서 코드 분리를 해주는 것이 좋다.
  • React에서 ReactDOM, VirtualDOM 등 공부하기 앞서 배워두기에 좋은 자료이다. 원문 작성자 분이 잘 정리해주셔서 두 세번씩 곱씹어 읽어보면 이해도 잘 되고 재밌다.

브라우저 동작 원리 출처
자바스크립트 동작 원리

profile
cad
Dare mighty things!
다음 포스트

Bootcamp : 2주차 개발일지

0개의 댓글