[개념 스터디] 2주차 (공통)

HTTP

HTTP는 hyper text transfer protocol로 hyper text, 즉 문서간의 링크를 통해 이동하는 html을 전송하는 프로토콜로 처음 시작되었다. 지금은 모든 데이터를 이 http protocol에 담아서 전송한다. 

텍스트 뿐만 아니라 이미지, 영상 등 모두.

http는 1991년부터 계속해서 upgrade 되어왔다. 간단하게 버전별로 특징을 보자.

 

HTTP/0.9 : GET 메서드만 지원. HTTP 헤더 X ( 즉, HTML 파일만 전송 가능(

HTTP/1.0 : 요청에 대한 성공과 실패를 알 수 있음. HTTP 헤더 도입 (HTML 파일 외에 다른 문서들도 전송 가능) 

HTTP/1.1 : 표준 프로토콜로 현재 가장 많이 사용하며 가장 중요한 버전. 대부분의 기능 포함.

HTTP/2.0 : 성능 개선( 병렬 처리 가능 등)

 

HTTP 1.1 VS 2.0

2.0 버전은 1.1 버전보다 늦게 나왔으므로 당연히 더 보완된 점이 있을 것이다.

1.1 버전의 경우 먼저 요처에 대한 응답이 끝날때 까지 기다려야 한다. 이를 HOL Blocking 문제 라고도 부른다.

이렇게 되면 당연히 여러개의 리소스를 처리하는데 속도 저하가 일어날 수 밖에 없다.

2.0 버전의 경우 병렬 처리가 가능하다. 요청과 응답이 동시에 이루어져 하나의 연결에 요청과 응답이 둘다 있을수 있다. 따라서 속도도 빨라진다. 

 

http 상태 코드

http 상태 코드는 클라이언트가 보낸 요청에 대한 처리 상태를 알려주는 기능이다.

상태코드의 종류는 정말 많기 때문에 크게 다섯개의 그룹으로 나눠서 보자.

- 1xx : 요청이 수신되어서 처리중일때. 거의 사용 안함.

- 2xx : 요청이 정상적으로 처리 되었을때.

- 3xx : 요청을 완료하기 위해서는 추가적인 기능이 필요할때. (redirection)

- 4xx : 클라이언트쪽 오류. ( 문법이 틀렸다던가 등등..)

- 5xx : 서버쪽 오류. 

 

요청 메서드

주요

-GET : 리소스를 조회할때

-POST : 요청 데이터를 처리할때. 주로 등록에 사용( EX. 회원가입 등록)

-PUT : 리소스를 대체할때. 해당 리소스가 없을때 생성

-DELETE : 리소스를 삭제할 때.

-PATCH : 리소스를 부분만 변경할때

기타

-HEAD :  GET과 동일하지만, 메시지 부분을 제외하고 상태줄과 헤더만 반환

-OPTIONS : 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명 ( 주로 CORS에서 사용)

-CONNECT : 대상 자원으로 식별되는 서버에 대한 터널을 설정

-TRACE : 대상 리소스에 대한 경로를 따라 메세지 루프백 테스트를 수행

 

HTTP VS HTTPS

HTTPS는 HTTP 보안 문제를 해결하기 위해 만들어 졌다.  

HTTP 는 암호화가 되지 않은 데이터를 전송하는 프로코톨이였기 때문에, 전송할때 제 3자가 중간에 데이터를 가로채서 내용들을 볼수 있었다. 

HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다. HTTPS는 HTTP와 다르게 80 포트가 아닌 443 포트를 사용하며, 네트워크 상에서 제3자가 데이터 정보를 볼수 없도록 공개키 암호화를 지원한다. 

 

* 공개키 : 모두에게 공개가능한 키

* 개인키 : 나만 가지고있고 나만 알수 있는 키

* 공개키 암호화: 공개키로 암호화 하면 개인키로만 복호화 가능-> 즉 개인키는 내가 가지고 있으므로 나만 해석이 가능.

 

HTTP VS TCP VS IP

모두 통신을 위한 프로토콜이다. 처음에는 IP에서 시작해서 보완되면서 TCP, HTTP까지 추가되었다. 

OSI 7계층에서 IP는 3계층, TCP는 4계층, HTTP는 최상위 계층에서 동작한다. 

동작 원리는 간단하게 살펴보면, 

클라이언트가 서버에 URL을 요청했을때, DNS 서버는 도메인에 매핑되는 IP주소를 찾는다. 

TCP 계층에서는 HTTP 메세지를 패킷으로 분해한다. 그리고 IP 계층에서 전송 위치를 확인하고 네트워크를 통해서 전송한다. 

 

 

서버와 클라이언트

HTTP는 서버와 클라이언트 간에 통신을 위한 프로토콜이므로 서버와 클라이언트에 대해서도 알아보자.

클라이언트는 서버에게 요청을 보내고 요청에대한 응답이 올때까지 그냥 기다린다. 표면적으로 봤을때는 이런 간단한 동작이지만 각각의 역할을 분리한다는 게 중요하다. 이렇게 하면 독립적으로 진화할수 있다. 

클라이언트는 오직 사용자들을 위한 UI를 그리는데 집중하고, 서버는 비지니스 로직과 데이터를 처리한다. 

 

세션  & 쿠키

쿠키 (Cookie)

- 클라이언트(브라우저) 쪽에 저장되는 키와 값이 있는 작은 용량의 데이터 파일이다.

- 사용자 인증이 유지되는 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되도 유지된다.

- 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.

- 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 요청 헤더에 넣어서 자동으로 서버에 전송한다.

 

세션 (Session)

- 세션은 쿠키를 기반으로 하지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버측이서 관리한다.

- 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여한다. 

- 사용자 정보를 서버에 저장해 쿠키보다 보안측면에 좋지만, 사용자가 많을수록 당연히 서버의 메모리를 많이 차지한다.

- 클라이언트가 요청을 보낼때 서버가 그 클라이언트에게 ID를 부여하는데 그것이 세션 ID이다.

Prettier & ESLint

Prettier 와 ESLint 둘다 VS Code의 extension으로 코드를 작성하는데 도움을 주는 도구들이다.

Prettier

Prettier 는 정해진 규칙에 따라 자동으로 코드 스타일을 정리해준다. 그리고 그 규칙들은 사용자가 직접 커스텀 할수 있다.

 

ESLint

ESLint 는 자바스크립트 문법에서 에러를 표시해주는 도구이다. 

이때 에러는 정말 문법적으로 문제가 되는 부분을 지정할수도 있고, 아니면 전반적인 코딩스타일까지도 지정할수가 있다. 

 

 

 

 

 

 

 

THTTTDFDSFSD

 

ㅏㅜㅏF

DDDFDDVDKLDSVCS