컴퓨터 네트워크 개념 - 당신이 필요로 하는 유일한 지침

"웹 프런트엔드 개발자가 되려면 컴퓨터 네트워크 지식이 없으면 우리는 영원히 생존할 수 없다. 프런트엔드는 자바스크립트나 CSS만이 아니다. 우리는 매일 네트워크 프로토콜과 http 요청과 밀접하게 협력한다."

카탈로그


1. Common HTTP request that we will use
2. Inheritable and non-inheritable properties in CSS
3. HTTP respond Header
4. Common HTTP respond status code
5. Key differences between HTTP=1.0, HTTP=1.1, 2.0
6. What Happens When You Type URL into the browser
7. How do we understand keep-alive connection
8. What's the pros and cons for HTTP request
9. HTTPS protocol
10. Understand the OSI 7-layers model
11.TCP and UDP
12. Websocket
13. Domain Name System (DNS)

기타 내용


1. 자주 사용하는 HTTP 요청

> - What is HTTP? Refer to the W3school for full detail

The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers.
HTTP works as a request-response protocol between a client and server.


요청 방법
해석하다
가져오기:
GET는 지정된 리소스에서 데이터를 요청하는 데 사용됩니다.
게시물:
POST는 리소스를 만들거나 업데이트하기 위해 서버에 데이터를 전송하는 데 사용됩니다.
놓다
PUT는 리소스를 만들거나 업데이트하기 위해 서버에 데이터를 전송하는 데 사용됩니다.
삭제:
DELETE 메서드는 지정된 리소스를 삭제합니다.
담당자:
머리는 GET와 거의 같지만 응답체는 없다.
옵션:
옵션 방법은 목표 자원에 대한 통신 옵션을 설명합니다.(CORS 비행 전 사용)
GET와 POST의 차이점: URL 길이가 2083자를 넘지 않으면 GET 요청은 거의 모든 브라우저에 적용됩니다.

2. HTTP 요청 헤더

Refer to this documentation
GET /home.html HTTP/1.1 

// Http method, path of the resource, protocol 

Host: developer.mozilla.org

// Domain of the current page who sends the request

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0

// Browser'user Proxy 

Accept: text/html,application/xhtml+xml,application/xml;q=0.9

//accepted content type for the browser

Accept-Language: en-US,en;q=0.5 

//accept language for the browser

Accept-Encoding: gzip, deflate, br 

//accepted encoding method

Referer: https://developer.mozilla.org/testpage.html

//the URL that make the request

Connection: keep-alive 

//the connection type between sever and client

If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0

//for cache control

3. HTTP 응답 헤드

200 OK

// HTTP response status codes, short description

Access-Control-Allow-Origin: *

// CORS

Connection: Keep-Alive

//connection type

Content-Type: text/html; charset=utf-8

// document type

Date: Mon, 18 Jul 2016 16:06:00 GMT

//responding time

Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
//for cache control

Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure

// set cookie expire time and other related information

4. 일반 HTTP 응답 상태 코드

Refer to this documentation for details
성공적인 응답
-200 좋아요.
부탁이 성사됐습니다.
-204 컨텐츠 없음
이 요청은 발송할 내용이 없지만 제목이 유용할 수 있습니다.사용자 에이전트는 이 자원의 캐시 헤더를 새 헤더로 업데이트할 수 있습니다.
- 206 섹션 내용
클라이언트로부터 일부 자원만 요청하기 위해 범위 헤더를 보낼 때 이 응답 코드를 사용합니다.
메시지 리디렉션
-301 영구 이전
요청한 리소스의 URL이 영구적으로 변경되었습니다.응답에 새 URL이 표시됩니다.
-302 임시 이전
301 리디렉션은 페이지가 새 위치로 영구적으로 이동되었음을 의미합니다.302 리디렉션은 이동이 일시적인 것임을 의미한다.
-304 수정되지 않음
이것은 캐시 목적에 사용됩니다.이것은 클라이언트 응답이 수정되지 않았기 때문에 클라이언트가 같은 캐시 버전의 응답을 계속 사용할 수 있음을 알려 줍니다.
클라이언트 오류 응답
-400개의 오류 요청
문법이 잘못되어 서버에서 이 요청을 이해할 수 없습니다.
-401 무단
HTTP 표준은'unauthenticated'를 지정하지만, 의미적으로 이 응답은'unauthenticated'를 의미합니다.즉, 클라이언트는 반드시 자신에 대해 신분 검증을 해야만 요청의 응답을 얻을 수 있다.
-403 금지
클라이언트가 내용에 접근할 권한이 없음;즉, 권한이 부여되지 않아 서버가 요청한 자원을 제공하지 않는다는 것이다.401 Unauthorized와 달리 서버는 클라이언트의 ID를 알고 있습니다.
- 404를 찾을 수 없습니다.
서버에서 요청한 자원을 찾을 수 없습니다.브라우저에서 URL을 인식할 수 없습니다.API에서도 끝점이 유효하지만 리소스 자체가 존재하지 않는다는 것을 의미할 수 있습니다.
서버 오류 응답
-500 내부 서버 오류
서버가 어떻게 처리해야 할지 모르는 상황에 부딪혔다.
- 501 구현 안 함
서버에서 요청 방법을 지원하지 않기 때문에 처리할 수 없습니다.서버가 지원해야 하는 유일한 방법(이 코드를 반환할 수 없음)은 GET 및 HEAD입니다.
-502 장애 게이트웨이
이 오류 응답은 서버가 게이트웨이로 처리 요청에 필요한 응답을 받았을 때 잘못된 응답을 받았다는 것을 의미합니다.
- 503 서비스를 사용할 수 없음
서버가 이 요청을 처리할 준비가 되지 않았습니다.유지 보수로 인해 서버가 다운되거나 과부하되는 경우가 많습니다.

5. HTTP=1.0, HTTP=1.1, 2.0 사이의 관건적인 차이

Refer to the full article here

1. PersistentConnection
HTTP 1.0 stipulates that the browser and the server only maintain a short connection. The server immediately disconnects the TCP connection after processing the request.

HTTP 1.1 supports Persistent Connection, and Long connection is used by default.For HTTP 1.1 long connections, new request headers need to be added to help achieve this. The value of the Connection request header is Keep-Alive, the client informs the server to keep the connection after returning the result of this request; the value of the Connection request header is close When, the client notifies the server to close the connection after returning the result of this request.

2.Pipelining
   Request pipeline (Pipelining) processing, multiple HTTP requests and responses can be transmitted on a TCP connection, reducing the consumption and delay of establishing and closing connections.

3.host field:
   In HTTP1.0, it is believed that each server is bound to a unique IP address. Therefore, the URL in the request message does not convey the hostname. But with the development of virtual host technology, there can be multiple virtual hosts (Multi-homed Web Servers) on a physical server, and they share an IP address. With the host field HTTP1.1 can send request to different host on the same server

4.Bandwidth optimization:
   In HTTP/1.0, there are some phenomena of wasting bandwidth. For example, the client only needs a part of an object, but the server sends the entire object.

   The range header field is introduced in the request message in HTTP/1.1,It allows to request only certain part of the resource. If the server correspondingly returns the content requested by the object, the response code is 206 (Partial Content), which can prevent the Cache from mistaking the response as a complete object.

5.Cache:
HTTP/1.1 adds the Cache-Control header field which supports an extensible instruction subset: for example, the max-age instruction supports relative timestamp.

HTTP 2.0

1.Multiplexing:
   HTTP 2.0 uses multiplexing technology to process multiple requests concurrently on the same connection, and the number of concurrent requests is several orders of magnitude larger than HTTP 1.1.

2.data compression:
   HTTP 1.1 does not support header data compression, HTTP 2.0 uses HPACK algorithm to compress header data, so that the data volume is smaller and the transmission on the network will be faster.

3.Server push:
   When we request data from a web server that supports HTTP2.0, the server will push some resources needed by the client to the client by the way, so that the client will not create a connection again and send a request to the server to obtain it. This method is very suitable for loading static resources.

4.Binary framing:
   HTTP/2 adds a binary framing layer between the application layer (HTTP/2) and the transport layer (TCP or UDP).
   Without changing the semantics, methods, status codes, URI and header fields of HTTP/1.x, it solves the performance limitations of HTTP 1.1, improves transmission performance, and achieves low latency and high throughput.


6. 브라우저에 URL을 입력하면 어떤 일이 발생합니까

1. URL parsing: The browser will extract the protocol and path of the requested resource.

2. Cache Validation: Then browser will verify whether such requested resource has been cached and still valid. If yes it will return the cached result immediately or else it will send a new request to the server.

3. DNS query: The browser checks the browser cache for a DNS record to find the corresponding IP address. If not found, it will proceed to the OS cache followed by router cache. Lastly, ISP(Internet Service Provider)’s DNS server initiates a DNS query to find the IP address.

4. Get the MAC address: After the browser gets the IP address, the data transmission also needs to know the destination host's MAC address.

5. The browser initiates a TCP connection with the server. It will require a three way handshake to establish the TCP connection between them.

6. The browser sends an HTTP request to the webserver. Once the TCP connection is established, the browser sends a HTTP request. Refer to the above section regarding HTTP request.

7. Server handle the request and sends out an HTTP response.
The server response contains the web page you requested as well as the status code, compression type (Content-Encoding), how to cache the page (Cache-Control), any cookies to set, privacy information, etc. Refer to the above section regarding HTTP response.

8. The browser parse and paint the HTML content The browser displays the HTML content in phases. First, it will render the DOM tree and CSSOM tree through the respective files and construct a render tree base on them. Once this is done the browser will layout the page through the render tree and use its api to paint the user interface on viewport.

9. TCP four way handshake to stop the connection Once the client thinks it has received everything it needs, it will start a four way handshake with the server to close the connection. Refer to the TCP section below for more information.

7. 활력을 유지하는 관계를 어떻게 이해하는가

In HTTP1.0, by default is to create a new connection between the client and the server for each request/response, and disconnect immediately after completion, which is a short connection.

When the Keep-Alive mode is used, the Keep-Alive function keeps the client-to-server connection valid. When a subsequent request to the server occurs, the Keep-Alive function avoids establishing or re-establishing a connection, which is a long connection. The method of use is as follows:

  • The client sends the request to the server while adding the Connection field to the header. The server sends the Connection: Keep-Alive field back to the client. The client receives the Connection field and then Keep-Alive connection established successfully.

  • To close the connection, client side will send connection:closed inside of its request, server will respond and close the keep-alive connection.

Pros of long connection

  1. less cpu and memory usage as there are less connections
  2. allows pipelining (refer to the above session about pipelining)
  3. let congestion control will be needed
  4. less delay in the subsequent request as the client side do not need to perform the three way handshake on every request.

Cons of long connection
The long tcp connection may waste resources if it stays idle for long period.


8.HTTP 요청의 장단점은 무엇입니까

Pros

1.Simple and fast: When a client requests a service from the server, it only needs to transmit the request method and path. Because the HTTP protocol is simple, the HTTP server request processing time will be very fast.

2.connectionless: No connection means it limits each connection to only process one request. After the server has processed the client's request and received the client's response, it will disconnect. This method can save transmission time.

3.Stateless: HTTP protocol is a stateless protocol, where the state refers to the context information of the communication process. The lack of state means that if the previous information is needed for subsequent processing, it must be retransmitted, which may result in an increase in the amount of data transmitted per connection. On the other hand, if the server does not need previous information, its response is faster.

4.Flexible: HTTP allows the transmission of any type of data object. The type being transmitted is marked by Content-Type.

Cons

Clear text transmission: The messages in the protocol are in text form, which is directly exposed to the outside world and is not safe. It may be manipulated by third party that's listening to the connection.

9.HTTPS 프로토콜

> What is HTTPS?

Hypertext transfer protocol secure (HTTPS) is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website. HTTPS is encrypted in order to increase security of data transfer. This is particularly important when users transmit sensitive data, such as by logging into a bank account, email service, or health insurance provider.


TLS 핸드셰이크는 어떻게 됩니까?
TLS 핸드셰이크가 진행되는 동안 클라이언트와 서버는 다음 작업을 수행합니다.
1. 그들이 사용할 TLS 버전 지정(TLS 1.0, 1.2, 1.3 등)
2. 그들이 어떤 암호 세트를 사용할지 결정한다(아래 참조)
3. 서버의 공공 키를 통해 서버의 신분을 검증한다
키 및 SSL 인증 기관의 디지털 서명
4. 핸드셰이크가 끝난 후 대칭 암호화를 사용할 세션 키 생성

Read more about https handshakes here
HTTPS의 이점은 다음과 같습니다.
  • HTTPS 프로토콜을 사용하여 사용자와 서버에 대한 신분 검증을 하고 데이터가 정확한 클라이언트와 서버로 전송되는 것을 확보한다.
  • HTTPS 프로토콜을 사용하여 암호화 전송을 할 수 있고 신분인증을 하여 통신을 더욱 안전하게 할 수 있으며 데이터가 전송 과정에서 도둑맞고 수정되는 것을 방지하고 데이터의 안전을 확보한다.
  • HTTPS의 단점은 다음과 같습니다.
  • HTTPS는 서버와 클라이언트를 암호화하고 복호화해야 하기 때문에 서버 자원이 더 많이 소모되고 과정이 복잡합니다
  • HTTPS 프로토콜의 악수 단계는 시간이 많이 걸려서 페이지의 마운트 시간을 증가시켰다.
  • SSL 인증서의 원가가 매우 높고 인증서의 기능이 강할수록 원가가 높다.
  • SSL 인증서는 하나의 IP와 연결되어야 하며 여러 도메인 이름은 같은 IP에 연결되지 않습니다.
  • 10. OSI 7 레이어 모델 이해


    Click here for more information on each layer's functionality
    오픈 시스템 연결 (OSI) 모델은 컴퓨터 시스템이 네트워크를 통해 통신하는 데 사용되는 7층을 설명한다.그것은 1980년대 초에 모든 주요 컴퓨터와 전신회사가 채택한 첫 번째 네트워크 통신 표준 모델이다
    현대 인터넷은 OSI가 아니라 더욱 간단한 TCP/IP 모델을 바탕으로 한다.그러나 OSI 7층 모델은 가시화와 교류 네트워크가 어떻게 작동하는지, 네트워크 문제를 격리하고 제거하는 데 도움이 되기 때문에 여전히 광범위하게 사용되고 있다.

    11.TCP 및 UDP

    What is the Difference Between TCP and UDP?

    TCP retransmission mechanism
    TCP 연결에서 전송되는 각 데이터 바이트에는 관련 일련 번호가 있습니다.이것은 TCP 헤드의 일련 번호 필드에 표시됩니다.
    수신 소켓이 전송된 데이터 세그먼트를 감지하면 TCP 헤더의 확인 번호를 사용하여 수신을 표시합니다.패키지를 보내면 송신자는 가변 길이의 재전송 타이머를 시작합니다.타이머가 만료되기 전에 확인을 받지 못하면 발송자는 이 세그먼트가 분실되었다고 생각하고 다시 전송할 것입니다.

    TCP congestion control
    TCP 정체 제어 메커니즘은 다음 네 가지 메커니즘으로 구성됩니다(자세한 내용은 위의 링크를 참조하십시오).
  • 느린 시작
  • 혼잡 방지
  • 빠른 리셋
  • 빠른 복구

  • TCP 3자 핸드셰이크 및 긴밀한 연결
    Three way handshake (refer to this link for details)
  • 단계 1(SYN): 첫 번째 단계에서 클라이언트는 서버와 연결을 맺기를 원하기 때문에 SYN(동기화 시퀀스 번호)이 있는 세그먼트를 보낸다. 이 세그먼트는 서버에 알리고 클라이언트가 통신을 시작할 수 있으며 어떤 시퀀스 번호로 세그먼트를 시작할 수 있는지
  • 단계 2(SYN+ACK): 서버는 설정된 SYN-ACK 신호 비트를 사용하여 클라이언트 요청에 응답합니다.확인(Acknowledge, ACK)은 받은 세그먼트의 응답을 나타내고, SYN은 세그먼트를 시작할 수 있는 일련 번호를 나타냅니다
  • .
  • 단계 3(확인): 마지막 부분에서 클라이언트는 서버의 응답을 확인하고 신뢰할 수 있는 연결을 구축하여 실제 데이터 전송을 시작한다
  • Close connection (refer to this link for details)
  • 1단계(고객 FIN) -
    클라이언트 프로그램이 연결을 닫기로 결정했다고 가정하십시오.(서버에서도 연결 해제를 선택할 수 있습니다.)그러면 클라이언트가 FIN 비트가 1로 설정된 TCP 세그먼트를 서버로 전송하고 FIN WAIT 1 상태가 됩니다.FIN WAIT 1 상태에서 클라이언트는 서버에서 확인(ACK)이 있는 TCP 세그먼트를 기다립니다.
  • 2단계(서버에서 확인)-
    서버가 송신자(클라이언트)로부터 FIN 비트 세그먼트를 받으면 서버는 즉시 송신자(클라이언트)에게 확인(ACK) 세그먼트를 보냅니다.
  • 3단계(고객 대기)-
    FIN WAIT 1 상태이면 클라이언트가 서버의 TCP 세그먼트를 기다리고 확인합니다.클라이언트가 세그먼트를 수신하면 FIN WAIT 2 상태가 됩니다.FIN WAIT 2 상태이면 클라이언트는 서버의 FIN 비트가 1로 설정된 다른 세그먼트를 기다립니다.
  • 4단계(서버의 FIN) -
    서버가 ACK를 일정 시간 발송한 후 (서버의 일부 폐쇄 과정 때문에) 서버는 FIN 비트를 발송자 (클라이언트) 에게 발송합니다.
  • 5단계(고객 확인) -
    클라이언트가 서버에서 FIN 비트 세그먼트를 수신하면 클라이언트는 서버의 세그먼트를 확인하고 TIME WAIT 상태가 됩니다.TIME WAIT 상태에서는 클라이언트가 ACK가 손실된 경우 최종 확인을 다시 보낼 수 있습니다.클라이언트가 time WAIT 상태에서 소비하는 시간은 클라이언트의 구현에 달려 있지만 일반적인 값은 30초, 1분, 2분입니다.기다린 후에 연결이 정식으로 닫히고 클라이언트의 모든 자원(포트 번호와 버퍼 데이터 포함)이 방출됩니다.
  • 12.Websocket

    The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

    WebSocket mechanism: The client notifies the WebSocket server of an event with all recipient IDs, and the server immediately notifies all active clients after receiving it, only those client whose ID is in the recipient list will handle the event from websocket server.

    The advantage of WebSocket are as follows:

    • Support two-way communication, real-time data streaming

    • We can send text or binary data

    • Built on the TCP protocol, the implementation at the server side is relatively easy

    • The data format is relatively lightweight, the resource required is small

    • There is no same origin restriction, the client can communicate with any server

    • It has good compatibility with HTTP protocol. The default ports used by websocket are also 80 and 443.

    13. DNS(Domain Name System)

    1. DNS is the abbreviation of Domain Name System, and it provides a host name to IP address conversion service. It is a distributed database composed of hierarchical DNS servers.

    It is an application layer protocol that defines how the host queries this distributed database. DNS makes our life easier for not having to remember the IP address.

    Function: Resolve the domain name into an IP address. The client sends a domain name query request to the DNS server (the DNS server has its own IP address), and the DNS server informs the client of the IP address of the Web server.

    2. Does DNS use TCP and UDP at the same time?
    DNS takes port 53 and uses TCP and UDP protocols at the same time.
    (1) Use TCP protocol for zone transfer

    The secondary domain name server will regularly (usually 3 hours) to query the main domain name server to find out whether the data has changed. If there is a change, a zone transfer will be performed for data synchronization. The zone transfer uses TCP instead of UDP, because the amount of data transferred synchronously is much more than the amount of data in a request response.
    TCP is a reliable connection, which guarantees the accuracy of data.

    (2) UDP packets are smaller in size. UDP packets can't be greater than 512 bytes. So any application needs data to be transferred greater than 512 bytes require TCP in place. For example, DNS uses both TCP and UDP for valid reasons described below. UDP messages aren't larger than 512 Bytes and are truncated when greater than this size. DNS uses TCP for Zone transfer and UDP for name, and queries either regular (primary) or reverse. UDP can be used to exchange small information whereas TCP must be used to exchange information larger than 512 bytes. If a client doesn't get response from DNS, it must retransmit the data using TCP after 3-5 seconds of interval.

    click here to read more

    좋은 웹페이지 즐겨찾기