HTTP/ 네트워크

waymo·2022년 8월 5일
http
0

코드스테이츠 FE 부트캠프

목록 보기
22/28
post-thumbnail

🌎 HTTP / 네트워크



📍 웹 애플리케이션

  • 클라이언트 - 서버 아키텍처, 2티어 아키텍처라고도 불리우는 설계 방식에 대해 알아보자!
    우리가 만약 쇼핑몰 앱을 열었을때, 와이파이나 데이터를 통해 인터넷이 연결 되어 있지 않다면 어떻게 될까? 모두 다 알고 있듯이 쇼핑몰 앱은 동작하지 않는다.
    쇼핑몰 앱은 상품정보를 서버로부터 받아오기 때문이다.

  • 서버와 클라이언트 , 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨것을 2-Tier 아키텍처, 클라이언트 - 서버 아키텍처 라고 부른다.

  • 클라이언트는 서버에게 요청을 하고 , 서버는 클라이언트에게 응답을 한다.
    서버는 리소스를 응답해주는 역할만 담당한다. 리소스를 저장하는 공간, 데이터베이스를 따로 추가한 경우에는 3티어 아키텍처 라고 한다.

  • 클라이언트와 서버간의 통신을 알아보려면 , 프로토콜이라는 개념을 이해해야 한다.
    프로토콜은 통신규약 즉 약속이다. 클라이언트와 서버는 서로 HTTP라는 프로토콜을 이용해서 서로 대화를 나누다. HTTP를 이용해 주고받은 메세지는 HTTP message라고 한다.

  • 서버는 클라이언트에게 리소스를 잘 활용할수 있도록 인터페이스를 제공해야한다 이것을 API라고 한다.
    API(Application Programming Interface)
    앱이 요청할 수 있고 프로그래밍이 가능한 인터페이스



📍 브라우저의 작동원리

  • 브라우저의 주소창에 입력한 URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타낸다

📌 URL

  • URL은 Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다.
  • scheme, hosts, url-path로 구분할 수 있다.
  • scheme은 통신방식(프로토콜)을 결정
  • hosts는 웹 서버의 이름이나 도메인, IP를 사용하며 주소
  • url-path는 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명

📌 URI

  • URI는 Uniform Resource Identifier
  • 일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더해 query, fragment를 포함
  • query는 웹 서버에 보내는 추가적인 질문
  • fragment는 일종의 북마크 기능을 수행

📌 IP

IP는 Internet Protocol의 줄임말 인터넷상에서 사용하는 주소체계를 의미.

  • 네트워크를 통해 데이터를 보낼때, 데이터를 IP 패킷이라고 하는 일련의 메세지로 보낸다.

  • 데이터를 보내기 위해 사용하는 전송 제어 프로토콜이 TCP와 UDP가 있다.

  • TCP는 데이터가 안전하게 전송되지만 지연이 발생한다. 파일전송

  • UDP는 패킷이 순서대로 도착하지않거나 도착하지 않을수 있지만, 속도가 빠르므로 음성 통화나 비디오 스트리밍으로 이용한다.

  • 네트워크에 연결된 특정 PC의 주소를 나타내는 체계를 IP address(Internet Protocol address, IP 주소)

  • 인터넷에 연결된 모든 PC는 IP 주소체계를 따라 네 덩이의 숫자로 구분된다. IPv4

  • nslookup codestates.com 을 터미널에 입력하면 IPv4주소를 확인할 수 있다.

  • IPv4로 할당할 수 있는 PC가 한계를 넘어서게 되어 IPv6가 나왔다.


📌 Port

  • IP 주소가 가리키는 PC에 접속할 수 있는 통로(채널)를 의미
  • 포트 번호는 0~ 65535 까지 사용할 수 있다
  • 0 ~ 1024번 까지의 포트 번호는 주요 통신을 위한 규약에 따라 이미 정해져 있다
  • SSH: 22 / HTTP: 80 / HTTPS: 443
    포트번호


📍 HTTP

Domain name

웹 브라우저를 통해 특정 사이트에 진입을 할 때, IP 주소를 대신하여 사용하는 주소
google.com

DNS

DNS는 호스트의 도메인 이름을 IP 주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템


📌 HTTP message

  • HTTP Messages는 클라이언트와 서버 사이에서 데이터가 교환되는 방식
  • 요청과 응답 두가지 유형이 있다.'
  1. start line : start line에는 요청이나 응답의 상태를 나타냅니다. 항상 첫 번째 줄에 위치. 응답에서는 status line
  2. HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합.
  3. empty line : 헤더와 본문을 구분하는 빈 줄이 있다.
  4. body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함한다. 요청과 응답의 유형에 따라 선택적으로 사용.

❗ Stateless

HTTP로 클라이언트와 서버가 통신을 주고받는 과정에서, HTTP가 클라이언트나 서버의 상태를 확인하지 않는다. Stateless(무상태성)이 HTTP의 가장 큰 특징이다.



📌 HTTP Requests

클라이언트가 서버에게 보내는 메세지


HTTP 메소드

  1. GET : 클라이언트는 웹 서버에서 리소스를 요청합니다.
  2. POST : 클라이언트는 웹 서버의 리소스에 데이터를 제출합니다.
  3. PUT : 클라이언트는 웹 서버의 리소스를 대체합니다.
  4. DELETE : 클라이언트가 웹 서버에서 리소스를 삭제합니다.

🔘 Start line

모든 HTTP 요청은 요청 라인으로 시작한다.

Get /home.html HTTP/1.1

여기서 GET은 HTTP 메서드이고 /home.html은 요청된 리소스이며 HTTP 1.1은 사용된 프로토콜 이다.

  1. 수행할 작업을 설명하는 HTTP 메소드를 나타낸다.

  2. 요청 대상(URL이나 URI) 또는 프로토콜, 포트, 도메인의 절대경로는 요청 컨텍스트에 작성된다.

    요청 형식

    origin 형식 : '?'와 쿼리 문자열이 붙는 절대 경로입니다. GET, POST, HEAD, OPTIONS 등의 method와 함께 사용합니다.
    POST / HTTP 1.1
    GET /background.png HTTP/1.0
    HEAD /test.html?query=alibaba HTTP/1.1
    OPTIONS /anypage.html HTTP/1.0
    absolute 형식 : 완전한 URL 형식으로, 프록시에 연결하는 경우 대부분 GET method와 함께 사용합니다.
    GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
    authority 형식 : 도메인 이름과 포트 번호로 이루어진 URL의 일부분 입니다. HTTP 터널을 구축하는 경우, CONNECT와 함께 사용할 수 있습니다.
    CONNECT developer.mozilla.org:80 HTTP/1.1
    asterisk 형식 : OPTIONS 와 함께 별표(*) 하나로 서버 전체를 표현합니다.
    OPTIONS * HTTP/1.1

  3. HTTP 버전에 따라 HTTP message의 구조가 달라진다. 그래서 마지막에 HTTP버전을 입력한다.

🔘 Headers

요청의 Headers는 기본 구조를 따른다. 헤더 이름, 콜론 : , 값을 입력한다.

Host: example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: */*
Accept-Language: en
Content-type: text/json

  • Host 헤더는 서버의 호스트를 지정하고 리소스가 요청되는 위치를 나타낸다.

  • User-Agent 헤더는 웹 서버에 요청하는 애플리케이션을 알려주고 여기에는 종종 운영 체제(Windows, Mac, Linux), 버전 및 응용 프로그램 공급업체가 포함된다.

  • Accept 헤더 는 클라이언트가 응답으로 수락할 콘텐츠 유형을 웹 서버에 알려준다.

  • Accept-Language 헤더는 클라이언트가 선호하는 언어와 선택적으로 로케일을 나타낸다.

  • Content-type 헤더는 요청 본문에서 전송되는 콘텐츠의 유형을 나타낸다 .


🔘 Body

요청의 본문은 마지막에 위치하면서 , HTTP POST 및 PUT 메서드를 사용하여 데이터를 전송할 때 요청 본문이 포함된다.

body 두종류
Single-resource bodies(단일-리소스 본문) : 헤더 두 개(Content-Type과 Content-Length)로 정의된 단일 파일로 구성됩니다.
Multiple-resource bodies(다중-리소스 본문) : 여러 파트로 구성된 본문에서는 각 파트마다 다른 정보를 지닙니다. 보통 HTML form과 관련이 있습니다.



📌 HTTP Responses

서버가 클라이언트에게 보내는 메세지

🗂 Start Line

HTTP/1.1 200 OK
1. 현재 프로토콜의 버전 (HTTP/1.1)
2. 상태 코드
3. 상태 텍스트 - 상태 코드에 대한 설명


⭐ 상태 코드


🗂 Headers

Date: Fri, 11 Feb 2022 15:00:00 GMT+2​
Server: Apache/2.2.14 (Linux)​
Content-Length: 84​
Content-Type: text/html​

Date 헤더는 HTTP 응답이 생성된 날짜와 시간을 지정한다 .

Server 헤더는 응답을 생성하는 데 사용되는 웹 서버 소프트웨어를 설명한다 .

Content-Length 헤더는 응답의 길이를 설명한다 .

Content-Type 헤더는 반환된 리소스의 미디어 유형을 설명한다(예: HTML 문서, 이미지, 비디오).


🗂 body

헤더 다음은 응답 본문으로써 이미지, 비디오, HTML 문서 및 기타 미디어 유형이 포함될 수 있다.

두종류
Single-resource bodies(단일-리소스 본문) :
길이가 알려진 단일-리소스 본문은 두 개의 헤더(Content-Type, Content-Length)로 정의합니다.
길이를 모르는 단일 파일로 구성된 단일-리소스 본문은 Transfer-Encoding이 chunked 로 설정되어 있으며, 파일은 chunk로 나뉘어 인코딩되어 있습니다.
Multiple-resource bodies(다중-리소스 본문) : 서로 다른 정보를 담고 있는 body입니다

profile
waymo
FE 개발자(진)가 되고 싶습니다
이전 포스트

React State & Props

다음 포스트

REST API

0개의 댓글