Skip to content

Commit e29fdda

Browse files
HaedalKangHaedalKang
committed
weak2
1 parent 362e3ec commit e29fdda

9 files changed

+972
-7129
lines changed

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ C# Dotnet으로 배우는 백엔드 기초
1212

1313
- [Backend 1일차 : ASP.NET Core 소개, C# 베이직, MVC 디자인 패턴, REST API, 환경 구축](./day1/README.md)
1414
- [Web개발의 이해](./day1/content/01_Web_개발의_이해.md)
15+
- [웹 서버, 웹 애플리케이션 서버, 클라이언트 구조와 상호작용](./day1/content/01_01_Web_구조와_상호작용.md)
16+
- [URI와 URL의 이해](./day1/content/01_02_URI_URL.md)
1517
- [Backend 소개](./day1/content/02_Backend_소개.md)
18+
- [Backend Framework](./day1/content/02_01_Backend_framework.md)
19+
- [Database](./day1/content/02_02_database.md)
1620
- [ASP.NET Core 소개](./day1/content/03_ASP.NET_Core_소개.md)
1721
- [C# 베이직](./day1/content/04_CSharp_기초.md)
1822
- [MVC 디자인패턴 소개](./day1/content/05_MVC_디자인패턴_소개.md)

‎day1/README.md

+4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88

99
## 목차
1010
- [Web개발의 이해](./content/01_Web_개발의_이해.md)
11+
- [웹 서버, 웹 애플리케이션 서버, 클라이언트 구조와 상호작용](./content/01_01_Web_구조와_상호작용.md)
12+
- [URI와 URL의 이해](./content/01_02_URI_URL.md)
1113
- [Backend 소개](./content/02_Backend_소개.md)
14+
- [Backend Framework](./content/02_01_Backend_framework.md)
15+
- [Database](./content/02_02_database.md)
1216
- [ASP.NET Core 소개](./content/03_ASP.NET_Core_소개.md)
1317
- [C# 베이직](./content/04_CSharp_기초.md)
1418
- [MVC 디자인패턴 소개](./content/05_MVC_디자인패턴_소개.md)

‎day1/content/01_01_Web_구조와_상호작용.md

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
# 웹 서버, 웹 애플리케이션 서버, 클라이언트 구조와 상호작용
2+
3+
# 목차
4+
- [웹 서버, 웹 애플리케이션 서버, 클라이언트 구조와 상호작용](#웹-서버-웹-애플리케이션-서버-클라이언트-구조와-상호작용)
5+
- [목차](#목차)
6+
- [소개](#소개)
7+
- [1. 클라이언트](#1-클라이언트)
8+
- [클라이언트의 역할](#클라이언트의-역할)
9+
- [동작 원리](#동작-원리)
10+
- [예제](#예제)
11+
- [2. 웹 서버](#2-웹-서버)
12+
- [웹 서버의 역할](#웹-서버의-역할)
13+
- [대표적인 웹 서버](#대표적인-웹-서버)
14+
- [동작 원리](#동작-원리-1)
15+
- [예제](#예제-1)
16+
- [3. 웹 애플리케이션 서버](#3-웹-애플리케이션-서버)
17+
- [웹 애플리케이션 서버의 역할](#웹-애플리케이션-서버의-역할)
18+
- [대표적인 웹 애플리케이션 서버](#대표적인-웹-애플리케이션-서버)
19+
- [동작 원리](#동작-원리-2)
20+
- [예제](#예제-2)
21+
- [4. 클라이언트, 웹 서버, 웹 애플리케이션 서버의 상호작용](#4-클라이언트-웹-서버-웹-애플리케이션-서버의-상호작용)
22+
- [전체 흐름](#전체-흐름)
23+
- [예제 흐름](#예제-흐름)
24+
- [결론](#결론)
25+
- [추가 학습 자료](#추가-학습-자료)
26+
- [다음](#다음)
27+
28+
## 소개
29+
웹 기술의 기본적인 이해를 위해, 웹 서버, 웹 애플리케이션 서버, 클라이언트의 구조와 이들이 어떻게 상호작용하는지 살펴보겠습니다. 이 문서에서는 각 구성 요소의 역할과 동작 원리를 설명합니다.
30+
31+
## 1. 클라이언트
32+
33+
### 클라이언트의 역할
34+
- **사용자 인터페이스**: 사용자가 상호작용하는 웹 페이지를 제공합니다.
35+
- **웹 브라우저**: 웹 페이지를 요청하고 표시하는 소프트웨어(예: Chrome, Firefox, Edge).
36+
37+
### 동작 원리
38+
1. **URL 입력**: 사용자가 웹 브라우저에 URL을 입력합니다.
39+
2. **HTTP 요청**: 웹 브라우저가 서버에 HTTP 요청을 보냅니다.
40+
3. **응답 수신 및 렌더링**: 서버로부터 HTML, CSS, JavaScript 파일을 받아와서 웹 페이지를 렌더링합니다.
41+
42+
### 예제
43+
```text
44+
사용자가 http://example.com을 입력합니다.
45+
브라우저가 서버에 HTTP GET 요청을 보냅니다.
46+
서버가 HTML 페이지를 응답합니다.
47+
브라우저가 페이지를 렌더링하여 화면에 표시합니다.
48+
```
49+
50+
## 2. 웹 서버
51+
52+
### 웹 서버의 역할
53+
- **정적 콘텐츠 제공**: HTML, CSS, 이미지 파일 등의 정적 파일을 클라이언트에 제공합니다.
54+
- **요청 라우팅**: 웹 애플리케이션 서버로 요청을 전달합니다.
55+
56+
### 대표적인 웹 서버
57+
- **Apache**: 오픈 소스 웹 서버 소프트웨어.
58+
- **Nginx**: 고성능 웹 서버 및 리버스 프록시 서버.
59+
60+
### 동작 원리
61+
1. **요청 수신**: 클라이언트의 HTTP 요청을 수신합니다.
62+
2. **요청 처리**: 요청된 리소스가 정적 파일이면 이를 응답합니다.
63+
3. **애플리케이션 서버로 전달**: 동적 콘텐츠 요청 시, 웹 애플리케이션 서버로 요청을 전달합니다.
64+
65+
### 예제
66+
```text
67+
브라우저가 http://example.com/index.html을 요청합니다.
68+
Apache 서버가 요청을 수신하고 index.html 파일을 클라이언트에 응답합니다.
69+
```
70+
71+
## 3. 웹 애플리케이션 서버
72+
73+
### 웹 애플리케이션 서버의 역할
74+
- **동적 콘텐츠 생성**: 데이터베이스와 상호작용하여 동적 웹 페이지를 생성합니다.
75+
- **비즈니스 로직 처리**: 웹 애플리케이션의 핵심 비즈니스 로직을 처리합니다.
76+
77+
### 대표적인 웹 애플리케이션 서버
78+
- **Node.js**: JavaScript 기반의 서버 측 프레임워크.
79+
- **Django**: Python 기반의 웹 애플리케이션 프레임워크.
80+
- **Spring Boot**: Java 기반의 웹 애플리케이션 프레임워크.
81+
- **DOTNET** : C# 기반의 웹 애플리케이션 프레임워크.
82+
83+
### 동작 원리
84+
1. **요청 수신**: 웹 서버로부터 요청을 전달받습니다.
85+
2. **비즈니스 로직 처리**: 요청에 따라 필요한 비즈니스 로직을 실행합니다.
86+
3. **동적 콘텐츠 생성**: 데이터베이스와 상호작용하여 HTML 등의 동적 콘텐츠를 생성합니다.
87+
4. **응답 전송**: 생성된 동적 콘텐츠를 웹 서버를 통해 클라이언트에 전송합니다.
88+
89+
### 예제
90+
```text
91+
브라우저가 http://example.com/data를 요청합니다.
92+
Nginx 서버가 요청을 Node.js 애플리케이션 서버로 전달합니다.
93+
Node.js 서버가 데이터베이스에서 데이터를 가져와 HTML 페이지를 생성합니다.
94+
생성된 HTML 페이지를 Nginx 서버를 통해 클라이언트에 응답합니다.
95+
```
96+
97+
## 4. 클라이언트, 웹 서버, 웹 애플리케이션 서버의 상호작용
98+
99+
### 전체 흐름
100+
1. **클라이언트 요청**: 사용자가 웹 브라우저에서 URL을 입력하여 HTTP 요청을 보냅니다.
101+
2. **웹 서버 처리**: 웹 서버가 요청을 수신하고 정적 콘텐츠 요청인지 확인합니다.
102+
- **정적 콘텐츠**: HTML, CSS, 이미지 등의 정적 파일을 직접 응답합니다.
103+
- **동적 콘텐츠**: 요청을 웹 애플리케이션 서버로 전달합니다.
104+
3. **애플리케이션 서버 처리**: 웹 애플리케이션 서버가 비즈니스 로직을 처리하고 동적 콘텐츠를 생성합니다.
105+
4. **응답 전송**: 생성된 동적 콘텐츠를 웹 서버를 통해 클라이언트에 응답합니다.
106+
5. **클라이언트 렌더링**: 클라이언트가 수신한 HTML, CSS, JavaScript 파일을 렌더링하여 화면에 표시합니다.
107+
108+
### 예제 흐름
109+
```text
110+
1. 사용자가 http://example.com/profile을 입력합니다.
111+
2. 웹 브라우저가 Nginx 웹 서버에 HTTP GET 요청을 보냅니다.
112+
3. Nginx 웹 서버가 요청을 Node.js 애플리케이션 서버로 전달합니다.
113+
4. Node.js 서버가 데이터베이스에서 사용자 프로필 데이터를 가져와 HTML 페이지를 생성합니다.
114+
5. 생성된 HTML 페이지를 Nginx 서버를 통해 클라이언트에 응답합니다.
115+
6. 클라이언트 웹 브라우저가 HTML 페이지를 렌더링하여 사용자에게 표시합니다.
116+
```
117+
118+
## 결론
119+
웹 서버, 웹 애플리케이션 서버, 클라이언트는 웹 애플리케이션의 핵심 구성 요소입니다. 이들은 서로 상호작용하여 사용자가 입력한 요청을 처리하고, 웹 페이지를 제공하는 역할을 합니다. 각 구성 요소의 역할과 동작 원리를 이해하면 웹 애플리케이션의 작동 방식을 더 잘 이해할 수 있습니다.
120+
121+
## 추가 학습 자료
122+
- [MDN Web Docs - Client-Server overview](https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview)
123+
- [Apache HTTP Server Documentation](https://httpd.apache.org/docs/)
124+
- [Nginx Documentation](https://nginx.org/en/docs/)
125+
- [Node.js Documentation](https://nodejs.org/en/docs/)
126+
- [Django Documentation](https://docs.djangoproject.com/)
127+
- [Spring Boot Documentation](https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/)
128+
- [ASP.NET Core Documentation](https://learn.microsoft.com/ko-kr/aspnet/core/introduction-to-aspnet-core?view=aspnetcore-8.0)
129+
130+
---
131+
## [다음](./01_02_URI_URL.md)
132+

‎day1/content/01_02_URI_URL.md

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# URI와 URL의 이해
2+
3+
# 목차
4+
- [URI와 URL의 이해](#uri와-url의-이해)
5+
- [목차](#목차)
6+
- [소개](#소개)
7+
- [1. URI (Uniform Resource Identifier)](#1-uri-uniform-resource-identifier)
8+
- [URI의 정의](#uri의-정의)
9+
- [URI의 구성 요소](#uri의-구성-요소)
10+
- [URI 예제](#uri-예제)
11+
- [2. URL (Uniform Resource Locator)](#2-url-uniform-resource-locator)
12+
- [URL의 정의](#url의-정의)
13+
- [URL의 구성 요소](#url의-구성-요소)
14+
- [URL 예제](#url-예제)
15+
- [3. URI와 URL의 차이점](#3-uri와-url의-차이점)
16+
- [URI와 URL의 관계](#uri와-url의-관계)
17+
- [예제 비교](#예제-비교)
18+
- [4. URI와 URL의 실제 사용 사례](#4-uri와-url의-실제-사용-사례)
19+
- [웹 브라우저에서의 사용](#웹-브라우저에서의-사용)
20+
- [API 요청에서의 사용](#api-요청에서의-사용)
21+
- [결론](#결론)
22+
- [출처](#출처)
23+
- [다음](#다음)
24+
25+
## 소개
26+
웹 기술을 이해하는 데 있어 URI와 URL의 개념은 매우 중요합니다. 이 문서에서는 URI와 URL의 정의, 구성 요소, 차이점 및 예제를 살펴보겠습니다.
27+
28+
## 1. URI (Uniform Resource Identifier)
29+
30+
### URI의 정의
31+
- **URI**는 인터넷에서 자원을 식별하는 문자열입니다.
32+
- 모든 URL은 URI의 한 종류입니다, 하지만 모든 URI가 URL은 아닙니다.
33+
34+
### URI의 구성 요소
35+
URI는 여러 구성 요소로 이루어질 수 있으며, 이들은 각기 다른 방식으로 자원을 식별합니다.
36+
- **스킴 (Scheme)**: 자원에 접근하는 방법을 정의합니다. (예: `http`, `https`, `ftp`)
37+
- **권한 (Authority)**: 자원의 호스트 정보를 포함합니다. (예: `example.com`)
38+
- **경로 (Path)**: 자원의 위치를 나타냅니다. (예: `/path/to/resource`)
39+
- **쿼리 (Query)**: 자원에 대한 추가 매개변수를 제공합니다. (예: `?key1=value1&key2=value2`)
40+
- **프래그먼트 (Fragment)**: 자원의 일부를 참조합니다. (예: `#section1`)
41+
42+
### URI 예제
43+
```text
44+
http://example.com/path/to/resource?key1=value1&key2=value2#section1
45+
```
46+
- **스킴**: `http`
47+
- **권한**: `example.com`
48+
- **경로**: `/path/to/resource`
49+
- **쿼리**: `key1=value1&key2=value2`
50+
- **프래그먼트**: `#section1`
51+
52+
## 2. URL (Uniform Resource Locator)
53+
54+
### URL의 정의
55+
- **URL**은 인터넷 상의 자원의 위치를 나타내는 URI의 한 형태입니다.
56+
- URL은 자원에 접근하기 위한 방법과 자원의 위치를 포함합니다.
57+
58+
### URL의 구성 요소
59+
URL은 URI와 유사한 구성 요소를 가지고 있으며, 자원에 접근하는 데 필요한 정보를 제공합니다.
60+
- **스킴 (Scheme)**: 자원에 접근하는 프로토콜을 정의합니다. (예: `http`, `https`, `ftp`)
61+
- **사용자 정보 (User Info)**: (선택 사항) 사용자 이름과 비밀번호를 포함할 수 있습니다. (예: `user:pass@`)
62+
- **호스트 (Host)**: 자원의 호스트 정보를 포함합니다. (예: `example.com`)
63+
- **포트 (Port)**: (선택 사항) 호스트와 연결할 포트를 지정합니다. (예: `:80`)
64+
- **경로 (Path)**: 자원의 위치를 나타냅니다. (예: `/path/to/resource`)
65+
- **쿼리 (Query)**: 자원에 대한 추가 매개변수를 제공합니다. (예: `?key1=value1&key2=value2`)
66+
- **프래그먼트 (Fragment)**: 자원의 일부를 참조합니다. (예: `#section1`)
67+
68+
### URL 예제
69+
```text
70+
http://user:[email protected]:80/path/to/resource?key1=value1&key2=value2#section1
71+
```
72+
- **스킴**: `http`
73+
- **사용자 정보**: `user:pass@`
74+
- **호스트**: `example.com`
75+
- **포트**: `:80`
76+
- **경로**: `/path/to/resource`
77+
- **쿼리**: `key1=value1&key2=value2`
78+
- **프래그먼트**: `#section1`
79+
80+
## 3. URI와 URL의 차이점
81+
82+
### URI와 URL의 관계
83+
- **URI**는 자원을 식별하는 모든 방식을 포함하는 개념입니다.
84+
- **URL**은 URI의 하위 개념으로, 자원의 위치를 구체적으로 명시합니다.
85+
86+
### 예제 비교
87+
1. **URI**: `mailto:[email protected]`
88+
- 스킴: `mailto`
89+
- 이 URI는 이메일 주소를 식별합니다.
90+
2. **URL**: `http://example.com/path/to/resource`
91+
- 스킴: `http`
92+
- 호스트: `example.com`
93+
- 경로: `/path/to/resource`
94+
- 이 URL은 웹 자원의 위치를 명시합니다.
95+
96+
## 4. URI와 URL의 실제 사용 사례
97+
98+
### 웹 브라우저에서의 사용
99+
- **URL 입력**: 사용자가 브라우저 주소창에 URL을 입력하여 웹 페이지를 요청합니다.
100+
- **링크**: 웹 페이지 내의 하이퍼링크는 다른 웹 페이지의 URL을 포함하여 클릭 시 해당 자원으로 이동합니다.
101+
102+
### API 요청에서의 사용
103+
- **엔드포인트**: API 요청은 특정 자원의 위치를 나타내는 URL을 사용하여 서버와 통신합니다.
104+
```text
105+
GET https://api.example.com/users?id=123
106+
```
107+
108+
## 결론
109+
URI와 URL은 웹 상의 자원을 식별하고 접근하는 데 필수적인 개념입니다. URI는 자원을 식별하는 일반적인 방식이며, URL은 자원의 위치를 구체적으로 명시하는 URI의 한 형태입니다. 이러한 개념을 이해함으로써 웹 기술에 대한 전반적인 이해를 높일 수 있습니다.
110+
111+
## 출처
112+
- [MDN Web Docs - URL](https://developer.mozilla.org/en-US/docs/Web/API/URL)
113+
- [Wikipedia - Uniform Resource Identifier](https://en.wikipedia.org/wiki/Uniform_Resource_Identifier)
114+
- [W3C - URI/URL/URN 공식 문서](https://www.w3.org/Addressing/URL/uri-spec.html)
115+
116+
---
117+
## [다음](./02_Backend_소개.md)
118+

‎day1/content/01_Web_개발의_이해.md

+1-4
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,4 @@ W3C 국제화 활동은 웹 기술이 모든 언어, 문자 및 문화에서 작
264264
[Wikipedia World_Wide_Web](https://en.wikipedia.org/wiki/World_Wide_Web)
265265

266266
---
267-
## [다음](./02_Backend_소개.md)
268-
269-
270-
267+
## [다음](./01_01_Web_구조와_상호작용.md)

0 commit comments

Comments
 (0)