🌵[NW]네트워크 강의를 듣다

신입개발자라면 이정도는 알아야 한다!
개발자라면 필수로 알아야 할 기초 네트워크 지식

기초적인 HTTP 습득
개발자로서 성장을 위해
원활한 커뮤니케이션을 위해
API를 제작하거나 다루기 위해
성능 최적화나 디버깅을 위해

강의 실습 환경: VSC <- 본인은 IntelliJ로 진행

1.웹과

웹> 인터넷을 통해 정보를 공유하고 다양한 서비스를 이용할 수 있게 해주는 서비스
웹페이지= 문서들의 모음
	하이퍼텍스트를 이용해 연결

인터넷: 컴퓨터 네트워크를 연결하는 글로벌 네트워크 시스템
웹
URL: 인터넷에 웹 페이지, 이미지 등의 리소스 위치를 나타내는 지시자(이름) 또는 경로
		웹 상의 자원 위치를 나타내는 주소
IP: 인터넷에 연결된 장치들을 식별하기 위해 사용되는 숫자 주소
PORT: 컴퓨터 네트워크에서 IP 주소와 함께 사용되어, 하나의 컴퓨터에서 동작하는 여러 개의 서비스나 프로세스를 구분하는 역할
DNS(Domain Name System): 도메인 이름을 IP 주소로 변환하는 시스템
HTTP(Hypertext Transfer Protocol): 웹 브라우저와 웹 서버 간의 통신 규약(통신 약속)

Client (휴대폰, 노트북, 데스트탑)을 이용해 domain,URL 로 접속 (Request)
공유기/스위치를 통해 라우터로 ← 클라이언트가 서버를 찾아가려면 주소(IP)가 있어야 하는데, 그 주소는 DNS에 있습니다
라우터는 DNS에서 IP 주소를 찾아옴
각종 보안장비 및 네트워크 장비를 거쳐 서버에 접속

www.naver.com	도메인, URL	이름
105.209.222.141	IP	주소
22,23,80, 443	Port	문

요청을 하나의 문서로 만듬(패킷)

웹 상에서 HTML,CSS,JS,Python 의 역할

HTML:뼈대 (데이터를 구조화- 웹 콘텐츠의 의미와 구조를 정의)
CSS: 살 (스타일 시트)
JS: 근육(웹 페이지의 기능, 사용자와 상호작용/ 데이터 컨트롤)
Python: 두뇌 및 장기(데이터 처리, 사용자에게 전달)

용어

클라이언트: 서비스를 요청하는 컴퓨터(프로그램), 
	웹 브라우저를 통해 서버에 접속하는 사용자의 디바이스를 의미
서버: 클라이언트의 요청에 따라 서비스를 제공하는 컴퓨터(프로그램)

#001.py

from http.server import BaseHTTPRequestHandler, HTTPServer
import os

class SimpleHTTPRequestHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        if self.path == '/': #기본페이지로 접속되었을 때
            #self.path = '/index.html'
            self.path = '/001.html'

        try:
            file_to_open = open(self.path[1:]).read() #self.path를 전달받아 open
            self.send_response(200)
        except:
            file_to_open = "File not found"
            self.send_response(404)

        self.end_headers()
        self.wfile.write(bytes(file_to_open, 'utf-8'))#실제로 전달되는 값(utf로~)

def run(port=8080):
    server_address = ('', port)
    httpd = HTTPServer(server_address, SimpleHTTPRequestHandler)
    print(f'Server running on port {port}')
    httpd.serve_forever()

if __name__ == '__main__':
    run()

URL, URN

Uniform Resource Identifier : 통합 자원 식별자
	Uniform: 리소스 식별하는 통일된 방식
    Identifier: 다른 항목과 구분하는데 필요한 정보
URI는 위치, 이름 또는 둘 다로 추가분류

• URL: Resource Locator → 리소스의 위치를 지정
• URN: Resource Name → 리소스에 이름을 부여 (주소는 변해도 URN은 변하지 않는다)

URL: 웹 사이트를 표시하기 위해 입력하는 주소를 말함
  웹 상에서는 실질적으로 주소가 아닌 이름 역할

/001.html로 접속했다고 실제로 불러온 값이 001.html임을 보장X
  ← 보안으로 접속 주소가 바뀔 수 있음

        if self.path == '/001.html': #001접속요청
         self.path = '/index.html' #index 페이지 반환

웹 사이트 뿐만아닌 컴퓨터 네트워크상의 자원을 모두 나타낼 수 있음
(ex. 001.html 파일의 물리적 주소를 웹페이지에 검색했을 때 출력됨)

URL 통신은 도청(스니핑)이 가능해 //user id와 pw 는 넣지 않는다
port(프로토콜에 따른 약속된 num이 있음) : https=443 / http=80
#hash : 페이지의 id값

flagment(hash)에 따른 이동

get 방식: url로 데이터를 전송

input의 name이 query string의 key값으로 들어가고 
(name = 'username'이라면 username이 키값으로 들어간다)

      <input type="text" name="username" value="helloget">
      <input type="password" name="password" value="worldget">
      <input type="submit" value="Login">
	```
  다음의 경우 username=helloget&password=worldget 으로 값이 넘어간다
	실제로 username과 pw는 get 방식으로 보내지 않는다!! 보안문제
  
#### serve에서 데이터 수신

`004.html`
```html
  <h1>login</h1>
  <form action="http://127.0.0.1:8000" method="get">
      <input type="text" name="username" value="helloget">
      <input type="password" name="password" value="worldget">
      <input type="submit" value="Login">
  </form>

http://127.0.0.1:8000에 GET 방식으로 데이터를 보낼 것

002.py

from http.server import (
    HTTPServer,
    BaseHTTPRequestHandler,
)  # 간단한 서버를 만들 수 있는 모듈
from urllib.parse import urlparse, parse_qs


class SimpleHTTPRequestHandler(BaseHTTPRequestHandler):
    def do_GET(self):  # get 요청 처리
        print(self.path)
        parsed_url = urlparse(self.path)  # URL 파싱
        print(parsed_url)
        query_params = parse_qs(parsed_url.query)  # 쿼리 파싱-딕셔너리로 가져옴
        print(query_params)

        username = query_params.get("username", [None])[
            0
        ]  # username과 password 값을 가져옴. 값이 없는 경우 None이 기본값.
        password = query_params.get("password", [None])[0]

        if username and password:  # 2개 모두 존재하는 경우
            response = f"Username: {username}, Password: {password}"
        else:  # 그렇지 않은 경우에는 form
            response = """
            <p>아이디나 패스워드가 비어있습니다.</p>
            <form action="" method="get">
                <input type="text" name="username" placeholder="Username">
                <input type="password" name="password" placeholder="Password">
                <input type="submit" value="Login">
            </form>
            """

        self.send_response(
            200
        )  # HTTP 상태코드 생성(200은 요청이 성공적으로 처리되었다는 것)
        self.send_header("Content-type", "text/html")  # 응답은 HTML로 송신
        self.end_headers()  # 헤더 정보는 여기까지 마무리 하겠다는 것
        self.wfile.write(response.encode("utf-8"))  # 응답 메시지 작성


if __name__ == "__main__":
    server_address = ("", 8000)
    httpd = HTTPServer(server_address, SimpleHTTPRequestHandler)
    print(f"Server running on port {server_address[1]}")
    httpd.serve_forever()

JS URL 파싱

const url = new URL(
  'https://www.example.com/path/to/page?key1=value1&key2=value2#section',
);
 
console.log(url.protocol); // "https:"
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/path/to/page"
console.log(url.search); // "?key1=value1&key2=value2"
console.log(url.hash); // "#section"

빈 about:blank의 빈 페이지에서 진행

JS 요청 보내기

받아서 쇼핑몰 같은 코드를 만들 수 있음

const url = 'https://eduapi.weniv.co.kr/723/product';
 
fetch(`${url}`)
  .then((response) => {
    console.log(response.status);
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

const url = 'https://eduapi.weniv.co.kr/753/product/search';
const params = new URLSearchParams({ keyword: 'keyring' });
 
fetch(`${url}?${params}`)
  .then((response) => {
    console.log(response.status);
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

GET 요청으로 키워드를 보내면 백엔드 서버에서 받아서 검색

PYTHON URL parsing

터미널에서 실습하는 경우 - pip install requests 하여 모듈 설치

005.py
006.py

URL 인코딩

해당문자의 ASCII 코드에 해당하는 16진수 값으로 대체

---

HTTP

클라이언트-서버 간 데이터를 주고받기 위한 약속 (프로토콜)

self.send_header("Content-type", "text/plain")
- html 파일을 전송하는데 "text/plain"로 작성하면 일단 text로 보임
때문에 Content-type을 아는것이 중요<< 백엔드 개발자나 프론트엔드 개발자가 데이터를 송신할 때 입력
1) text/html
2) text/css
3) application/javascript
위 세가지 태그가 있으며 응답 본문이 html, css, JS 문서임을 나타냄

현재는 HTTP/1.1이 많이 사용중~ 계속 발전중~

HTTP 요청 메시지 구조

GET /index.html HTTP/1.1 <!--요청라인, 프로토콜은 HTTP/1.1-->
Host: www.hojun.com <!--헤더-->
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive

HTTP 응답 메시지 구조

HTTP/1.1 200 OK <!--요청성공-->
Date: Fri, 29 Mar 2023 10:30:00 GMT
Server: Apache/2.4.41 (Ubuntu)
Last-Modified: Thu, 28 Mar 2023 12:00:00 GMT
Content-Type: text/html
Content-Length: 1234
Connection: keep-alive

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제주코딩베이스캠프</title>
</head>
<body>
    <h1>Welcome to 제주코딩베이스캠프</h1>
    <p>제주코딩베이스캠프에 오신 것을 환영합니다!</p>
</body>
</html>

Python 서버 구동

008.py

** 중요한 것
1) 들어온 메서드 확인
2) GET에서는 self.path, POST에서는 body 확인
3) Content-Type

HTML/JavaScript 코드를 통해 요청(request)

빈 about:blank의 빈 페이지에서 진행

프론트엔드에서 데이터를 요청하면 백엔드에서 데이터를 받아 화면에 렌더링(뿌림)을 형식을 실무에서 많이 사용
아래 JavaScript 코드로 GET을 보내는 것 확인

fetch('http://127.0.0.1:8000/')
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.error(error));

아래 JavaScript 코드로 POST를 보내는 것 확인

fetch('http://127.0.0.1:8000/', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        title: 'test',
        content: 'test',
    }),
})
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.error(error));

002.js - 쇼핑몰 페이지 이미지 렌더링
프론트엔드와 백엔드의 협업
백엔드에서는 Content-Type을 Json으로 하고- Json데이터로 URL을 요청했을 때 데이터를 전송해줌
<- 이 때, 어떤 URL로 요청해야 어떤 데이터를 받을 수 있는지는 API 명세서와 같은 문서로 작업

005.htmlpost방식과 get 방식 실습

> GET: Path에 정보가 담김 **검색창 구현 등**
	POST: Body에 정보가 담김 **그러므로 login창은 post로 만들어야 함 (스니핑 방지 가능)**

HTTP 메시지 구조

수업에서는 실습하진 않지만 아래와 같은 툴로 브라우저를 통하지 않고 직접 왔다 갔다 하는 Request와 Response를 전부 볼 수 있습니다.

(부록) 와이어샤크(Wireshark)

Source: 출발지 IP (요청자 IP)

이미지 출력할 때 꼭 최적화된 이미지를 올리고 받을 수 있도록!! 서로 부담되니까..

Request

GET /index.html HTTP/1.1
user-agent: MSIE 6.0; Windows NT 5.0
accept: text/html; */*
cookie: name = value
referer: http://www.naver.com
host: www.paullab.co.kr

1)
host: www.paullab.co.kr
실제 우리가 들어가야 할 페이지가 www.paullab.co.kr/a/b/c/index.html 이라면

>> GET /a/b/c/index.html HTTP/1.1	//	요청라인= 데이터 처리 방식(요청메서드), 요청 페이지, 프로토콜 버전
	www.paullab.co.kr 

2) Header
요청:
Accept: text/html
대응되는 응답 : Content-Type:text/html

Cookie: HTTP 프로토콜 자체가 세션을 유지하지 않는 State-less(접속상태를 유지하지 않는) 방식이기 때문에 로그인 인증을 위한 사용자 정보를 기억하려고 만든 인위적인 값. 즉 사용자가 정상적인 로그인 인증 정보를 가지고 있다는 것을 판단하고자 사용.

Referer: 현재 페이지 접속 전에 어느 사이트를 경유했는지 알려주는 도메인 혹은 URL 정보
host: 사용자가 요청한 도메인 정보

HTTP 요청 메서드

GET
POST
PUT
DELETE
PATCH

GET: 서버! 네가 가진 정보를 줘!

JavaScript의 Fetch API를 사용하여 GET 요청을 보내는 예시 코드

fetch('https://eduapi.weniv.co.kr/753/product', {
  method: 'GET' //생략가능
})
.then(response => response.json())
.then(data => {
  console.log('성공:', data);
})
.catch(error => {
  console.error('실패:', error);
});

POST: 서버! 새로운 상품 정보를 줄게! 데이터를 생성해줘!

POST 메서드는 서버에 새로운 리소스를 생성할 때 사용됩니다. 요청 패킷의 구조는 다음과 같습니다.

POST /753/product HTTP/1.1
Host: https://eduapi.weniv.co.kr/
Content-Type: application/json
Content-Length: 1560

{
    "id": 8,
    "productName": "hello world keyring",
    "price": 12500,
    ... 생략 ...
}

const data = {
        "id": 8,
        "productName": "hello world keyring",
        "price": 12500,
        "stockCount": 100,
        "thumbnailImg": "asset/products/img/1/thumbnailImg.jpg",
        "option": [],
        "discountRate": 0,
        "shippingFee": 1500,
        "detailInfoImage": [
            "asset/products/detail/2/detail1.png",
            "asset/products/detail/2/detail2.png",
        ],
        "viewCount": 0,
        "pubDate": "2222-02-28",
        "modDate": "2222-02-28",
    }

fetch("https://eduapi.weniv.co.kr/753/product", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),//데이터를 문자열로 변경해서 생성
})
.then(response => response.json())
.then(data => {
    console.log("성공:", data);
})
.catch(error => {
    console.error("실패:", error);
});

데이터 생성 확인을 GET 요청으로 확인

fetch('https://eduapi.weniv.co.kr/753/product', {
  method: 'GET'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

PUT: 서버야 유저 정보를 덮어씌워 줘!

서버에 이미 존재하는 리소스를 수정할 때 사용
이 경우 아래와 같이 인증 값까지 함께 들어가 있게 됩니다. 여기서는 인증을 주석처리

PUT /753/product HTTP/1.1
Host: https://eduapi.weniv.co.kr/
Content-Type: application/json
Content-Length: 1559
Authorization: 토큰값

{
    "id": 1,
    "productName": "test put data",
    "price": 999999,
    ... 생략 ...
}

const data =  {
        "id": 1,
        "productName": "test put data",
        "price": 999999,
        "stockCount": 100,
        "thumbnailImg": "asset/products/img/1/thumbnailImg.jpg",
        "option": [],
        "discountRate": 0,
        "shippingFee": 1500,
        "detailInfoImage": [
            "asset/products/detail/2/detail1.png",
            "asset/products/detail/2/detail2.png",
        ],
        "viewCount": 0,
        "pubDate": "2022-02-28",
        "modDate": "2022-02-28",
    }

// const token = "your_bearer_token_here";
    
fetch("https://eduapi.weniv.co.kr/753/product/1", {
    method: "PUT",
    headers: {
        "Content-Type": "application/json",
        // "Authorization": `Bearer ${token}`,
    },
    body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

DELETE: 서버야 있던 정보를 삭제해줘!

DELETE /753/product/1 HTTP/1.1
Host: https://eduapi.weniv.co.kr/
Authorization: 토큰값

const productId = 1;
// const token = "your_bearer_token_here";

fetch(`https://eduapi.weniv.co.kr/753/product/${productId}`, {
    method: "DELETE",
    // headers: {
    //     "Authorization": `Bearer ${token}`,
    // },
})

들어오는 데이터의 원본 보기

009.py
006.html post 방식으로 username과 pw 전송

vsc에서 live server 설치해서 구동확인하기

Response

MIME ; 이메일을 위해 개발된

상태코드

서버가 요청을 어떻게 처리했는지 알 수 있음
주요 상태코드만 알아두기
스캐닝 공격 // 해커의 풋프린팅을 방해하기 위해 메시지의 혼란을 주기도 함 (백엔드 개발자가 임의로 상태코드를 custom 가능) --> 숫자는 숫자일 뿐 ! 이다! 하지만 상태코드의 문제도 알아야 함
401 인증정보가 잘못 됐을 때

5XX err = 백엔드 개발자에게 중요한 오류
서버 오류

실습 10.py

과제 해보는 것이 좋음..!

TCP/IP

인터넷 통신을 위한 기본 프로토콜 스위트
데이터를 패킷으로 나누어 전송하고 수신측에서 재조립
처음부터 프로토콜이 있었음XX, 회사가 다른 장비간에 호환문제를 해결
	4계층과 OSI7레이어는 표현방식의 차이일 뿐 통신 프로세스는 같음

TCP/IP 4계층...
1)네트워트
2)인터페이스,인터넷
3)전송
4)응용

7계층) 물데네전세표응

송신측 --각 계층에서 헤더가 추가됨
1) APP 계층 (편지작성)
2) 트랜스포트 계층 (편지를 페이지로 나눔)
TCP : 3-way handshake를 통해 연결 설정
흐름제어, 혼잡제어, 오류제어
UDP : 신뢰성 보장X, 빠름
3) 인터넷 계층
4) 네트워크 인터페이스 계층
수신측 -- 각 계층에서 헤더를 벗겨냄
1) 네트워크 인터페이스 계층 (편지 수신)
2) 인터넷 계층 (봉투에서 페이지 꺼내기)
3) 트랜스포트 계층 (페이지 재조립)
4) 애플리케이션 계층 (편지 읽기)

송신측

• 원본: APP 계층에서 받은 데이터
• 데이터를 한번에 전송이 아닌 잘라내서 전송

Response(응답)과 Request(요청) 과정

웹브라우저에서 주소를 입력 <-- 하나의 메시지로 작성됨
트랜스포트계층에서 메시지가 잘림 (패킷으로 분해)

프로토콜의 특징

상태를 유지하는 것(상태) / 유지하지 않는 것 (무상태)

상태

서버가 클라이언트와의 통신에서 상태 정보를 유지하는지 여부

Stateful(상태유지)
HTTP: 상태유지 안함
이걸 어떻게 상태 유지시키는지?
Stateless(무상태)
내용 공유 <-- 서버 변경해도 가능
HTTP: 상태유지 안함 -- 쿠키, 세션, 토큰 등의 매커니즘을 사용해 상태정보를 유지

token에 대한 공부..

상태유지의 절차 ~ JWT공부하는것도 좋을 듯!

상태저장

1) 클라이언트 방법:쿠키, 로컬 스토리지 2)서버: 세션

한 기술을 사용하기 보다는 여러 기술을 mix해 사용
각 방법이 완벽하지 않음
애플케이션의 요구사항에 맞게, 프레임워크의 권장 방법에 맞게 사용

쿠키

웹브라우저에 저장되는 작은 텍스트 파일
키-값 쌍으로 데이터를 저장
클라이언트에서 id/pw 전달하면 서버에서 쿠키 전달
	클라이언트는 요청 시 쿠키값과 함께 전달 (요청+쿠키)
    id/pw 재입력 필요 없음!

쿠키삭제 시 이름과 경로를 정확히 지정해야 함
보안상 민감한 정보는 쿠키에 저장하지 않는게 좋음

로컬 스토리지 Local Storage

웹 브라우저에서 제공하는 저장소
만료기간이 없음
크로스 사이트 스크립팅(XSS) 공격에 취약

세션

서버측에서 접속한 사용자에 대한 접속 정보를 저장하고 있다!

HTTPS

SSL/TLS 프로토콜을 사용해 통신 내용을 암호화

중간자 공격

RESTful API

실무에서는 API 명세를 가지고 프론트엔드 개발자와 백엔드 개발자가 협업
-- 문서작업은 백엔드에서

스웨거

--
데이터, 네트워크에 대해 공부하다.
부끄럽게도 지금까지 개발을 하면서 코드에만 신경썼지 실행로직에 대해서는 배워야겠다 관심두지 않았는데 인프런에서 강의를 들으며 CS공부의 중요성에 대해 생각하고 정리하는 기회가 되었다.
특히 웹개발을 개인으로만 공부했지만, 이번에는 협업을 커뮤니케이션을 위한 공부가 되었습니다.