Skip to content

Commit 981e8c2

Browse files
lazy-dinosaurlazy-dinosaur
committed
update post
1 parent 3746b3e commit 981e8c2

17 files changed

+106
-90
lines changed

‎content/posts/자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가.md renamed to ‎content/posts/자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ tags:
44
- web
55
- javascript
66
createdAt: 2025-04-14 09:46:13
7-
modifiedAt: 2025-04-15 14:50:17
7+
modifiedAt: 2025-04-16 09:26:38
88
publish: 자원/웹개발
99
related: ""
1010
series: ""
1111
---
1212

13-
# Javascript가 웹사이트를 어떻게 조작할 수 있는가
13+
# Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념
1414

1515
웹사이트는 [[HTML]] 과 [[CSS]] 를 통해 기본적인 구조와 형태가 정해진다. 그리고 Javascript로 이 웹사이트를 조작할 수 있는데 그렇다고 해서 파일 자체를 수정할 순 없다.
16-
렌더링이 필요한 이유가 어겨기에 있다고 생각해도 될것같다. 브라우져가 HTML과 CSS를 이해하고 프로그램화 하는 과정이 렌더링 과정이라고 생각된다. 이 [[웹사이트는 어떻게 보여지는가|브라우저의 렌더링 과정]]중 브라우저가 Javascript를 통해 조작이 가능하도록 이해하고 인터페이스를 만드는 과정이 있는데 그것이 바로 파싱을 통해 [[DOM(Document Object Model)]]과 [[CSSOM(CSS Object Model)]]을 생성하는 과정이다.
16+
렌더링이 필요한 이유가 어겨기에 있다고 생각해도 될것같다. 브라우져가 HTML과 CSS를 이해하고 프로그램화 하는 과정이 렌더링 과정이라고 생각된다. 이 [[웹사이트는 어떻게 보여지는가-브라우저의 렌더링|브라우저의 렌더링 과정]]중 브라우저가 Javascript를 통해 조작이 가능하도록 이해하고 인터페이스를 만드는 과정이 있는데 그것이 바로 파싱을 통해 [[DOM(Document Object Model)]]과 [[CSSOM(CSS Object Model)]]을 생성하는 과정이다.

‎content/posts/자원/웹개발/동적 사이트 vs 정적사이트.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,31 @@ tags:
33
- resource
44
- web
55
createdAt: 2025-03-10 07:39:08
6-
modifiedAt: 2025-04-14 19:22:41
6+
modifiedAt: 2025-04-16 08:52:13
77
publish: 자원/웹개발
88
related: ""
99
series: ""
1010
---
1111

1212
# 동적 사이트 vs 정적사이트
1313

14-
복잡하게 생각하지 말고 단순하게 동적 사이트와 정적 사이트를 구분한다면 페이지의 렌더링 **_(화면 렌더링 아님)_** 시기 이다.
14+
복잡하게 생각하지 말고 단순하게 동적 사이트와 정적 사이트를 구분한다면 페이지의 렌더링 (**화면 렌더링 아님**) 시기 이다.
1515

1616
정적 사이트는 HTML이 빌드 타임에 미리 생성되고 수정되지 않는다.
1717
하지만 동적 사이트의 경우 클라이언트 측이든 서버 측이든 요청에 따라 HTML 이 생성되게 된다.
1818

1919
> [!caution] 화면 렌더링(브라우저의 렌더링) 과 페이지 렌더링의 차이
2020
> 동적 사이트와 정적사이트에서 표현하는 렌더링은 HTML에 대한 렌더링 이다. 즉 코드를 HTML 로 변환하는 과정을 말한다.
2121
> 화면에 대한 렌더링은 이 완성된 HTML 과 CSS 를 웹브라우져가 화면에 그려 표현해주는것을 뜻한다.
22-
> 참고: [[웹사이트는 어떻게 보여지는가]]
22+
> 참고: [[웹사이트는 어떻게 보여지는가-브라우저의 렌더링]]
2323
2424
## CSR,SSR,SSG
2525

2626
CSR(Client Side Rendering) 과 SSR(Server Side Rendering) 의 경우 동적 사이트로 분류될 수 있다. 왜냐하면 HTML 의 렌더링 시기 때문이다.
2727
SSR의 경우 요청에 따라 Javascript 가 담겨있는 HTML을 받아와 해당 javascript 코드를 실행하여 직접 HTML을 생성하여 렌더링 하게 된다. SSR의 경우 요청에 따라 서버 측에서 HTML 을 생성하여 클라이언트로 전송한다.
2828

29-
CSR과 SSR둘 다 요청 이후에 필요에 따라 HTML이 새로 만들어지며 이 때문에 **_동적 사이트_** 방식으로 분류될 수 있다.
29+
CSR과 SSR둘 다 요청 이후에 필요에 따라 HTML이 새로 만들어지며 이 때문에 **동적 사이트** 방식으로 분류될 수 있다.
3030

31-
SSG의 경우 HTML 을 빌드 타임에 미리 생성하게 되기 때문에 **_정적 사이트_**로 분류될 수 있다.
31+
SSG의 경우 HTML 을 빌드 타임에 미리 생성하게 되기 때문에 **정적 사이트**로 분류될 수 있다.
3232

3333
참고: [[CSR vs SSR vs SSG]]

‎content/posts/자원/웹개발/웹사이트는 어떻게 구성되어있나.md renamed to ‎content/posts/자원/웹개발/웹사이트는 어떻게 구성되어있나-HTML과 CSS와 Javascript의 이해.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ tags:
33
- resource
44
- web
55
createdAt: 2025-04-14 09:18:21
6-
modifiedAt: 2025-04-15 14:16:00
6+
modifiedAt: 2025-04-16 08:29:36
77
publish: 자원/웹개발
88
related: ""
99
series: ""
1010
---
1111

12-
# 웹사이트는 어떻게 구성되어있나
12+
# 웹사이트는 어떻게 구성되어있나-HTML과 CSS와 Javascript의 이해
1313

1414
웹 사이트가 브라우저 상에서 우리의 눈으로 보여지기 위해서는 *우리가 원하는 모습을 브라우저에게 인식*시켜야 한다.
1515
이 문서의 구조와 형태를 브라우저에게 이해시키는 언어가 바로 _[[HTML]]_ 과 *[[CSS]]*이다.
@@ -23,5 +23,5 @@ HTML 의 경우 문서가 어떤 *구조*로 구성되어 있는지 브라우저
2323
2424
## 궁금한점
2525

26-
- [[웹사이트는 어떻게 보여지는가]]
27-
- [[Javascript가 웹사이트를 어떻게 조작할 수 있는가]]
26+
- [[웹사이트는 어떻게 보여지는가-브라우저의 렌더링]]
27+
- [[Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념]]

‎content/posts/자원/웹개발/웹사이트는 어떻게 보여지는가-브라우저의 렌더링.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
tags:
3+
- resource
4+
- web
5+
createdAt: 2025-04-14 14:30:49
6+
modifiedAt: 2025-04-16 09:26:16
7+
publish: 자원/웹개발
8+
related: ""
9+
series: ""
10+
---
11+
12+
# 웹사이트는 어떻게 보여지는가-브라우저의 렌더링
13+
14+
웹사이트는 [[웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정|사용자의 요청]]에 따라 [[웹사이트는 어떻게 구성되어있나-HTML과 CSS와 Javascript의 이해|웹사이트를 구성]]하는 [[HTML]]과 [[CSS]] [[Javascript]]를 전달받고 이 파일들을 **브라우저가 이해하고 렌더링**하는 과정을 거쳐 눈에 보여지게 된다.
15+
16+
## 브라우저의 렌더링 과정
17+
18+
브라우저는 HTML 과 CSS를 바로 이해하지 못한다 따라서 이해하고 화면에 그릴 수 있도록 하는 일련의 과정을 거친다. 그리고 이 과정을 **Critical Rendering Path**라고 부른다.
19+
20+
1. HTML 파싱과 DOM 생성
21+
22+
첫번째로 브라우져는 서버로 부터 받은 **HTML을 파싱하여 점진적으로 DOM(Document Object Model)을 생성**한다. 파싱 과정은 첫줄부터 순차적으로 진행된다
23+
24+
2. CSS 파싱과 CSSOM 생성
25+
26+
파싱하는 도중 `<link rel="stylesheet">`태그를 만나면 CSS 파일을 요청하고 파싱하여 **CSSOM(CSS Object Model)을 생성**한다. CSS는 렌더링 차단 리소스로, HTML 파싱은 계속될 수 있지만 **최종 렌더링은 CSSOM이 완성될 때까지 지연**될 수 있다.
27+
28+
3. Javascript 처리
29+
30+
HTML **파싱 중 `<script>`태그를 만나면 HTML 파싱은 즉시 일시 중단**된다.스크립트 실행 전, 해당 스크립트 이전에 선언된 모든 CSS가 로드되고 파싱될 때까지 Javascript실행이 차단된다(Javascript가 CSSOM에 접근할 수 있기 때문). 이후 **Javascript 처리가 끝나면 HTML파싱이 중단된 시점부터 재게**된다. 하지만 **`defer`나 `async`속성이 있는 스크립트느 HTML파싱을 차단하지 않고 다른 방식으로 처리**된다.
31+
32+
4. Render Tree 생성
33+
34+
HTML과 CSS 파싱은 둘 다 **점진적으로 진행**되며 DOM과 CSSOM이 생성되면 **두 트리를 결합하여 Render Tree를 생성**한다. 이때 화면에 표시되지 앟는 요소들을 배제한다(`display:none`적용된 요소, `<head>` 내의 요소 등).
35+
36+
5. Layout
37+
38+
이렇게 Render Tree 가 생성되면 Layout 단계를 거쳐 Render Tree의 노드와 그 관계되는 각 **요소들이 화면에 위치해야 하는 위치와 크기를 설정**한다.
39+
40+
6. Paint
41+
42+
Paint 단계로 넘어가 Render Tree의 **각 노드를 화면에 그리게 된다**. 이때 색상, 이미지, 그림자 등 시각적 요소가 처리된다. 이 때 시각적 요소에 따라 필요하다면 여러 레이어들을 생성하게 된다.
43+
44+
7. Compositing
45+
46+
생성된 여러 **레이어를 합성하여 최종 화면을 화면에 표시**한다. CSS 의 Z-index에 의해 쌓이는 순서가 결정된다. 이 레이어 합성은 주로 GPU를 활용하여 처리하여 에니메이션이나 전환 효과의 성능을 향상시킨다.

‎content/posts/자원/웹개발/웹사이트는 어떻게 보여지는가.md

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎content/posts/자원/웹개발/웹사이트에 들어갈때에는 어떤 일이 생기는가.md renamed to ‎content/posts/자원/웹개발/웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ tags:
33
- resource
44
- web
55
createdAt: 2025-04-14 16:19:40
6-
modifiedAt: 2025-04-15 14:23:32
6+
modifiedAt: 2025-04-16 08:30:03
77
publish: 자원/웹개발
88
related: ""
99
series: ""
1010
---
1111

12-
# 웹사이트에 들어갈때에는 어떤 일이 생기는가
12+
# 웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정
1313

1414
브라우저에 웹사이트가 화면에 나타나기 까지엔 다음과 같은 과정이 필요하다
1515

@@ -31,4 +31,4 @@ series: ""
3131
6. 렌더링 과정
3232
HTML 과 CSS 를 파싱하여 각각 DOM tree 와 CSSOM tree 만들고 둘을 합쳐 렌더 트리를 생성한다. 이후 Javascript를 처리한다. 이후 파싱한 DOM 과 CSSOM 을 쳐 Render tree를 만들고 레이아웃 과정을 통해 뷰포트에 표시될 각 요소들의 크기와 위치를 계산하고 페인트 단계를 거쳐 렌더트리의 각 노드를 화면에 그리고 마지막 컴포지팅 단계에서 여러 레이어로 나뉜 페이지의 요소들을 합성하여 최종 화면을 만든다.
3333

34-
- 참고:[[웹사이트는 어떻게 보여지는가]]
34+
- 참고:[[웹사이트는 어떻게 보여지는가-브라우저의 렌더링]]

‎public/link-map.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"3.resource/SWEA강의/SWEA 강의 정리노트.md": "자원/SWEA 강의 정리노트/SWEA 강의 정리노트",
3-
"3.resource/Web/Javascript가 웹사이트를 어떻게 조작할 수 있는가.md": "자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가",
43
"3.resource/Web/동적 사이트 vs 정적사이트.md": "자원/웹개발/동적 사이트 vs 정적사이트",
5-
"3.resource/Web/웹사이트는 어떻게 보여지는가.md": "자원/웹개발/웹사이트는 어떻게 보여지는가",
6-
"3.resource/Web/웹사이트는 어떻게 구성되어있나.md": "자원/웹개발/웹사이트는 어떻게 구성되어있나",
7-
"3.resource/Web/웹사이트에 들어갈때에는 어떤 일이 생기는가.md": "자원/웹개발/웹사이트에 들어갈때에는 어떤 일이 생기는가",
84
"3.resource/Web/HTTP(Hypertext Transfer Protocol).md": "자원/웹개발/HTTP(Hypertext Transfer Protocol)",
5+
"3.resource/Web/웹사이트는 어떻게 보여지는가-브라우저의 렌더링.md": "자원/웹개발/웹사이트는 어떻게 보여지는가-브라우저의 렌더링",
6+
"3.resource/Web/웹사이트는 어떻게 구성되어있나-HTML과 CSS와 Javascript의 이해.md": "자원/웹개발/웹사이트는 어떻게 구성되어있나-HTML과 CSS와 Javascript의 이해",
7+
"3.resource/Web/웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정.md": "자원/웹개발/웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정",
8+
"3.resource/Web/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념.md": "자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념",
99
"3.resource/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기.md": "자원/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기",
1010
"3.resource/AI/tools/Aider.md": "자원/ai/Aider",
1111
"1.project/취업을 위한 알고리즘 공부/취업을 위한 알고리즘 공부.md": "프로젝트/알고리즘/취업을 위한 알고리즘 공부",

‎public/meta-data.json

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,69 +11,69 @@
1111
"publish": "자원/SWEA 강의 정리노트"
1212
},
1313
{
14-
"urlPath": "자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가",
15-
"title": "Javascript가 웹사이트를 어떻게 조작할 수 있는가",
14+
"urlPath": "자원/웹개발/동적 사이트 vs 정적사이트",
15+
"title": "동적 사이트 vs 정적사이트",
1616
"summary": "",
1717
"image": "",
18-
"tags": ["resource", "web", "javascript"],
18+
"tags": ["resource", "web"],
1919
"series": "",
20-
"createdAt": "2025-04-14 09:46:13",
21-
"modifiedAt": "2025-04-15 14:50:17",
20+
"createdAt": "2025-03-10 07:39:08",
21+
"modifiedAt": "2025-04-16 08:52:13",
2222
"publish": "자원/웹개발"
2323
},
2424
{
25-
"urlPath": "자원/웹개발/동적 사이트 vs 정적사이트",
26-
"title": "동적 사이트 vs 정적사이트",
25+
"urlPath": "자원/웹개발/HTTP(Hypertext Transfer Protocol)",
26+
"title": "HTTP(Hypertext Transfer Protocol)",
2727
"summary": "",
2828
"image": "",
2929
"tags": ["resource", "web"],
3030
"series": "",
31-
"createdAt": "2025-03-10 07:39:08",
32-
"modifiedAt": "2025-04-14 19:22:41",
31+
"createdAt": "2025-04-15 15:05:31",
32+
"modifiedAt": "2025-04-15 17:54:01",
3333
"publish": "자원/웹개발"
3434
},
3535
{
36-
"urlPath": "자원/웹개발/웹사이트는 어떻게 보여지는가",
37-
"title": "웹사이트는 어떻게 보여지는가",
36+
"urlPath": "자원/웹개발/웹사이트는 어떻게 보여지는가-브라우저의 렌더링",
37+
"title": "웹사이트는 어떻게 보여지는가-브라우저의 렌더링",
3838
"summary": "",
3939
"image": "",
4040
"tags": ["resource", "web"],
4141
"series": "",
4242
"createdAt": "2025-04-14 14:30:49",
43-
"modifiedAt": "2025-04-14 18:56:02",
43+
"modifiedAt": "2025-04-16 09:26:16",
4444
"publish": "자원/웹개발"
4545
},
4646
{
47-
"urlPath": "자원/웹개발/웹사이트는 어떻게 구성되어있나",
48-
"title": "웹사이트는 어떻게 구성되어있나",
47+
"urlPath": "자원/웹개발/웹사이트는 어떻게 구성되어있나-HTML과 CSS와 Javascript의 이해",
48+
"title": "웹사이트는 어떻게 구성되어있나-HTML과 CSS와 Javascript의 이해",
4949
"summary": "",
5050
"image": "",
5151
"tags": ["resource", "web"],
5252
"series": "",
5353
"createdAt": "2025-04-14 09:18:21",
54-
"modifiedAt": "2025-04-15 14:16:00",
54+
"modifiedAt": "2025-04-16 08:29:36",
5555
"publish": "자원/웹개발"
5656
},
5757
{
58-
"urlPath": "자원/웹개발/웹사이트에 들어갈때에는 어떤 일이 생기는가",
59-
"title": "웹사이트에 들어갈때에는 어떤 일이 생기는가",
58+
"urlPath": "자원/웹개발/웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정",
59+
"title": "웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정",
6060
"summary": "",
6161
"image": "",
6262
"tags": ["resource", "web"],
6363
"series": "",
6464
"createdAt": "2025-04-14 16:19:40",
65-
"modifiedAt": "2025-04-15 14:23:32",
65+
"modifiedAt": "2025-04-16 08:30:03",
6666
"publish": "자원/웹개발"
6767
},
6868
{
69-
"urlPath": "자원/웹개발/HTTP(Hypertext Transfer Protocol)",
70-
"title": "HTTP(Hypertext Transfer Protocol)",
69+
"urlPath": "자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념",
70+
"title": "Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념",
7171
"summary": "",
7272
"image": "",
73-
"tags": ["resource", "web"],
73+
"tags": ["resource", "web", "javascript"],
7474
"series": "",
75-
"createdAt": "2025-04-15 15:05:31",
76-
"modifiedAt": "2025-04-15 17:54:01",
75+
"createdAt": "2025-04-14 09:46:13",
76+
"modifiedAt": "2025-04-16 09:26:38",
7777
"publish": "자원/웹개발"
7878
},
7979
{

0 commit comments

Comments
 (0)