[시작하기] 인터넷과 프로토콜 문서 추가

src/content/docs/start/01-internet.mdx

@@ -0,0 +1,118 @@
+---
+title: 인터넷과 프로토콜
+---
+
+[인터넷](https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%EB%84%B7)(Internet)이란 여러 통신망을 하나로 연결한다는 의미인 ‘인터 네트워크(inter-network)’의 준말이며, 이제는 전 세계 컴퓨터들을 하나로 연결하는 거대한 컴퓨터 통신망을 의미합니다. 
+
+우리가 사용하거나 개발하는 대부분의 온라인 서비스는 인터넷 통신을 활용하고 있습니다. 우리는 인터넷을 통해 필요한 정보를 검색할 수 있고, 가게에 가지 않아도 물건을 살 수 있고, 다른 나라에 있는 사람과 소통할 수도 있습니다. 
+
+[<img style="height: 400px;" src="https://github.com/dsmhs/dsm-freshman-guide/assets/81006587/3fdcda47-96de-4b66-bb4f-dd744f1c7a19"/>
+전세계에 연결된 인터넷을 시각화한 모습](https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%EB%84%B7#/media/%ED%8C%8C%EC%9D%BC:Internet_map_1024.jpg)
+
+### 인터넷의 역사
+
+인터넷은 미국 국방부 연구기관인 ARPA가 1960년대 후반 개발한 ARPANET으로부터 기원되었습니다. 초기 개발 목표는 국방 분야에서의 컴퓨터 네트워크 구축이었으며, 미국의 대학과 연구기관들을 연결하는 목적으로 시작되었습니다. 
+
+처음에는 군사 목적으로 시작된 프로젝트이지만 네트워크가 연결되자 여러 대학교에서 학문 연구를 위해 다양하게 활용되기 시작했습니다. 이렇게 아파넷에 대한 수요가 많아지자 미국 국방부는 아파넷을 민간에 공유하였고 이것이 현재의 인터넷으로 진화하였습니다.
+
+### 인터넷의 특징
+
+- 인터넷은 누구나 자유롭게 접근하고 정보를 공유할 수 있는 열린 체계입니다. 표준화된 프로토콜을 사용하여 다양한 네트워크와 시스템이 서로 연결될 수 있습니다.
+
+- 위치에 상관 없이 전 세계의 컴퓨터 네트워크가 서로 연결되어 있습니다. 이를 통해 지역과 국가 너머 다양한 정보가 빠르게 공유됩니다.
+
+- 인터넷에는 다양한 유형의 정보와 서비스가 있습니다. 텍스트, 이미지, 동영상, 음성 등 다양한 미디어를 표현할 수 있습니다.
+
+- 인터넷에서는 실제 신원을 드러내지 않고 활동할 수 있는 익명성이 보장됩니다. 개인 정보 노출 위험이 있지만, 개인이 더욱 자유롭게 정보를 공유하고 이야기할 수 있습니다.
+
+## WWW
+
+WWW(World Wide Web)은 쉽게 말해 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말합니다. 사람들과 정보를 엮어 공유할 수 있다는 의미에서 거미줄(Web)이라고 부릅니다. 월드 와이드 웹 혹은 웹, WWW, W3이라고도 부릅니다. 
+
+웹은 인터넷 상에서 동작하는 서비스 중 한 가지입니다. 웹을 '인터넷'의 동의어로 여기는 사람들이 많지만, 인터넷은 프로토콜로 구현된 통신망이고 월드 와이드 웹은 인터넷 안에서 대량의 이미지와 문자를 전송하는 하이퍼텍스트 프로토콜로 구현된 공간입니다.
+
+### 웹의 구성
+
+웹은 기본적으로는 하이퍼텍스트(hypertext)와 하이퍼링크(hyperlink)로 구성됩니다.
+
+- 하이퍼텍스트(hypertext)<br/>문서에 또 다른 문서로 연결되는 참조를 첨부하여 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술입니다. 한글로 직역하면 기존 문서를 초월하는 문서라고도 할 수 있겠습니다.
+
+- 하이퍼링크(hyperlink)<br/>하이퍼텍스트 내부에서 또 다른 문서를 연결하는 참조를 의미합니다. 
+
+### 웹의 특징
+
+WWW는 크게 5가지의 기본 특징을 가지고 있습니다
+
+- Universal Readership: 하나의 플랫폼으로 다양한 환경에 접근하여 필요한 정보를 검색, 수집할 수 있습니다.
+- Searching: 방대한 문서에서 필요한 단어/부분을 찾을 수 있습니다.
+- Client-Server Model: 중심에서 흐름을 관리하는 관리자나 관리기능이 존재하지 않으며 누구라도 문서를 제작하고 읽을 수 있습니다.
+- Hypertext: 하이퍼 텍스트는 일반 텍스트와 달리 문장과 단어 등이 링크를 통해 연결된 문서를 말합니다. 웹은 하이퍼 텍스트 문서로 이뤄지며 각 문서에선 하이퍼 링크를 통해 다른 문서를 참조할 수 있습니다. [이 링크](/dsm-freshman-guide/) 처럼요!
+- Format negotiation: 웹의 하이퍼 텍스트 문서들은 HTML이라는 약속된 언어로 정의됩니다.
+    > **HTML(Hyper Text Markup Language)이란?**<br/>
+    > [HTML](https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_%EA%B8%B0%EB%B3%B8)은 웹 컨텐츠의 구조를 정의하는 마크업 언어입니다. 주로 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. 웹 페이지를 구성하기 위해선 HTML과 함께 페이지의 외형을 표현하는 [CSS](https://developer.mozilla.org/ko/docs/Web/CSS), 기능과 동작을 서술하는 언어 [JavaScript](https://developer.mozilla.org/ko/docs/Web/JavaScript)가 자주 쓰입니다.
+
+## 프로토콜
+
+인터넷이 확장되면서 여러 컴퓨터가 원활하게 통신하기 위해선 각 컴퓨터들의 데이터 표현 방식이나 신호의 순서 등이 각기 달랐기에 이를 통일시킬 필요가 있었습니다. 이를 위해서 컴퓨터들 간의 데이터 통신을 위해 규정하는 약속을 프로토콜이라 부르기로 하고 여러 프로토콜을 개발했습니다.
+
+현재 인터넷에서 가장 많이 사용되는 프로토콜로는 HTTP, TCP/IP 등이 있습니다.
+
+### HTTP와 HTTPS
+
+HTTP는 하이퍼텍스트 전송 프로토콜(HTTP)의 약자로, 웹에서 가장 기본적으로 사용되는 프로토콜입니다. HTTP는 웹 사이트를 로드하는 데 필요한 정보를 요청하는 방법을 정의합니다. HTTPS는 HTTP에 보안 기능이 추가된 프로토콜입니다. 최근엔 보안을 위해 대부분 HTTPS가 사용됩니다.
+
+HTTP는 필요한 정보를 요청할 때 URL, 헤더, 바디 등의 정보를 담아 보내도록 합니다. 개발을 할 때도 각 애플리케이션이 HTTP 통신을 할 때 각 부분에 어떤 정보를 넣고 반환해야 할지 고려하게 됩니다.
+
+그 중 가장 익숙한 개념은 URL일 겁니다. URL은 어떤 자원을 원하는지를 나타내는 주소입니다. URL의 첫 파트는 브라우저가 어떤 프로토콜을 사용하는지를 나타냅니다. 브라우저 주소창에 보이는 `https://`로 시작하는 주소는 HTTPS 프로토콜을 사용하고 있다는 것을 의미합니다.
+
+`https://` 뒤에는 목적지 주소와 하위 경로 정보가 명시됩니다. 목적지 주소에는 `{IP 주소}:{포트 번호}` 형식의 정보가 들어갈 수 있습니다. IP와 포트에 대해선 TCP/IP 부분에서 자세히 설명합니다. 주소 대신 `google.com`과 같이 주소를 나타내는 도메인(DNS)을 사용하는 경우도 있습니다. 
+
+```
+https://{목적지 주소}/{하위 경로}
+https://120.0.0.1:4123/dsm-freshman-guide
+https://dsmhs.github.com/dsm-freshman-guide
+```
+
+HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, [클라이언트-서버 프로토콜](../02-client-and-server)입니다. HTTP 요청으로 HTML 문서와 같은 웹 자원을 가져오면 크롬과 같은 브라우저에서 해당 사이트의 정보를 볼 수 있게 됩니다. 
+
+### TCP/IP
+
+TCP와 IP는 컴퓨터끼리 정보를 확실하게 주고 받기 위한 상세한 규칙입니다. 인터넷에 접속하면 여러 컴퓨터가 정보를 주고 받는 것이 당연하게 느껴지지만, 생각보다 간단하게 되는 일이 아닙니다. IP와 TCP는 각각 정보를 보낼 위치를 파악하고 정보를 보낼 수 있다는 것을 검증하는 방식을 정의합니다.
+
+#### IP
+
+IP 프로토콜에서 하는 작업을 간단하게 말하면 편지 봉투에 보내는 주소, 받는 주소를 작성하고 우표를 붙여서 우체통에 넣는 것, 그리고 우편함에 들어온 편지를 꺼내서 나한테 온 편지가 맞는지 확인하는 것 두가지입니다. 여기서 우편함은 정보를 주고받는 컴퓨터이고 편지는 주고받을 정보가 됩니다.
+
+이때 사용하는 주소를 IP 주소라고 말합니다. 각 컴퓨터는 고유한 IP 주소를 가지고, 해당 주소를 기준으로 정보를 가져옵니다.
+
+#### TCP
+
+IP가 단순히 주소로 편지를 보내는 것 까지만 정의한다면 TCP는 편지가 확실하게 순서대로 전달되는지를 보장하고 통제합니다. IP만 사용한다면 상대방이 편지를 받을 수 없거나 다른 주소로 이사간 경우 편지가 제대로 도착하지 못하고 유실될 수 있습니다. 그리고 주소만 지정하기 때문에 그 집에 사는 사람 중 누구에게 온 편지인지 구분할 수 없습니다.
+
+TCP는 편지가 중간에 사라지는 문제를 해결하기 위해, 상대방이 편지를 받을 수 있는 상황인지를 확인한 다음 정보를 보내도록 합니다. TCP에서는 상대방과 1:1로 연결되어있다는 것이 확실해야 정보를 보냅니다. 통신 가능 여부를 확인하기 위해 3 Way-Handshake라는 과정을 거칩니다.
+
+> **3 Way-Handshake 과정**<br/>
+> 1. 상대에게 통신을 하고 싶다는 메시지를 보낸다. (SYN)
+> 2. 상대는 그 메시지에 대한 응답 + 나도 통신 준비가 되었다는 메시지를 보낸다. (SYN-ACK)
+> 3. 2번에서 받은 메시지에 응답을 보낸다. (ACK)
+
+그리고 해당 주소에 사는 사람 중 누구에게 가는 편지인지를 구분하기 위해, 즉 도착지 컴퓨터의 어떤 프로그램이 사용할 정보인지를 구분하기 위해 포트(Port)라는 정보를 추가로 주고받습니다. TCP를 통해 패킷을 보낼 때는 `IP주소:포트번호`처럼 주소를 지정한다고 할 수 있습니다. (예: `120.0.0.1:4123`)
+
+이 외에도 여러 편지를 한 번에 보내는 경우에는 편지를 순서대로 받을 수 있도록 통제하는 등의 작업으로 정보가 안전하게 도착했다는 것을 확인하고 보장합니다. 꼭 확실하게 도착하지 않아도 상황이라면 [UDP](https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9A%A9%EC%9E%90_%EB%8D%B0%EC%9D%B4%ED%84%B0%EA%B7%B8%EB%9E%A8_%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C#:~:text=UDP%EB%8A%94%20%EC%9C%A0%EB%8B%88%EB%B2%84%EC%84%A4%20%EB%8D%B0%EC%9D%B4%ED%84%B0%EA%B7%B8%EB%9E%A8,%ED%86%B5%EB%B3%B4%20%EC%97%86%EC%9D%B4%20%EB%88%84%EB%9D%BD%EC%8B%9C%ED%82%A4%EA%B8%B0%EB%8F%84%20%ED%95%9C%EB%8B%A4.)라는 프로토콜을 사용할 수도 있습니다.
+
+---
+
+### 마무리 
+
+인터넷과 월드 와이드 웹, 그리고 관련 프로토콜에 대해 알아보았습니다. 인터넷은 전세계 컴퓨터 네트워크를 연결하는 거대한 통신망이며, 웹은 인터넷 상에서 하이퍼텍스트 기반으로 정보를 공유할 수 있는 서비스입니다. 웹은 HTTP, TCP/IP 등 다양한 프로토콜을 통해 통신을 위한 규칙을 지킵니다.
+
+이 문서에서는 인터넷과 웹의 기본 개념, 특징, 그리고 작동 원리를 다뤘습니다. 실제 웹 사이트나 애플리케이션은 클라이언트와 서버 간의 상호작용으로 이루어집니다. 그렇기에 클라이언트와 서버의 개념에 대해 자세히 알아보면 웹 서비스의 동작 방식을 더 깊이 이해할 수 있습니다. 
+
+### 참고
+
+- [TCP School - 웹 기본](https://www.tcpschool.com/webbasic/www)
+- [위키피디아 - HTTP](https://ko.wikipedia.org/wiki/HTTP)
+- [위키피디아 - 인터넷](https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%EB%84%B7)
+- [모질라 재단 - HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
+- [IBM - TCP/IP](https://www.ibm.com/docs/ko/aix/7.1?topic=management-transmission-control-protocolinternet-protocol)
+- [티스토리 블로그 냐옹아 멍멍해봐 - 인터넷의 TCP/IP 프로토콜](https://better-together.tistory.com/110)

src/content/docs/start/02-client-and-server.mdx

@@ -2,7 +2,7 @@
 title: 클라이언트와 서버
 ---
 
-우선 클라이언트와 서버가 무엇인지에 대한 기본적인 개념을 알아봅시다. 개발은 크게 클라이언트에서 동작하는 코드를 개발하는 것과 서버에서 동작하는 코드를 개발하는 것으로 나뉩니다.
+클라이언트와 서버가 무엇인지에 대한 기본적인 개념을 알아봅시다. 개발은 크게 클라이언트에서 동작하는 코드를 개발하는 것과 서버에서 동작하는 코드를 개발하는 것으로 나뉩니다.
 
 흔히 말하는 웹, 앱, 프론트엔드, 백엔드 등의 개념도 클라이언트와 서버의 개념으로부터 설명될 수 있습니다.
 
@@ -143,4 +143,4 @@ graph TB
 - [cloudflare - 클라이언트 사이드 vs 서버 사이드](https://www.cloudflare.com/ko-kr/learning/serverless/glossary/client-side-vs-server-side/)
 - [aws - 프론트엔드와 백엔드의 차리](hhttps://aws.amazon.com/ko/compare/the-difference-between-frontend-and-backend)
 - [aws - 웹 애플리케이션](hhttps://aws.amazon.com/ko/what-is/web-application)
-- [TCP School - 웹 기본](hhttps://www.tcpschool.com/webbasic/www)
+- [TCP School - 웹 기본](https://www.tcpschool.com/webbasic/www)