[SeSAC] 웹 풀스택 과정_JavaScript DOM(1)

 

시작

자바스크립트 언어는 웹 브라우저, 웹 서버 또는 그외 다른곳에서 동작할 수 있습니다. 각각 동작하는 곳들을 호스트 라고 합니다. 자바스크립트로 작성된 코드가 웹 브라우저에서 동작한다면 호스트는 웹 브라우저 입니다. 웹 브라우저는 자바스크립트 코드가 잘 동작할 수 있도록 기능들을 제공하고 이 기능들을 우선은 라이브러리(API),객체 라고 이해해도 될것 같습니다. 이렇게 호스트들이 제공하는 기능들까지 포함해서 호스트 환경 이라고 합니다.

 

이번 회고에서는 호스트 환경이 웹브라우저일때 브라우저에서 제공하는 기능중 하나인 DOM에 대해서 학습하고 내용 정리해 보겠습니다.

 

웹 브라우저에서 제공해주는 기능들 일부 / 출처. 모던자바스크립트 튜토리얼

- window : 자바스크립트 코드의 최상단 전역 객체

- DOM(Document Object Model)

- BOM(Browser Object Model)

 

 

1. DOM 과 BOM ( feat. CSSOM)

 

 - DOM (Document Object Model)

- DOM은 XML, HTML 문서에 접근하기위한 일종의 인터페이스 이며 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
- DOM은 문서 내의 모든 컨텐츠를 수정 가능한 객체화 하고 계층 구조로 정의합니다. 이 객체는 수정이 가능합니다.

 

 - BOM(Browser Object Model)

BOM은 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타냅니다.

 - navigator 객체 : 브라우저와 운영체제에 대한 정보를 제공

 - location 객체 : 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해줌

 - alert : 브라우저에 경고창 띄우기

 - confirm : 브라우저에 선택창 띄우기

 - prompt : 브라우저에 입력창 띄우기

 

 - CSSOM(CSS Object Model)

JavaScript에서 CSS를 조작할 수 있는 API 이며 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다.

CSSOM은 문서에 쓰이는 스타일 규칙을 수정할 때 DOM과 함께 쓰입니다. 자바스크립트를 이용해 CSS 규칙을 추가 혹은 제거해야 하는 경우는 극히 드물긴 하지만, 이때 CSSOM이 사용됩니다.

 

 

2. 웹 브라우저가 웹 페이지를 브라우저 화면에 표시하는 과정

HTML파일을 읽어 DOM 생성 -> 자바 스크립트로 DOM 제어 -> CSS를 읽어 CSSOM 생성 -> DOM과 CSSOM 을 조합해서브라우저에 화면을 출력

출처. https://velog.io/@yejineee/DOM%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-DOM-Node%EC%99%80-Element%EC%9D%98-%EC%B0%A8%EC%9D%B4

자바스크립트는 인터페이스(API)인 DOM에 접근할 수 있으며, DOM 생성 후, 화면에 웹페이지가 표시되기 전에 DOM을 제어할 수도 있습니다. 웹브라우저로 웹사이트의 특정 페이지에 접속할 경우 웹브라우저는 HTML 문서를 읽습니다. 그리고 CSS와 여러가지 컨텐츠 파일들도 함께 읽습니다. 그리고 그것들을 조합해 웹 페이지를 브라우저 화면에 표시합니다. 웹브라우저는 이 과정을 2단계로 나누어서 실행합니다.

먼저 HTML 파일을 읽어 문서의 구조를 파악하고, 트리 형태로 된 데이터 구조를 만듭니다. 이것이 DOM 입니다. DOM이 일단 완성되고 나면, 자바스크립트와 같은 프로그래밍 언어가 DOM을 제어할 수 있게 됩니다. 웹브라우저가 화면에 웹페이지를 표시하는 단계로 넘어가기 전에 실행되는 자바스크립트가 DOM을 제어합니다. DOM 제어가 끝나면 웹브라우저는 DOM 구조를 기반으로 화면에 웹페이지를 그리는 렌더링(Rendering) 과정을 진행합니다.

렌더링에는 CSS 파일의 화면 배치와 속성에 대한 정보를 사용합니다. 이 과정에서 웹브라우저는 DOM과 마찬가지로 CSS를 읽어 CSSOM(Cascading Style Sheet Object Model) 을 생성합니다. CSS를 구조화 된 데이터 형태로 생성한 것입니다.

DOM 과 CSSOM을 조합해 화면에 표시할 최종 구조를 만듭니다. 이것이 렌더트리입니다. 렌더트리를 기초로 화면에 HTML 페이지를 그립니다. 배치가 되면서 컨텐츠 파일들 또한 비동기로 읽어서 HTML 페이지의 맞는 위치에 배치를 합니다.