해당 글은 https://nextjs.org/ 공식 문서를 통해 학습한 내용입니다.
브라우저가 코드를 해석하고 UI 생성하는 방법
Parsing HTML/CSS to construct the DOM Tree
- 사용자가 웹페이지 방문하면 서버는 HTML, CSS 파일을 브라우저에 전달
- HTML 파일을 해석하여 DOM(Document Object Model) 트리를 생성
- CSS 파일을 해석하여 스타일 규칙(Style Rules)을 생성
Render tree construction
- DOM Tree와 Style Rules를 합쳐 렌더 트리 생성
- 렌더 트리는 실제로 화면에 표시되는 요소들의 트리 형태의 모델로, 화면에 그려질 요소들만을 포함
Layout of the render tree
- 만들어진 렌더 트리를 기준으로 스타일 정보(CSS), 구조(DOM)을 합쳐 매칭
- 화면에 어떻게 배치할지 결정 : 픽셀 떨어진 위치 등
Painting the render tree
- 결정된 사항을 통해 UI를 그림
DOM이란?
DOM은 HTML 요소의 객체 표현
DOM 메서드와 JavaScript를 사용하여 UI에서 특정 요소를 선택, 추가, 업데이트 및 삭제 가능
사용자 이벤트를 수신하여 DOM을 조작
- 특정 요소를 대상으로 지정 가능
- 해당 스타일과 콘텐츠를 변경
JavaScript 및 DOM 메서드 사용하는 방법
html 파일 만들기
<!-- index.html -->
<html>
<body>
<div></div>
</body>
</html>
요소를 타겟팅할 수 있도록 div에 고유값 부여
<!-- index.html -->
<html>
<body>
<div id="app"></div>
</body>
</html>
html 파일 내 JavaScript 작성을 위한 태그 추가
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript"></script>
</body>
</html>
script 태그 내에서 DOM 메서드 사용
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>
DOM 메서드를 통해 새 요소 생성
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// 'app' id를 가진 div 요소 선택
const app = document.getElementById('app');
// 새로운 H1 요소 생성
const header = document.createElement('h1');
// H1 요소에 텍스트 노드 생성
const headerContent = document.createTextNode(
'Develop. Preview. Ship. 🚀',
);
// 텍스트를 H1 요소에 추가
header.appendChild(headerContent);
// H1 요소를 div 안에 추가
app.appendChild(header);
</script>
</body>
</html>
DOM과 HTML의 비교
- DOM은 JavaScript 코드에 의해 변경된 업데이트된 페이지 콘텐츠를 나타냄.
- HTML은 초기 페이지 컨텐츠로, 변경이 일어나기전의 코드를 나타냄.
'Frontend > Next.js' 카테고리의 다른 글
| React에서 Next.js로 전환하기 (0) | 2023.05.07 |
|---|