🖥️ 네트워크 입문 정리

본 내용은 널널한 개발자 TV의 네트워크 입문 강의를 공부하고 정리한 내용입니다.

---

✏️ 서론

아무래도 글을 쓰고 캡쳐하는 것보다 내가 직접 그림을 그리고 이해하는 것이 좋은 것 같아서, 앞으로는 단계별로 그림을 그려가며 설명하려 한다.
그림은 잘 못 그리고 악필이지만, 노력해보겠다. 😆

---

📌 HTML과 프로그래밍 구성 요소

웹의 아버지 티모시 버너스 리 선생님께서 HTML과 HTTP를 제안한 이후, 웹 서비스는 급격한 발전을 이루었다.
현재 HTTP는 1.0 → 1.1 → 2.0 → 3.0 순으로 발전했으며, HTML 또한 여러 태그들이 개발되고 있다.

그렇다면 HTML은 프로그래밍 요소로 볼 수 있을까? 🤔

프로그래밍은 유지보수 편의성을 극대화하기 위해 크게 3가지 요소로 구성된다고 볼 수 있다.

• 📂 자료구조 → HTML
• 🖥️ UI
• ⚙️ 제어

내 생각을 정리하자면, HTML은 자료구조에 속하며 프로그래밍 요소의 일부라고 할 수 있다.

앞으로의 내용은 위 프로그래밍 구성 요소를 통해 웹 서비스를 이해하는 과정을 담고 있다.

---

🌍 HTTP 1.1 기준 설명

우리는 어떤 사이트에 접속할 때 브라우저(Web Client)를 이용한다.
이때 브라우저는 IP 주소를 기반으로 인터넷을 통해 Web Server와 통신을 시도한다.

🔒 Web Server 앞에는 보안 장치들이 존재한다.

• IPS (침입 방지 시스템)
• SSL (암호화)
• Firewall (방화벽)

---

🛜 사이트 조회 시 통신 과정

1️⃣ 브라우저에 URL을 입력하면 DNS를 통해 IP를 확인하고 이동한다.

• TCP/IP 연결이 전제되고, 이후 HTTP 통신이 이루어진다.
• 이때 HTTP는 Stateless (상태를 저장하지 않음) 하다.

2️⃣ 클라이언트가 GET 요청을 보내면 웹 서버가 Hard Disk에 있는 리소스를 응답으로 반환한다.

• 리소스를 가져오는 순서는 HTML → CSS → Image → JavaScript 순이다.

3️⃣ 브라우저는 HTML을 가져오면 Parsing(구문 분석)을 수행한다.

• 이를 통해 비선형 자료구조인 DOM을 생성하고, 렌더링을 수행한다.
• 그래서 나는 HTML을 자료구조라고 생각한다.
• 이는 Stream 처리 방식으로도 볼 수 있지 않을까? 🤔

---

🔑 로그인 시 통신 과정

1️⃣ 클라이언트가 POST 요청을 보낼 때, ID(test) 데이터를 포함해서 전송한다.

• ❗ 하지만 HTTP는 Stateless한데, 문맥을 모를 텐데...? 어디서 기억할까?

2️⃣ 웹 서버(Web Server)는 송수신을 담당하며, 요청 데이터를 처리하는 WAS(Web Application Server)가 따로 존재한다.

• 📌 기록하는 주체는 Database가 담당한다.

3️⃣ WAS는 Database와 연결을 수행하고, SQL을 통해 데이터를 조회한다.

• ⚙️ (Model 계층이 데이터 조회를 수행함)

4️⃣ 조회된 데이터를 WAS가 받아서 동적 리소스를 생성 후, 클라이언트에게 응답한다.

• 💡 하지만 클라이언트에서도 데이터를 받아서 연산해야 하는 경우가 발생할 수도 있다.

5️⃣ 그래서 클라이언트에서도 연산을 수행하는 스크립트 언어(JavaScript)가 등장하게 되었다.

• Mocha → Live → JavaScript

6️⃣ 그렇다면 클라이언트가 데이터를 기억하는 방법은 없을까?

• 👉 그래서 등장한 것이 Cookie (Key-Value 기반)

---

🚀 동적 웹페이지의 등장

과거에는 WAS가 동적 데이터를 포함한 HTML을 생성해서 반환했다.
하지만 UI가 점점 다양해지면서 WAS에서 데이터를 반환하고, HTML은 클라이언트에서 동적으로 생성하는 방식으로 변화했다.

🛠 이에 따라 등장한 것이 React.js, Vue.js 같은 프레임워크!

📡 RESTful API를 이용해 도메인별로 생성, 읽기, 수정, 삭제가 가능하도록 설계되었다.

---

🔥 JVM (Java Virtual Machine)

🖥️ 컴퓨터는 3가지 모드로 이루어져 있다.

• User Mode
• Kernel Mode
• Hardware (CPU, 메모리, 저장장치 등)

💡 자바는 User Mode에서 CPU를 구현하는 JVM을 만들었다.

• JVM이 실행하는 기계어가 Java Byte Code이다.

📌 JVM을 기반으로 동작하는 모듈 소프트웨어를 "미들웨어(Middleware)"라고 한다.

• 하드웨어도 아니고, 소프트웨어도 아닌 중간 계층
• 이것이 WAS(Web Application Server)이다.

🚀 초심자들이 실수하지 않도록 Framework가 등장

• Spring, Spring Boot

📝 그 외에도 JSP, PHP, ASP, Node.js 같은 기술을 이용해 WAS 없이 동적 페이지 구현이 가능하다.

---

🏗️ 3-Tier Web Service

3-Tier 구조의 웹 서비스는 다음과 같이 구성된다.

1️⃣ Web Server (Front-end Server)
2️⃣ WAS (Web Application Server)
3️⃣ Database (Back-end Server)

이 세 가지 계층을 통칭하여 "3-Tier Web Service"라고 한다.

---

⚡ 성능 최적화

1️⃣ WAS와 Database의 응답 속도 개선

✅ Database 튜닝을 통해 성능을 개선할 수 있다.

2️⃣ Java Byte Code의 성능 분석

📊 APM(Application Performance Monitoring)을 이용하여 성능을 측정한다.

• 대표적인 APM 도구: Scouter APM, Jennifer 등

3️⃣ 네트워크 속도 최적화

🚀 네트워크 환경에 따른 속도 개선이 필요하다.

---