Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cf9e5e6

Browse files
Update www.naver.com 을 입력하면 무슨일이 일어나는가_브라우저편 .md
1 parent b9c21c8 commit cf9e5e6

File tree

1 file changed

+19
-17
lines changed

1 file changed

+19
-17
lines changed

‎[CS_09]네트워크 /www.naver.com 을 입력하면 무슨일이 일어나는가_브라우저편 .md

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ Created time: 2023년 7월 30일 오전 12:46
66
## Q. [WWW.NAVER.COM](http://WWW.NAVER.COM) 을 입력하면 무슨 일이 일어나나요? (#1 브라우저 편)
77

88
---
9+
![image](https://github.com/versatile0010/Algorithm-and-Computer-Science/assets/96612168/d69787a3-02ed-4d92-bc94-865fb87993fa)
910

10-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled.png)
1111

1212
## `Step1. Handling Input: URL 창에 text 입력`
1313

@@ -16,16 +16,14 @@ Created time: 2023년 7월 30일 오전 12:46
1616
- 검색어이면 검색 엔진에 해당 검색어를 보내서 검색할 준비를 한다.
1717
- URL 이면 network thread 로 URL 값을 전달할 준비를 한다.
1818

19-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled%201.png)
19+
![image](https://github.com/versatile0010/Algorithm-and-Computer-Science/assets/96612168/83b9e7e6-97dd-4435-a3d4-08c8896fa566)
20+
2021

2122
## `Step2. Start Navigation: enter 키 입력!`
2223

2324
- UI thread 가 네트워크 호출(network thread 에게 URL 을 전달한다.)을 시작한다.
2425
- **질문) 왜 Network Thread 가 아닌 UI Thread 가 네트워크 호출을 시작하는 역할을 맡는가?**
2526
- **정답보기**
26-
27-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled%202.png)
28-
2927
검색창 좌측에 보면 돌아가는 파란 원이 있다.
3028
이러한 UI 작업은 UI Thread 가 담당하는데, 사용자에게 네트워크 호출 상황에 따른 UI 를 보여주기 위해 UI Thread 에게 네트워크 호출 역할을 맡긴 것이다!
3129

@@ -34,19 +32,20 @@ Created time: 2023년 7월 30일 오전 12:46
3432
- 그러면 UI thread 는 다른 network 를 호출하려 시도한다.
3533
- redirect response 가 아니라면 다음 Step 으로!
3634

37-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled%203.png)
35+
![image](https://github.com/versatile0010/Algorithm-and-Computer-Science/assets/96612168/af63547a-397a-4ddf-9ed9-7e045122a226)
36+
3837

3938
## `Step 3. Read Response: response body 가 Network thread 로 들어오는 경우`
4039

4140
- 필요에 따라 Network thread 는 response 의 데이터 스트림을 읽는다.
4241
- response header 에서 content-type 을 확인한다.
43-
44-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled%204.png)
45-
42+
![image](https://github.com/versatile0010/Algorithm-and-Computer-Science/assets/96612168/245dc100-e0c9-453a-b97e-0bd23e09f55a)
43+
4644
- HTML 형식이면 Renderer process 에게 해당 파일을 전달할 준비를 한다.
4745
- HTML 이 아니면 Download manager 에게 파일을 전달할 준비를 한다.
4846
49-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled%205.png)
47+
![image](https://github.com/versatile0010/Algorithm-and-Computer-Science/assets/96612168/a5fbb3af-8ec6-4275-8f8f-4b715c25d399)
48+
5049
5150
- **SafeBrowsing**
5251
- 해당 domain 혹인 data 가 의심스러운 경우에는 경고 페이지를 보여준다.
@@ -61,16 +60,17 @@ Created time: 2023년 7월 30일 오전 12:46
6160
아니다! 그렇게 되면 사용자 입장에서 너무 답답함.
6261
이전 단계를 생각해보자. UI Thread 는 Step 2. 에서 Network Thread 에게 target URL 을 전달한 뒤 Step 4. 까지 오는 동안(Network Thread 가 작업하는 동안) 미리 Renderer process 를 찾는다. 그렇게 해서 최대한 delay 를 줄이는 것.
6362

63+
![image](https://github.com/versatile0010/Algorithm-and-Computer-Science/assets/96612168/b51807cf-89a3-419b-8012-7d234de913c9)
6464

65-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled%206.png)
6665

6766
## `Step 5. Commit Navigation: data, Renderer process 가 준비됨`
6867

6968
- HTML 파일은 Browser Process (내부의 UI Thread)가 가지고 있고, 이를 렌더링하기 위해서는 Renderer Process 에게 HTML 을 전달해주어야 한다.
7069
- 프로세스 → 프로세스 간 통신이 발생한다.
7170
이는 **`IPC ( Inter Process Communication )`** 라고 한다. ****
7271

73-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled%207.png)
72+
![image](https://github.com/versatile0010/Algorithm-and-Computer-Science/assets/96612168/994191f6-df67-40e4-9648-5fb85d939f9a)
73+
7474

7575
- **********질문)********** 프로세스와 프로그램, 그리고 쓰레드의 차이점이 무엇인가요?
7676
- **정답보기**
@@ -85,17 +85,19 @@ Created time: 2023년 7월 30일 오전 12:46
8585

8686
- 멀티 프로세스 환경에서는 여러 프로세스가 동시에 존재하는데, 각각은 독립적인 메모리를 할당받으므로 데이터를 전달하기 위해서는 IPC 를 활용한다.
8787

88-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled%208.png)
88+
![image](https://github.com/versatile0010/Algorithm-and-Computer-Science/assets/96612168/ddf10825-d650-43fe-baf5-96549ca0977c)
89+
8990

9091
- 커널이 제공하는 API 를 이용해서, 송신 프로세스는 Message Queue 에 enqueue 하고 수신 프로세스는 Message Queue 에 dequeue 해서 통신을 수행할 수 있다.
9192
- 혹은 프로세스 간 특정 공통 메모리 영역을 공유하도록 하여 상호 통신을 수행하는 방법도 있다.
9293

93-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled%209.png)
94-
94+
![image](https://github.com/versatile0010/Algorithm-and-Computer-Science/assets/96612168/ea78394a-89af-4b8c-8c47-8076c8415d82)
95+
9596

9697
- 여튼 UI Thread 가 Renderer Process 에게 HTML file 을 IPC 를 통해 전달을 한다.
97-
98-
![Untitled](www%20naver%20com%20%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%84%E1%85%A2%E1%84%86%E1%85%AE%E1%84%89%E1%85%B3%E1%86%AB%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%B5%20(%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%20a8e5e1e3f7f34f24ac38e9e134357ff4/Untitled%2010.png)
98+
99+
![image](https://github.com/versatile0010/Algorithm-and-Computer-Science/assets/96612168/c24ac14f-d91c-49cb-9ceb-ef83b28d47e9)
100+
99101

100102
- 그러면 Renderer Process 는 Browser Rendering 을 수행한다.
101103
- **브라우저 렌더링이란?**

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /