1️⃣ TCP/IP란? – 인터넷을 가능하게 만든 언어

TCP/IP란 무엇인가?

TCP/IP는 인터넷에서 기기끼리 데이터를 주고받을 수 있도록 만든 프로토콜 집합이다.
인터넷은 단순히 케이블을 연결한다고 해서 동작하지 않는다.
서로 말이 통해야 한다. 그 공통의 언어가 바로 TCP/IP다.

• TCP (Transmission Control Protocol): 데이터를 신뢰성 있게 전송하는 역할

• IP (Internet Protocol): 데이터를 어디로 보낼지 정하는 주소 지정 시스템

왜 중요할까?

우리는 유튜브를 보고, 메일을 보내고, 파일을 다운로드하지만
그 모든 것이 실은 **작게 나뉜 데이터 조각(패킷)**들이 인터넷이라는 도로를 달려가는 것이다.
그 도로의 교통 규칙이 TCP/IP인 셈이다.

---

2️⃣ IP와 TCP는 각각 무슨 일을 할까?

IP – 데이터의 길잡이

IP는 "이 데이터가 어디로 가야 하는지"를 알려주는 주소이다.
즉, 모든 인터넷 연결 기기는 IP 주소를 가진다. (예: 192.168.0.1)

• IP는 실제로 데이터를 전송하지 않는다.

• 단지 "데이터를 보낼 목적지"를 표시할 뿐이다.

💡 비유: 택배 상자에 붙은 주소 스티커.

---

TCP – 데이터의 보디가드

TCP는 데이터를 목적지까지 안전하게 도착하게 만든다.

• 데이터를 **작은 조각(패킷)**으로 쪼갠 뒤

• 순서대로, 빠짐없이, 오류 없이 도착하도록 확인하고

• 도착하면 다시 원래의 순서대로 재조립한다.

💡 비유:
패키지마다 일련번호를 붙이고
도착한 박스를 하나하나 확인하고 조립하는 배송 관리자.

---

3️⃣ HTTP란? – 브라우저와 서버의 대화법

HTTP란 무엇인가?

HTTP(HyperText Transfer Protocol)는
**브라우저(클라이언트)**와 **웹 서버(서버)**가 웹페이지, 이미지, 데이터를 주고받을 수 있게 하는 통신 규약이다.

인터넷의 대부분은 HTTP를 통해 이루어진다.
우리가 브라우저에 naver.com을 치는 순간, HTTP 요청이 날아가고, HTTP 응답이 돌아오는 것이다.

---

⚙️ 동작 방식

1. 사용자가 주소창에 www.example.com 입력

2. 브라우저가 DNS를 통해 IP 주소를 확인

3. HTTP 요청이 서버로 전달됨

4. 서버가 HTML, CSS, JS 등으로 응답

5. 브라우저가 응답을 화면에 렌더링

💡 비유:
브라우저는 웨이터, 서버는 주방.
HTTP는 둘 사이의 주문서 양식이다.

---

4️⃣ HTTP 요청의 구성

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

---

5️⃣ HTTP 메서드와 행동 유형

CRUD 매핑

📌 실무 예시:

• 회원가입 폼 → POST /signup

• 게시글 수정 → PUT /posts/1

---

6️⃣ HTTP 상태 코드 – 서버의 응답 언어

HTTP 상태 코드 간단 정리

자주 보는 상태 코드

💡 이 코드를 보면 어디가 문제인지 즉시 파악 가능하다.
개발자는 로그와 함께 이 코드를 기준으로 디버깅을 시작한다.

---

7️⃣ 프로토콜의 핵심 기능

프로토콜이란?

인터넷에서 수많은 컴퓨터와 기기들이 서로 메시지를 주고받는다. 이때 모든 기기가 말이 통하게 하려면 공통된 약속, 즉 **프로토콜(protocol)**이 필요하다.

마치 우리가 한국어, 영어 같은 공용어로 대화하듯, 컴퓨터들끼리도 정해진 형식과 규칙에 따라 데이터를 주고받는다. 이게 바로 프로토콜이다.

---

프로토콜의 구성 요소: 구문, 의미, 시간

프로토콜은 크게 다음 세 가지 요소로 구성된다.

이 세 요소가 어긋나면, 아무리 데이터가 도착해도 의미 없는 소음이 된다.

프로토콜이 없다면 인터넷은 존재할 수 없다.
HTTP 덕분에 웹사이트를 보고, TCP 덕분에 안정적으로 파일을 받고, SMTP 덕분에 이메일을 주고받는다.

각 프로토콜은 특정 목적에 맞게 설계되어 있으며, 정확하고 효율적인 통신을 가능하게 해준다.

---

프로토콜의 주요 기능

프로토콜은 단순히 데이터를 주고받는 데 그치지 않는다. 보다 안정적이고 효율적인 통신을 위해 여러 기능을 수행한다. 그 중 대표적인 기능은 다음과 같다:

1. 캡슐화 (Encapsulation)

• 프로그래밍에서의 캡슐화는 정보 은닉을 의미하지만,

• 프로토콜에서의 캡슐화는 데이터를 감싸고 헤더 정보를 덧붙이는 것에 가깝다.

• 마치 소포를 보낼 때 포장하고 주소를 붙이는 것처럼, 데이터에도 출발지·도착지 정보, 순서, 오류 검출 정보 등을 함께 담는다.

2. 주소 결정 (Addressing)

• 데이터를 누구에게 보낼지를 명확히 지정한다.

• IP 주소, MAC 주소, 포트 번호 등을 통해 정확한 목적지를 설정한다.

3. 순서 결정 (Sequencing)

• 데이터를 어떤 순서로 보낼지/받을지 관리한다.

• 특히 큰 데이터를 나눠 전송할 때, 원래 순서대로 조립할 수 있게 해준다.

프로토콜 정리

---

8️⃣ CORS와 SOP – 브라우저의 보안 메커니즘

SOP (Same-Origin Policy)

**Same-Origin Policy(동일 출처 정책)**은 웹 브라우저의 보안 정책 중 하나로, 다른 출처(origin)의 리소스에 자유롭게 접근하지 못하도록 제한하는 규칙이다.
즉, 악의적인 사이트가 사용자의 정보를 몰래 가져가는 걸 방지하기 위한 보안 장치이다.

출처(Origin)란 무엇인가?

출처(Origin)는 다음 세 가지 요소가 모두 동일해야 같은 출처로 간주된다:

1. 프로토콜 (Protocol): http, https

2. 호스트 (Host): example.com

3. 포트 (Port): :80, :443 등

예를 들어,

📌 https://a.com에서→ https://b.com/data 요청 시 기본적으로 브라우저는 막는다.

CORS (Cross-Origin Resource Sharing)

만약 다른 출처에서 정상적으로 접근을 허용하고 싶다면, 서버 측에서 CORS(Cross-Origin Resource Sharing) 정책을 설정해줘야 한다.

• 즉, 서버가 특정 출처만 허용하도록 설정할 수 있다.

Access-Control-Allow-Origin: https://a.com

💡 비유:
내 가게 창고는 내 직원만 쓸 수 있지만, 허락받은 협력 업체에게는 키를 줄 수 있다.

const express = require('express');

const app = express();

app.use((req, res, next) => {
  // 일반적으로 같은 url에서는 cors error가 발생할 일이 없습니다.

  // 아래와 같이 요청을 허용할 출처 설정합니다. 특정 url을 설정한 뒤 CORS 에러가 발생하는 상황을 확인해보세요.
  res.set('Access-Control-Allow-Origin', `https://localhost`);

  // 아래 주석을 해제해서 CORS 에러를 해결한 상황을 확인해보세요.
  res.set('Access-Control-Allow-Origin', `https://${req.hostname}`);
  res.set('Access-Control-Allow-Credentials', 'true'); // 쿠키와 같은 자격 증명을 설정

  // 그 외에 아래와 같은 설정도 할 수 있습니다.
  // res.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 요청 메서드를 설정
  // res.set('Access-Control-Allow-Headers', 'Content-Type'); // 요청 헤더를 설정
  next();
});

app.get('/api/data', (req, res) => {
  res.json({
    message: 'Hello, Cross-Origin World!',
  });
});

app.listen(8090, () => {
  // 8090 포트로 실행하지만 엘리스 실습 환경에서 서버가 8190 포트로 실행중입니다.
  console.log('Server is running on 8190 PORT');
});

---

요청 유형별 CORS 흐름

---

9️⃣ 캡슐화 & 역캡슐화 – 데이터는 어떻게 이동하나?

📦 캡슐화

데이터가 전송되기 전에, 각 계층마다 **필요한 정보(헤더)**가 덧붙여진다.

💡 비유:
택배 포장: 내용물 → 상자 → 스티커 → 송장 → 봉인 → 출발!

🔄 역캡슐화

• 받은 데이터는 각 계층마다 헤더를 제거하며 해석된다.

---

✅ 최종 정리

---