New 병아리 개발자

# 모든 개발자를 위한 HTTP 웹 기본 지식 학습

# TCP, UDP

## 인터넷 프로토콜 스택의 4계층

• 애플리케이션 계층 - HTTP, FTP
• 전송 계층 - TCP, UDP
• 인터넷 계층 - IP
• 네트워크 인터페이스 계층

## 프로토콜 계층

• 외국에 있는 친구와 채팅을 한다고 가정할 때..
• 메시지를 생성하여 SOCKET 라이브러리를 통해 전달
• TCP 정보를 생성(메시지 데이터 포함)
• IP 패킷 생성(TCP 데이터 포함)
• 네트워크 인터페이스의 LAN 카드를 통해 이더넷 프레임을 포함하여 보내진다.

## IP 패킷 정보

• 출발지 IP, 목적지 IP, 전송 데이터를 포함

## TCP/IP 패킷 정보

• IP패킷에 TCP 관련 정보 포함
• TCP 관련 정보 : 출발지 PORT, 목적지 PORT, 전송 제어, 순서, 검증 정보 등 
• TCP 관련 정보가 포함되어 IP 만으로 해결하지 못했던 순서 제어 문제 등을 해결할 수 있게 된다.

## TCP의 특징 

• TCP (Transmission Control Protocol : 전송 제어 프로토콜)

1. 연결지향 - TCP 3 way handshake(가상 연결)

2. 데이터 전달 보증

3. 순서 보장

• 신뢰할 수 있는 프로토콜
• 현재는 대부분 TCP 사용

### TCP의 특징 - 1. 연결지향 TCP 3 way handshake

SYN : 접속 요청
ACK : 요청 수락

• 연결 과정(connect)을 살펴 보면..
• 클라이언트에서 서버로 SYN 메시지 전송
• 서버에서는 SYN + ACK 메시지를 클라이언트에게 전송
• 그러면 클라이언트는 서버로 ACK 전송 (요즘엔 최적화가 되서 이때 데이터 전송하기도 함)
• TCP 3 way handshake(3번 주고받아)로 연결이 되고 나면 최종적으로 데이터 전송
• 하지만, TCP 3 way handshake는 논리적으로 연결 된 것일 뿐.

### TCP의 특징 - 2. 데이터 전달 보증

• 클라이언트가 서버에 데이터 전송
• 그러면 서버에서 클라이언트에게 데이터를 받았다는 응답을 전달
• 만약, 응답이 없을 경우엔 문제가 있다는걸 인지 가능

### TCP의 특징 - 3. 순서 보장

• 클라이언트가 패킷1, 2, 3 순서로 서버에 전송
• 서버에 패킷이 보낸 순서대로 전송된 것이 아닌 패킷 1, 3, 2 같은 순서로 도착했다면(문제발생)
• 패킷 2부터 다시 보내도록 서버에서 클라이언트에 요청하여 순서가 보장된다.

## UDP 특징

• UDP (User Datagram Protocol : 사용자 데이터그램 프로토콜)
• 하얀 도화지에 비유(기능이 거의 없음)
• 연결지향, 데이터 전달 보증, 순서 보장하지 않음
• IP와 거의 비슷하지만 + PORT + 체크섬(검증) 정도만 추가
• 애플리케이션에서 추가 작업이 필요하다.
• 단순하고 빠르다.

출처 : 인프런 모든 개발자를 위한 HTTP 웹 기본 지식

# 자바스크립트 학습

# Global 오브젝트

## Global 오브젝트의 개요

• 모든 <script> 엘리먼트를 통해 하나만 존재한다.
• 하나만 존재하므로 new 연산자로 인스턴스 생성 불가
• 모든 코드에서 공유한다.
• 이름(Global)은 있지만 오브젝트 실체가 없다.
• 오브젝트를 작성(사용)할 수 없다.

## Global 오브젝트 함수, 변수

• Global 오브젝트의 함수, 변수를 Global 함수, Global 변수라고 한다.
• 함수 안에 작성한 것을 지역 함수, 로컬(Local) 함수라고 부르며, 함수 안에 작성된 변수를 지역 변수, 로컬 변수라고 한다.
• Global 오브젝트를 전역 객체라고 부르기도 한다.

# Global 프로퍼티

## 프로퍼티 리스트

• 인코딩 : 숫자와 문자를 사람이 보기 어렵게 바꾸는 것
• 디코딩 : 인코딩 한 것을 사람이 볼 수 있는 숫자와 문자로 바꾸는 것

## Global 프로퍼티

• Global 프로퍼티의 종류

NaN : Not-a-Number

Infinity : 무한대

undefined : undefined

• 상수 개념으로 사용하며, 외부에서 프로퍼티의 값을 변경할 수 없다.
• delete 연산자로 삭제 불가

log(NaN);
log(Infinity);
log(undefined);

=>
NaN
Infinity
undefined

# Global 오브젝트와 Window 오브젝트의 관계

## Global과 Window 관계

• 글로벌과 window  오브젝트의 주체 

글로벌 오브젝트 : 자바스크립트(JS)가 주체

window 오브젝트 : window가 주체

• 주체는 다르지만, 글로벌 오브젝트의 프로퍼티와 함수가 window 오브젝트에 설정된다. 따라서 프로퍼티와 함수 사용하려면 window 오브젝트를 사용해야 한다.
• Host 오브젝트의 개념을 활용하여 Global오브젝트의 함수와 프로퍼티를 window 오브젝트에 저장할 수 있고, window 오브젝트를 이용하여 사용할 수 있다.

# 정수, 실수 변환

## parseInt()

• 값을 정수로 변환하여 반환한다.

값이 123.56이면 123반환

log(parseInt(123.56));

=>
123

소수를 제외하고 정수만 반환

• 값이 "123px"이면 123 반환, 주로 이 용도로 parseInt를 많이 사용한다.

log(parseInt("-123.45"));
log(parseInt("123px"));
log(parseInt("12AB34"));

=>
-123
123
12

• 0 또는 빈 문자열을 제외시킨다.

log(parseInt("0012"));
log(parseInt("   123"));
log(parseInt());

=>
12
123
NaN

• 진수를 적용하여 값을 변환한다.

log(parseInt(13, 16));	// 13을 16진수로 변환
log(parseInt("0x13"));	// 0(숫자)x는 16진수를 나타낸다.

=>
19
19

## parseFloat()

• 값을 실수로 변환하여 반환한다.

자바스크립트는 기본적으로 실수로 처리하므로
실수로 변환하는 것은 의미가 없다.
하지만, 문자열의 실수 변환은 의미가 있다.

log(parseFloat("-123.45") + 6);
log(parseFloat("12.34AB56"));

=>
-117.45
12.34

String 타입이지만 값이 숫자이면 변환
문자 이후는 변환하지 않는다.

• 지수, 공백의 변환

log(parseFloat("1.2e3"));
log(parseFloat("  12.34  ") + 20);
log(parseFloat());

=>
1200
32.34
NaN

# 모든 개발자를 위한 HTTP 웹 기본 지식 학습

# 인터넷 네트워크

## 인터넷 통신

• 인터넷에서 컴퓨터 둘은 어떻게 통신?
• 복잡한 인터넷 망 속에서 아주 먼 거리에 있는 대상에서 메시지 전송 관련 어떤 규칙과 방식을 통해 보내는 지 등등 의문을 바탕으로 학습 시작

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

• 복잡한 인터넷 망에서 'hello world' 메시지를 외국에 있는 친구에게 보낼 때..
• 클라이언트 : 메시지를 보내는 대상(나)
• 서버 : 보낸 메시지를 받는 대상(친구)
• 클라이언트와 서버 각각 IP 주소가 있어야 가능.

### 클라이언트 패킷 전달

• IP(인터넷 프로토콜)의 역할 : 지정한 IP 주소(IP  Address)에 데이터 전달할 수 있도록 정해진 규칙, 패킷(Packet)이라는 통신 단위로 데이터를 전달하게 된다.
• 이때, 전송 데이터를 그냥 보내는 것이 아닌 IP 패킷이라는 규칙을 바탕으로 전송.
• IP 패킷 정보에 주소를 적듯 출발지 IP, 목적지 IP, 전송 데이터 등을 입력하여 IP 패킷을 만든 후, 인터넷 망에 만들어진 IP 패킷을 전송, 그러면 규칙에 맞게 인터넷 망에서 노드간에 패킷이 전달되며 목적지에 도착하게 된다.

### 서버 패킷 전달  

• 메시지를 받은 대상 또한 동일한 방식을 이용하여 응답 메시지를 전송한다.
• IP패킷 정보 작성(출발지 IP, 목적지 IP, 전송 데이터) 후, 인터넷 망에 만들어진 IP 패킷을 전송, 그러면 규칙에 맞게 인터넷 망에서 노드간에 패킷이 전달되며 목적지에 도착하게 된다.

## IP 프로토콜의 한계

• 비 연결성 : 패킷을 받을 대상이 없거나, 서비스 불능 상태여도 패킷 전송
• 비 신뢰성 : 중간에 패킷이 사라지거나, 패킷이 순서대로 도착하지 않을 수 있다.
• 프로그램 구분 : 같은 IP를 사용하는 서버에서 통신하는 애플리케이션이 둘 이상이면 어떻게 구분할지..에 대한 한계 존재
• 대상이 서비스 불능, 패킷 전송 / 패킷 소실 / 패킷 전달 순서 문제 발생
• 이러한 문제점을 해결해 주는게 바로 TCP, UDP 프로토콜이다.

출처 : 인프런 모든 개발자를 위한 HTTP 웹 기본 지식

# 자바스크립트 학습

# 함수의 형태

• 함수 선언문

Function Declaration

Function getBook(book) {코드}

• 함수 표현식

Function Expression

var getBook = function(book) {코드}

## 함수 선언문

• 함수 선언문의 형태

function getBook(title) {
	return title;	// 함수 코드
};

var result = getBook("JS책");
log(result);

=>
JS책

function 키워드, 함수 이름, 블록{} 은 필수!!!
(파라미터, 함수 코드는 선택이다.)

함수 이름을생성한 function 오브젝트의 이름으로 사용한다.

## 함수 표현식

• 함수 표현식 형태

var getBook = function(title) {
	return title;
};

var result = getBook("JS첵");
log(result);

=>
JS책

var getBook = function inside(value) {
	if (value === 102) {
    	return value;
    };
    log(value);
    return inside(value + 1);
};

getBook(100);

# 함수 호출

## call()

• 호출할 함수.call(파라미터);

function getTotal(one, two) {
	return one + two;
};

var result = getTotal.call(this, 10, 20);
log(result);

=>
30

call() 시 첫번째 파라미터는 파라미터 값으로 넘어가지 않음
첫번째 파라미터는 호출된 함수에서 this로 참조할 오브젝트이다.
one에 10, two에 20 담겨져 30 출력


var value = {one: 10, two: 20};
function getTotal() {
	return this.one + this.two;
};

var result = getTotal.call(value);
log(result);

=>
30

일반적으로 this사용 하나 다른 오브젝트도 작성 가능하다.

## apply()

• 호출할 함수.call(파라미터, [파라미터]);

function getTotal(one, two) {
	return one + two;
};

var result = getTotal.apply(this, [10, 20]);
log(result);

=>
30

apply() 의 경우 두번째 파라미터를 배열로 작성

• 파라미터 수가 유동적일 때 사용한다. 
• 두 번째 파라미터에 배열을 사용한다.
• call(), apply()의 부가적인 목적은, 첫 번째 파라미터에 호출된 함수에서 this로 참조할 오브젝트를 사용하는 것이다. 

## toString()

• 모든 빌트인 오브젝트에 toString()이 있지만, 오브젝트마다 반환되는 형태가 다르다.
• function 오브젝트의 toString()은 함수 코드를 문자열로 반환한다.

var getBook = function() {
	return 100 + 23;
};

var result = getBook.toString();
log(result);

=>
function(){ return 100 + 23; }

# Argument 오브젝트

## 아큐먼트 오브젝트

• 함수가 호출되어 자바스크립트 엔진이 함수 안으로 이동했을 때 arguments 이름으로 생성되는 오브젝트이다.
• 함수를 호출한 곳에서 넘겨 준 값을 순서대로 저장한다.
• 호출된 함수에 파라미터를 작성한 경우 호출된 함수의 파라미터에도 값을 설정하고, 아규먼트 오브젝트에도 저장한다.

function getTotal(one) {
	return one + arguments[1] + arguments[2];
};

var result = getTotal(10, 20, 30);
log(result);

=>
60

• apply()와 아규먼트 오브젝트

function getTotal(one) {
	return one + arguments[1] + arguments[2];
};

var result = getTotal.apply(this, [10, 20, 30]);
log(retult);

=>
60

apply()의 두 번째 파라미터가 배열, 파라미터 값이 유동적이다.
이때 arguments를 사용, 유동적인 파라미터 수에 대응할 수 있다.