42. HTTP/네트워크-2

홍인열·2021년 10월 19일

Domain name

특정 웹사이트에 접속하기 위해선 IP 주소가 필요하다. 이때 IP주소 대신 사용하는 주소가 Domain name이다.
CLI 명령어 nslookup을 사용하면 해당 도메인의 IP주소를 확인 할 수 있다.
아래는 google.com의 IP 주소를 확인 해본 결과이다.
도메인은 google.com, IP는 142.250.206.206 임을 확인 할 수 있다.

DNS

네트워크 상에 모든 PC는 IP주소가 있다. 하지만 모든 IP가 도메인 이름을 갖진 않는다. 로컬 PC를 나타내는 127.0.0.1은 localhost로 사용할 수 있다. 하지만 그외의 모든 도메인 이름은 대여하여 사용한다. 그렇기 때문에 도메인 이름과 IP를 매칭시켜 해당 사이트로 이동하게 된다. 이 매칭 작업을 위한 서버가 네트워크에 별도로 존재한다.
DNS(Domain name system)은 호스트인 도메인 이름을 IP주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템이다.

HTTP

HTTP(HyperText Transper Protocol)은 HTML과 같은 문서를 전송하기 위한 Application Layer 프로토콜이다. 웹브라우저와 웹서버간 소통을 위해 디자인됬다. 전통적인 클라이언트-서버 모델에서는 HTTP messages양식에 맞춰 클라이언트가 서버에 요청을 보내면, 서버도 양식에 맞춰 응답한다.
HTTP는 무상태성(Stateless)이라는 특징을 갖는다.
*Application layer : 컴퓨터 네트워크 프로그래밍에서 인터넷 프로토콜(IP) 컴퓨터 네트워크를 통하는 프로세스 간 통신 접속을 위해 설계되어 통신 프로토콜과 방식을 위해 보유된 추상 계층이다. 응용 계층 프로토콜은 기반이 되는 전송 계층 프로토콜을 사용하여 호스트 간 연결을 확립한다. -위키백과-

HTTP Message

HTTP message에서 요청(Request)과 응답(Response)은 유사한 구조를 갖는다.

Start line, Status line: start line은 Request시 요청을 나타내고, Status line은 응답시 응답의 상태를 나타냅다. 둘다 항상 첫 번째 줄에 위치한다.

HTTP headers : 요청을 지정하건, messagedp 포함된 본문을 설명하는 header의 집합이다.

Empty line : header와 본문을 구분하기 위한 빈줄이 있다.

Body : 요청과 관련된 데이터나 응담과 관련된 데이터 또는 문서를 포함한다. 요청과 응답의 유형에 따라 선택적으로 사용한다.

Request 와 CRUD

HTTP Method	CRUD
POST	Create
GET	Read
PUT	Update/Replace
PATCH	Update/Modify
DELETE	Delete

GET, DELETE Method 사용시, body는 필요하지않고, 사용하지 말아야한다.

HTTP Status Codes

상태코드는 앞자리에 따라 구분 할 수 있다.

Status Codes	Status
1xx	Informational
2xx	Success
3xx	Redirection
4xx	Client error
5xx	Server error

AJAX

Asynchronous JavaScript And XMLHttpRequest(AJAX)는 JavaScript, DOM, Fetch, XMLHttpRequest, HTML등의 다양한 기술을 사용하는 웹 개발 기법이다.
AJAX의 웹 페이지에 필요한 부분의 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 점이 가장 큰 특징이다.
예로는 검색창의 자동완성 기능이나, 무한스크롤등이 있다.

XHR?, Fetch?

Fetch는 XHR(XMLHttpRequest)의 단점을 보완한 Web API이며, XML보다 가볍고 JavaScript와 호환되는 JSON을 사용한다. 또한 Fetch는 간편하고, promise지원 등의 장점이 있다.최근에는 XHR보다 Fetch를 주로 사용한다.

AJAX의 장단점

장점

서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다. 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트 하여 렌더링 할 수 있다. --> 빠르고 더 많은 상호작용이 가능한 어플리케이션을 만들 수 있다.

XHR이 표준화 되면서부터 브라우저에 상관 없이AJAX를 사용할 수 있다.

더 작은 대역폭(네트워크 통신 한 번에 보낼 수 있는 데이터의 크기). AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML 등) 보내면 되기 때문에 비교적 데이터의 크기가 작다.

단점

Search Engine Optimization(SEO)에 불리하다.
AJAX 방식의 웹 어플리케이션은 한 번 받은 HTML을 렌더링 한 후, 서버에서 비동기적으로 필요한 데이터를 가져와 그려내기 때문에, 처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 대부분이다. 그래서 AJAX 방식의 웹 어플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어렵다. 불가능한것은 아니다.

뒤로가기 버튼 문제
AJAX에서는 이전 상태를 기억하지 않기 때문에 사용자가 의도한 대로 동작하지 않습니다. 따라서 뒤로가기 등의 기능을 구현하기 위해서는 별도의 History API가 필요하다.

SSR vs CSR

차이점

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

언제 사용할까?

SSR

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

CSR

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