[Section 2] HTTP/네트워크

정호·2023년 3월 28일
http네트워크
0

코드스테이츠

목록 보기
25/49
post-custom-banner

서버

앱에서 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처또는 클라이언트-서버 아키텍처라고 한다. 리소스를 사용하는 앱이 클라이언트 , 리소스를 제공하는 곳을 서버라고 부른다.

리소스에 접근하는 앱은 손님(Client) -- 요청 --> 리소스를 가지고 있는 점원(Server), 점원은 리소르르 담아 응답한다.

클라이언트, 서버

프로토콜이란? 통신 규약, 웹 애플리케이션 아키텍처에서는 HTTP라는 프로토콜을 이용해 메세지를 주고받는다.

API란? Application Programming Interface로 서버는 클라이언트에게 리소스를 잘 활용하도록 인터페이스를 적용해줘야한다.

서버는 리소스 전달을 위해 API문서(메뉴판)를 작성해 클라이언트가 활용할 수 있고, 인터넷에 있는 데이터를 요청할 때에는 HTTP 프로토콜을 사용하며, 주소(URL,URI)를 통해 접근할 수 있다.

  • API덕분에...
    - 네이버에서 날씨를 볼 수 있음 - 기상청 API
    - OP.GG에서 전적 볼 수 있음 - 라이엇게임즈 API

브라우저의 작동원리(보이지 않는 곳)

:scheme: :hosts: :url-path: :query:
file://127.0.0.1/Users/username/Desktop/
http://www.google.com:80/search?q=JavaScript

크롬 브라우저에 다음과같은 url을 입력하면 파일 탐색기를 사용할 수 있다.

  • URL(Uniform Resource Locator): 네트워크 상 파일이 위치한 정보를 나타낸다.
    - scheme: 통신방식(프로토콜)결정, 웹 브라우저(https)
    - hosts: 웹서버 이름, 도메인,ip 사용, 주소
    - url-path: 루트 디렉토리부터 경로,파일명
  • URI(Uniform Resource Identifier): 위 세가지 url의 기본요소에 더해 query fragment를 포함, 웹 서버에 보내는 추가적인 질문 q-JavaScript를 통해 JavaScritpt를 검색한 결과가 나타난다.
    - fragment(#)는 일종의 북마크 역할,

IP

특정 PC의 주소를 나타내는 체계 (Internet Protocol address, IP 주소)
IPv4 닷(.)으로 구분된 네덩이의 숫자로 표현 -> IPv6

PORT

IP 주소가 가리키는 PC에 접속할 수 있는 통로(채널)을 의미한다.

  • 22 : SSH
  • 80 : HTTP
  • 443: HTTPS

도메인

IP 주소를 대신하여 사용하는 주소, IP 주소가 도로명주소라면 도메인은 해당 주소에 위치한 상호라고 할 수 있다.

DNS

네트워크 상 모든 PC는 IP주소가 있지만 모두 도메인 이름을 가지는것은 아니다. DNS는 호스트의 도메인 이름을 IP 주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템이다.

naver.com을 입력한다면, DNS에서 IP 주소(ex.125.209.222.142)를 찾습니다. 그리고 이 IP 주소에 해당하는 웹 서버로 요청을 전달하여 클라이언트와 서버가 통신할 수 있도록 한다.

❖ IP - 공동현관, PORT - 각 세대, DNS - 전화번호부

HTTP

HyperText Transfer Protocol로, HTML과 같은 문서를 전송하기 위한 프로토콜이다. 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP Messages 양식에 맞춰 요청을 보내면, 서버도 HTTP Messages 양식에 맞춰 응답한다.

HTTP Messages

클라이언트와 서버 사이에 데이터가 교환되는 방식

  • 요청
  • 응답

요청과응답은 다음과 같은 구조를 가진다.

  • start line : start line에는 요청이나 응답의 상태를 나타냅니다. 항상 첫 번째 줄에 위치합니다. 응답에서는 status line이라고 부릅니다.
  • HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다.
  • empty line : 헤더와 본문을 구분하는 빈 줄이 있습니다.
  • body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함합니다. 요청과 응답의 유형에 따라 선택적으로 사용합니다.

Stateless(무상태성,HTTP의 특징)

상태를 가지지 않는다는 뜻, HTTP로 클라이언트와 서버가 통신을 주고받는 과정에서, HTTP가 클라이언트나 서버의 상태를 확인하지 않는다.
Stateless 특성때문에 저런 http 메세지에 정보를 담는다.

  • 서버와 클라이언트가 계속 연결되어 있어야 하나?
  • 단발성 통신이 더 많은 사용자, 서버를 활용할 수 있다.
  1. HTTP는 컴퓨터 끼리 소통을 위한 통신규약이다.
  2. HTTP 통신은 Request(요청)과 Response(응답)으로 이루어진다.
  3. HTTP 통신의 매 요청과 응답은 이전 상태를 알지 못한다. (Stateless)

HTTP Requests

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

HTTP Responses

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

클라이언트에서 데이터를 요청 --> 요청받을 데이터를 토대로 응답을 전송

HTTP 응답 메시지

  • 2XX -> 성공
  • 3XX -> 리디렉션
  • 4XX -> 내 잘못
  • 5XX -> 니 잘못

관리자 계정만 들어갈 수 있는 관리자 페이지에 일반 사용자 계정으로 접근했을 때 403이 뜬다.

AJAX란?

Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다.

특징: 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 나타낼 수 있는 점이다.

ex) 마우스 올려두면 변화
최초 접속시에만 데이터를 받아오고 그후에는 요청에 따라 전달받은 데이터를 자바스크립트로 받아옴

AJAX의 기술 DOM, Fetch

Fetch를 이용하면 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있다.

AJAX 장점

  • 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다.

  • 표준화된 방법

이전에는 브라우저마다 다른 방식으로 AJAX를 사용했으나, XHR이 표준화되면서부터 브라우저에 상관없이 AJAX를 사용할 수 있게 되었다.

  • 유저 중심 애플리케이션 개발

AJAX를 사용하면 필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있다.

  • 더 작은 대역폭

대역폭: 네트워크 통신 한 번에 보낼 수 있는 데이터의 크기

이전에는 서버로부터 완성된 HTML 파일을 받아와야 했기 때문에 한 번에 보내야 하는 데이터의 크기가 컸습니다. 그러나 AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML 등)로 보내면 되기 때문에 비교적 데이터의 크기가 작다.

AJAX 단점

  • Search Engine Optimization(SEO)에 불리

AJAX 방식의 웹 애플리케이션은 한 번 받은 HTML을 렌더링 한 후, 서버에서 비동기적으로 필요한 데이터를 가져와 그려냅니다. 따라서, 처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많습니다. 검색 사이트에서는 전 세계 사이트를 돌아다니며 각 사이트의 모든 정보를 긁어와 사용자에게 검색 결과로 보여줍니다. AJAX 방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어렵다.

  • 뒤로가기 버튼 문제

일반적으로 사용자는 뒤로가기 버튼을 누르면 이전 상태로 돌아갈 거라고 생각하지만, AJAX에서는 이전 상태를 기억하지 않기 때문에 사용자가 의도한 대로 동작하지 않습니다. 따라서 뒤로가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야한다.

SSR과 CSR

SSR이란?

SSR은 Server Side Rendering로 웹페이지를 브라우저에서 렌더링하지 않고 서버에서 렌더링한다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다.

  • SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용합니다.
  • 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR 이 적합합니다.
  • 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있습니다.

CSR이란?

CSR은 Client Side Rendering로 SSR의 반대이다. 클라이언트에서 페이지를 렌더링하며 웹 페이지의 골격이 될 단일 페이지(Single Page)를 클라이언트에 보낸다. 이때 서버는 웹 페이지와 함께 JavaScript 파일을 보낸다.

  • SEO 가 우선순위가 아닌 경우, CSR을 이용할 수 있습니다.
  • 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공합니다.
  • 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있습니다.

차이점

SSR과 CSR의 주요 차이점은 페이지가 렌더링되는 위치입니다. SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링한다. CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리한다.

tti(Time to Interact) vs ttv(Time to view)

CSR은 TTI와 TTV가 같음
SSR은 ttv가 느림 --> SSR을 사용할때는 두 시간차를 줄이는게 중요함

html,css,js 렌더링에 필요한걸 자바스크립트를 통해 한번에 하기때문에
tti: 새로고침 후 클릭(이벤트)할때까지 걸리는 시간
ttv: 새로고심 후 화면에 나타나는데 걸리는 시간

profile
정호
열심히 기록할 예정🙃
다음 포스트

[section 1] Git

post-custom-banner

0개의 댓글