자바스크립트의 class
클래스
클래스는 객체를 생성하기 위한 템플릿입니다.
자바스크립트는 원래 prototype이라는 것을 기반으로 생성했지만
ES5 부터는 class라는 키워드로 클래스를 선언할 수 있습니다.
클래스>>객체>>인스턴스
constructor
개체 초기화를 위한 메서드, class에는 constructor 한개만 가능
class Rectangle {
constructor(height,width){
this.height =height;
this.width = width;
}
}
const p = new Rectangle();
객체나 인스턴스나 별로 차이가 없다.
static 키워드는 클래스에 대한 정적 메서드 또는 속성을 정의하며 클래스의 인스턴스에서 호출이 불가함
1.중복되는 함수, 데이터를 정의할 때 쓰임(메모리 이점)
2.이 클래스의 객체들끼리 사용되는 메서드나 속성이다. 라는 명시성이라는 장점이 있음
class Point{
constructor(x,y){
this.x=x;
this.y=y;
}
static displayName = "Point";
static distance(a,b){
const dx = a.x-b.x;
const dy = a.y-b.y;
return Math.hypot(dx,dy);
}
}
HTTP/1.x HTTP2,HTTP3 의 차이
HTTP/1.0 (Hypertext Transfer Protocol)
HTTP/1.0은 기본적으로 한 연결당 하나의 요청을 처리하도록 설계되었습니다.
이는 RTT 증가를 불러오게 되었습니다.
RTT증가
서버로부터 파일을 가져올 때마다 TCP의 3-웨이 핸드셰이크를 계속해서 열어야 하기 때문에 RTT가 증가하는 단점이 있었습니다.
RTT: 패킷이 목적지에 도달하고 나서 다시 출발지로 돌아오기까지 걸리는 시간이며 패킷 왕복 시간
HTTP/1.0 의 RTT 증가를 해결하기 위한 방법
1.이미지스플리팅
2.코드압축
3.Base64 인코딩
이미지 스플리팅
많은 이미지를 다운로드받게 되면 과부하가 걸리기 때문에 많은 이미지가 합쳐 있는 하나의 이미지를 다운로드받고, 이를 기반으로 background-image의 position을 이용하여 이미지를 표기 ㅡㅜ방법입니다.
다음 코드처럼 하나의 이미지 background-image:url("icons.png"); ,
backgroundposition 등을 기반으로 이미지를 설정합니다.
하나를 다운받아서 그걸 이용해서 사용
코드압축
코드압축은 코드를 압축해서 개행 문자, 빈칸을 없애서 코드의 크기를 최소화하는 방법입니다. 개행 문자, 띄어쓰기 등이 사라져 코드가 압축 > 코드용량이 줄어듦
이미지 Base64 인코딩
이미지 파일을 64진법으로 이루어진 문자열로 인코딩하는 방법입니다. 이 방법을 사용하면 서버와의 연결을 열고 이미지에 대해 서버에 HTTP 요청을 할 필요가 없다는 장점이 있습니다.
하지만 Base64 문자열로 변환할 경우 37% 정도 크기가 더 커지는 단점이 있습니다.
인코딩: 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해 다른 형태나 형식으로 변환하는 처리 방식
HTTP/1.1
HTTP/1.0에서 발전한 것이 바로 HTTP/1.1 입니다.
매번 TCP 연결을 하는 것이 아니라 한 번 TCP 초기화를 한 이후에 keet-alive 라는 옵션으로 여러 개의 파일을 송수신할 수 있게 바뀌었습니다.
참고로 HTTP/1.0에서도 keep-alive가 있었지만 표준화가 되어 있지 않았고 HTTP/1.1 부터 표준화가 되어 기본 옵션으로 설정되었습니다.
그러나... 문제가 해결되지는 않았다. HTTP1.x의 해결할 수 없었던 문제점!!!
HOL Blocking
HOL Blocking(Head Of Line Blocking)은 네트워크에서 같은 큐에 있는 패킷이 그 첫 번째 패킷에 의해 지연될 때 발생하는 성능 저하 현상을 말합니다.
예를 들어 앞의 그림처럼 image.jpg와 style.css,data.xml을 다운로드 받을때 보통은 순차적으로 잘 받아지지만 image.jpg가 느리게 받아진다면 그 뒤에 있는 것들이 대기하게 되며 다운로드가 지연되는 상태가 되는 것이죠.
HTTP/2
HTTP/2는 SPDY프로토콜에서 파생된 HTTP/1.x 보다 지연 시간을 줄이고 응답시간을 더 빠르게 할 수 있으며 멀티플렉싱, 헤더 압축, 서버 푸시 , 요청의 우선순위 처리를 지원하는 프로토콜입니다.
멀티플렉싱
멀티플렉싱이란 여러 개의 스트림을 사용하여 송수신한다는 것입니다. 이를 통해 특정 스트림의 패킷이 손실되었다고 하더라도 해당 스트림에만 영향을 미치고 나머지 스트림은 멀쩡하게 동작할 수 있습니다.
*스트림(stream): 시간이 지남에 따라 사용할 수 있게 되는 일련의 데이터 요소를 가리키는 데이터 흐름
헤더 압축
HTTP/1.x에는 크기가 큰 헤더라는 문제가 있었습니다.
이를 HTTP/2 에서는 헤더 압축을 써서 해결하는데, 허프만 코딩 압축 알고리즘을 사용하는 HPACK 압축 형식을 가집니다.
*허프만 코딩: 허프만 코딩은 문자열을 문자 단위로 쪼개 빈도수를 세어 빈도가 높은 정보는 적은 비트 수를 사용하여 표현하고, 빈도가 낮은 정보는 비트 수를 많이 사용하여 표현해서 전체 데이터의 표현에 필요한 비트양을 줄이는 원리가 들어있는 알고리즘입니다.
서버 푸시
HTTP/1.1 에서는 클라이언트가 서버에 요청을 해야 파일을 다운로드 받을 수 있었다면, HTTP/2 클라이언트 요청 없이 서버가 바로 리소스를 푸시할 수 있습니다.
html에는 CSS나 JS파일이 포함되기 마련인데 html을 읽으면서 그 안에 들어있던 css파일을 서버에서 푸시하여 클라이언트에 먼저 줄 수 있습니다.
HTTP3의 등장
TCP위에서 돌아가는 HTTP/2 와는 달리 HTTP/3 은 QUIC 이라는 계층 위에서 돌아가며, TCP기반이 아닌 UDP기반으로 돌아 갑니다.
HTTP/2에서 장점이었던 멀티플렉싱을 가지고 있으며
"초기 연결 설정 시 지연 시간 감소"라는 대표적 특징이 있습니다.
초기 연결 설정 시 지연 시간 감소
QUIC는 TCP를 사용하지 않기 떄문에 통신을 시작할 대 번거로운 3-웨이 핸드셰이크과정을 거치지 않아도 됩니다.
QUIC은 첫 연결 설정에 1-RTT만 소요됩니다.
클라이언트가 서버에 어떤 신호를 한 번주고, 서버도 거기에 응답하기만 하면 바로 본 통신을 시작할 수 있다는 것이죠.
참고로 QUIC은 순방향 오류 수정 메커니즘(FEX,Forword Error Correction)이 적용되었습니다. 이는 전송한 패킷이 손실되었다면 수신 측에서 에러를 검출하고 수정하는 방식이며 열악한 네트워크 환경에서도 낮은 패킷 손실률을 자랑합니다.
