New 병아리 개발자

# HTTP 기본

## HTTP (HyperText Transfer Protocol)

• HTTP 메시지에 모든 것을 전송.
• (HTML, TEXT, IMAGE, 음성, 영상, 파일, JSON, XML (API) 등 거의 모든 형태의 데이터 전송 가능.
• 서버간에 데이터를 주고 받을때에도 대부분 HTTP 사용.
• HTTP/1.1 : 1997년, 가장 많이 사용. (우리에게 가장 중요한 버전)

기반 프로토콜

• TCP : HTTP/1.1, HTTP/2
• UDP : HTTP/3
• 현재 HTTP/1.1를 주로 사용

## HTTP 특징

• 클라이언트 서버 구조로 동작.
• 무상태 프로토콜(스테이스리스), 비연결성
• HTTP 메시지를 통해 통신.
• 단순하고 확장 가능.

1. 클라이언트 서버 구조

• Request Response 구조
• 클라이언트 : 서버에 요청을 보내고, 응답을 대기.
• 서버 : 요청에 대한 결과를 만들어서 응답.
• 이렇게 클라이언트 서버 구조를 만들게 되면 양쪽이 독립적으로 진행 할 수 있음.

2. 무상태 프로토콜 (Stateless)

• 서버가 클라이언트의 상태를 보존하지 않는다.
• Stateful, Stateless 차이
• Stateful : 상태 유지. (서버가 클라이언트의 이전 상태를 보존)
• Stateless : 무상태, 상태를 유지하지 않는다.

Stateful (상태유지)
- 항상같은 서버가 유지되어야 한다.(서버 증설 어려움)
- 중간에 장애 발생 시 처음부터 클라이언트는 처음부터 다시 해야함.

Stateless (무상태)
- 아무 서버나 호출해도 됨. (클라이언트가 요청할때부터 필요 데이터를 모두 담아서 보냄)
- 상태를 보관하지 않고, 필요한 응답만 함.
- 스케일 아웃 (수평 확장 유리) : 같은 기능을 하는 서버군 증설 가능
(무상태는 응답 서버를 쉽게바꿀 수 있다. (무한한 서버 증설 가능))

• Stateless (무상태) 의 한계

모든 것을무상태로 설계 할 수 있는 경우도 있고 없는 경우도 있다.
- 무상태 : 로그인이 필요 없는 단순한 서비스 소개 화면 등.
- 상태유지 : 로그인 등.

로그인한 사용자의 경우 로그인 했다는 상태를 서버에 유지.

일반적으로 브라우저 쿠키와 서버 세션등을 사용해서 상태를 유지.

상태 유지는 최소한만 사용.

3. 비 연결성 (connectionless)

• 연결을 유지하는 모델 (연결 유지 시 서버의 자원 소모)
• 연결을 유지하지 않는 모델 (클라이언트와 서버가 요청을 주고받을 때만 연결하여 최소한의 자원 유지)
• HTTP는 기본적으로 연결을 유지하지 않는 모델.
• 일반적으로 초 단위 이하의 빠른 속도로 응답.
• 1시간 동안 수천명이 서비스를 사용해도 실제 서버에서 동시 처리하는 요청은 매우 작음.
• 장점 : 서버 자원을 매우 효율적으로 사용할 수 있음.
• 단점은 아래와 같음.

1. TCP/IP 연결을 새로 맺어야 함 : 3 way handshake 시간 추가.

2. 웹 브라우저로 사이트 요청 시 HTML 뿐만 아니라, 자바스크립트, CSS, 추가 이미지 등
수 많은 자원을 함께 다운로드.

• 단점을 해결하기 위해 HTTP는 기본적으로 지속 연결 (Persistent Connections) 로 문제 해결. (HTTP2, 3에서는 더욱 최적화 됨)
• 최대한 스테이스리스하게 설계해야 대용량 트래픽에 대응 가능하다!

4. HTTP 메시지

• HTTP 메시지 구조는 아래와 같다.

시작라인 : 요청 메시지

start-line = request-line / status-line

request-line = method SP(공백) request-target SP HTTP-version CRLF(엔터)

• HTTP 메서드 (GET:조회)

요청 메시지 - HTTP 메서드
- 종류 : GET, POST, DELETE .. 
- 서버가 수행해야 할 동작을 지정.
- GET : 리소스 조회
- POST : 요청 내역 처리

• 요청 대상(/search?q=hello&hl=ko)

요청 메시지 - 요청 대상
- absolute-path[?query] (절대경로[?쿼리])
- 절대경로="/"로 시작하는 경로

• HTTP Version

시작 라인 : 응답 메시지

start-line = request-line / status-line

status-line = HTTP-version SP status-code SP reason-phrase CRLF

• HTTP 버전
• HTTP 상태 코드 : 요청 성공, 실패를 나타냄

200 : 성공

400 : 클라이언트 요청 오류

500 : 서버 내부 오류

• 이유 문구 : 사람이 이해할 수 있는 짧은 상태 코드 설명 글.

HTTP 헤더

header-field = field-name ":" OWS field-value OWS (OWS:띄어쓰기 허용)

field-name 은 대소문자 구문 없음.

• 용도 : HTTP 전송에 필요한 모든 부가정보.

메시지 바디의 내용, 메시지 바디 크기, 압축, 인증, 요청 클라이언트(브라우저) 정보,
서버애플리케이션 정보, 캐시 관리 정보 등.

• 표준 헤더가 너무 많음.
• 필요 시 임의의 헤더 추가 가능.

HTTP 메시지 바디

• 실제 전송할 데이터.
• HTML 문서, 이미지, 영상, JSON 등 byte 로 표현할 수 있는 모든 데이터 전송 가능.

5. 단순함 확장 가능

• HTTP는 단순하다. (스펙 참고)
• HTTP 메시지도 매우 단순
• 크게 성공하는 표준 기술은 단순하지만 확장 가능한 기술.

# URI와 웹 브라우저 요청 흐름

## URI (Uniform Resource Identifier)

• Uniform : 리소스를 식별하는 통일된 방식
• Resource : 자원, URI로 식별할 수 있는 모든 것 (제한 없음)
• Identifier : 다른 항목과 구분하는데 필요한 정보
• URI 는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수있다.
• URI 는 URL, URN을 포함.
• https://www.ietf.org/rfc/rfc3986.txt 

### URL, URN

• URL (Uniform Resource Locator)
• URN (Uniform Resource Name)
• URL - Locator : 리소스가 있는 위치를 지정.
• URN - Name : 리소스에이름을 부여.
• 위치는 변할 수 있지만, 이름은 변하지 않는다.
• urn:isbn:896012345 (어떤 책의 isbn URN)
• URN 이름만으로 실제 리소스를 찾을 수 있는 방법이 보편화 되지 않음.

### URL 분석

scheme://[userinfo@]host[:post][/path][?query][#fragment]


=> 예시.
https://www.google.com:443/search?q=hello&hI=ko

프로토콜 : https
호스트명 : www.google.com
포트 번호 : 443
패스 : /search
쿼리 파라미터 : q=hello&hI=ko

1. scheme

• 주로 프로토콜에 사용.
• 프로토콜 : 어떤 방식으로 자원에 접근할 것인가에 대한 약속 규칙. (예) http, https, ftp 등)
• http 는 80포트 / https 는 443 포트를 주로 사용. (포트 생략 가능)
• https : http 에 보안 추가 (HTTP Secure)

2. userinfo

• URL 에 사용자 정보를 포함해서 인증해야 할 때 사용. (거의 사용하지 않음)

3. host

• 포트(PORT)
• 접속포트
• 일반적으로는 생략 (생략시 http 는 80 / https 는 443)

4. path

• 리소스 경로(path), 계층적 구조

path 예)

/home//file1.jpg

/members

5. query

• key=value 형태
• ? 로 시작, & 로 추가 가능 : ?keyA=valueA&keyB=valueB
• query parameter 또는 query string 등으로 불린다. (웹서버에 제공하는 파라미터 문자 형태)

6. fragment

• html 내부 북마크 등에 사용
• 서버에 전송하는 정보가 아니다.
• 잘 사용하지 않는다.

## 웹 브라우저 요청 흐름

• https://www.google.com:443/search?q=hello&hl=ko 라는 호출이 들어올떄.

1. DNS 조회 : 위 주소를 예로 www.google.com:443 을 바탕으로 DNS 조회
2. HTTP 요청 메시지 생성 : 웹 브라우저가 HTTP 메시지 생성.
3. HTTP 요청 메시지 전송 : SOCKET 라이브러리를 통해 전달.
4. TCP/IP 패킷 생성 (HTTP 메시지 포함) 하여 전달.
5. 응답 패킷 전달

# 인터넷 네트워크

## IP (인터넷 프로토콜)

• 지정한 IP 주소(IP Address)에 데이터 전달.
• 패킷(Packet)이라는 통신 단위로 데이터 전달.

1. IP 주소 부여.

2. IP 패킷 정보

• 요청.
• 출발지 IP, 목적지 IP, 기타 등이 포함된 전송 데이터.

3. 클라이언트 패킷 전달.

4. 서버 패킷 전달.

• 응답.
• 출발지 IP, 목적지 IP, 기타 등이 포함된 전송 데이터.

## IP 프로토콜의 한계

1. 비연결성

• 대상이 서비스 불능, 패킷 전송 (패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전달) : 대상 서버가 패킷을 받을 수있는 상태인지 모름.

2. 비신뢰성

• 패킷 소실 : 패킷 전송 중간에 특정 노드가 종료된 경우 등.
• 패킷 전달 순서 문제 발생 : 대량의 데이터를 분할하여 전송 시 순서에 맞지 않게 도착하게 되면 의도에 맞지 않은 메시지 등이 전송되게 됨.

3. 프로그램 구분

• 같은IP를 사용하는 서버에서 통신하는 애플리케이션이 둘 이상이라면?
• 위 문제들을 해결하기 위해 등장한게 바로 TCP, UDP

## TCP, UDP

• 인터넷 프로토콜 스택의 4계층은 아래와 같다.

애플리케이션 계층 - HTTP, FTP

전송 계층 - TCP, UDP

인터넷 계층 - IP

네트워크 인터페이스 계층

• TCP/IP 패킷 정보 : 출발지 PORT, 목적지 PORT, 전송 제어, 순서, 검증 정보, 전송 데이터 등 포함.

## TCP 특징

• 전송제어 프로토콜.
• TCP는 신뢰할 수 있는 프로토콜로 현재 대부분 TCP 사용.

1. 연결지향

• TCP 3 way handshake (가상 연결)
• TCP 3 way handshake (아래 참고)

TCP/IP 프로토콜로 연결 시. (connect, 연결 과정)
실제로 연결 된게 아님. (논리적, 개념적으로만 연결된 것. 가상 연결)

1. SYN
SYN : 접속 요청
클라이언트 > 서버

2. SYN + ACK
ACK : 요청 수락
서버 > 클라이언트

3. ACK
ACK : 요청 수락 
최적화 되어 3번 단계에서 ACK와 함께 데이터 전송 가능. (원래는 3번 단계까지 완료 후 데이터 전송)

2. 데이터 전달 보증

3. 순서 보장

## UDP 특징

사용자 데이터그램 프로토콜

기능이 거의 없음. (하얀 도화지에 비유)

연결지향 TCP 3 way handshake 없음. / 데이터 전달 보증 없음. / 순서보장 없음.

1. 데이터 전달 및 순서가 보장되지 않지만 단순하고 빠름.

2. IP와 거의 같다. (PORT, 체크섬 정도만 추가)

3. 애플리케이션에서 추가작업 필요.

## PORT

• 같은 IP 내에서 프로세스 구분.
• 예) IP가 아파트라면 PORT는 동, 호수

## DNS

• 도메인 네임 시스템.
• DNS 서버 : DNS 서버에 도메인명 등록(전화번호부와 비슷)
• 도메인 명을 IP 주소로 변환
• IP는 기억하기 어렵고, 변경될 수 있는데 이런 단점을 해결해주는게 DNS

# TypeScript 

## 실습_전화번호부 애플리케이션

• 내려받은 소스 바탕으로 진행.
• address-book 터미널로 열어서 npm i 진행.

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "target": "es5",
    "lib": ["es2015", "dom", "dom.iterable"],
    "noImplicitAny": true,
    "strict": true,
    "strictFunctionTypes": true
  },
  "include": ["./src/**/*"]
}

동기 / 비동기 코드

• promise : 비 동기 처리 시 사용.

// 동기 코드.
// function fetchItems() {
//     let items = ['a', 'b', 'c'];
//     return items;
// }

// let result = fetchItems();
// console.log(result);


// 비동기 코드
function fetchItems(): Promise<string[]> {
    let items: string[] = ['a', 'b', 'c'];
    return new Promise(function(resolve) {
        resolve(items);
    });
}

Map

// map
let heroes= [
    { name: 'Kim', age: 30 },
    { name: 'Jin', age: 130 },
];

heroes.map(function(hero) {
    return hero.name;   // ['Kim', 'Jin']
});

index.ts

interface PhoneNumberDictionary {
  [phone: string]: {
    num: number;
  };
}

interface Contact {
  name: string;
  address: string;
  phones: PhoneNumberDictionary;
}

enum PhoneType {
  Home = 'home',
  Ofiice = 'office',
  Studio = 'studio',
}

// api
// TODO: 아래 함수의 반환 타입을 지정해보세요.
// promise
function fetchContacts(): Promise<Contact[]> {
  // TODO: 아래 변수의 타입을 지정해보세요.
  const contacts: Contact[] = [
    {
      name: 'Tony',
      address: 'Malibu',
      phones: {
        home: {
          num: 11122223333,
        },
        office: {
          num: 44455556666,
        },
      },
    },
    {
      name: 'Banner',
      address: 'New York',
      phones: {
        home: {
          num: 77788889999,
        },
      },
    },
    {
      name: '마동석',
      address: '서울시 강남구',
      phones: {
        home: {
          num: 213423452,
        },
        studio: {
          num: 314882045,
        },
      },
    },
  ];
  return new Promise(resolve => {
    setTimeout(() => resolve(contacts), 2000);  // 2초
  });
}

// main
class AddressBook {
  // TODO: 아래 변수의 타입을 지정해보세요.
  contacts: Contact[] = [];

  constructor() { // 초기화 코드
    this.fetchData();
  }

  fetchData(): void {
    fetchContacts().then(response => {
      this.contacts = response;
    });
  }

  /* TODO: 아래 함수들의 파라미터 타입과 반환 타입을 지정해보세요 */
  findContactByName(name: string): Contact[] {
    return this.contacts.filter(contact => contact.name === name);
  }

  findContactByAddress(address: string): Contact[] {
    return this.contacts.filter(contact => contact.address === address);
  }

  // phoneNumber : hone,  office, studio -> enum으로 제한.
  findContactByPhone(phoneNumber: number, phoneType: PhoneType): Contact[] {
    return this.contacts.filter(
      contact => contact.phones[phoneType].num === phoneNumber
    );
  }

  addContact(contact: Contact): void {
    this.contacts.push(contact);
  }

  // map api
  displayListByName(): string[] {
    return this.contacts.map(contact => contact.name);
  }

  displayListByAddress(): string[] {
    return this.contacts.map(contact => contact.address);
  }
  /* ------------------------------------------------ */
}

new AddressBook();