[HTTP/네트워크] 기본 이론

서버,클라이언트,API

• 클라이언트-서버 아키텍처 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것이다.

• 클라이언트 리소스를 사용하는 곳으로 플랫폼에 따라 구분되며 브라우저를 통해 주로 이용하는 웹 플랫폼에서 클라이언트는 웹사이트 또는 웹앱이라고 부른다.

• 서버 리소스를 제공하는 곳이다. 일반적으로 리소스를 전달해주는 역할만 담당한다.

• 데이터베이스 서버에서 리소스를 저장하는 별도의 공간이다.

• 프로토콜 클라이언트와 서버가 서로 소통하는 일종의 통신 규약이다. 데이터를 요청, 응답할 때 필요하며 HTTP, HTTPS, FTP, SMTP, SSH등이 있다. HTTP 요청 시 메소드를 지정하여CRUD를 지정할 수 있다.

• API Application Programming Interface의 약자로 서버가 클라이언트에게 리소스를 잘 활용할 수 있도록 제공해주는 인터페이스이다.

URL과 URI

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

• URI Uniform Resource Identifier의 줄임말로, 일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더해 query, fragment를 포함한다. (URI는 URL을 포함하는 상위개념으로 URL은 URI이다.)

ip와 포트

IP address 네트워크에 연결된 특정 PC의 주소를 나타내는 체계이다. IP는 Internet Protocol의 약자이다. 터미널에서 nslookup 도메인주소로 IP를 확인 할 수 있다.

IPv4 닷(.)으로 구분된 네 덩이의 숫자로 구분된 IP 주소체계로 IP 주소체계의 네 번째 버전이다. 각 덩어리마다 0부터 255까지 나타낼 수 있다. 몇 가지는 이미 용도가 정해져 있으니 아래 IP 주소는 반드시 기억하자.

• localhost = 127.0.0.1 현재 사용 중인 로컬 PC를 지칭한다.
• 0.0.0.0, 255.255.255.255 broadcast address, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소이다. 서버에서 접근가능한 IP 주소를 해당 주소로 지정하면 모든 기기에서 서버에 접근할 수 있다.

IPv6 개인 PC의 보급으로 전 세계 누구나 인터넷에 접속하게 되면서 IPv4로 할당할 수 있는 PC가 한계를 넘어서게 되었고, 이를 위해 IPv6이 나오게 되었다.

PORT IP 주소에 진입할 수 있는 정해진 통로이다. 로컬 PC의 IP주소 뒤에 붙는 :3000와 같은 숫자로 표현된다. 이미 사용중인 포트는 중복해서 사용할 수 없으며 만약 다른 프로그램에서 3000번 포트를 사용중이라면 다른 포트 번호(3001)로 리액트가 실행된다.
잘 알려진 아래와 같은 포트는 반드시 알아두자.

• 22 SSH
• 80 HTTP
• 443 HTTPS

• 위와 같이 잘 알려진 포트의 경우 포트번호를 URI 생략할 수 있지만 그 외에 잘 알려지지 않은 포트(3000과 같은 임시 포트)는 반드시 포트 번호를 포함해야 한다.

도메인과 DNS

Domain name 만약 IP 주소가 지번 또는 도로명 주소라면, 도메인 이름은 해당 주소에 위치한 상호로 볼 수 있다. 주소 뒤에 나오는 ~.com이 도메인 주소라고 할 수 있다. 주소창에 도메인의 IP주소를 입력해도 같은 주소로 이동하지만 한눈에 파악하기 힘들기 때문에 도메인 주소를 사용한다.

DNS 네트워크 상에 존재하는 모든 PC는 IP주소가 있다. 그러나 모든 IP 주소가 도메인 이름을 가지는 것은 아니다. 로컬 PC를 나타내는 127.0.0.1은 localhost로 사용할 수 있지만, 그 외의 모든 도메인 이름은 일정기간 동안 대여하여 사용한다. 브라우저의 검색창에 도메인 이름을 입력하여 해당 사이트로 이동하기 위해서는 해당 도메인 이름과 매칭된 IP주소를 확인하는 작업이 반드시 필요하다. 네트워크에서는 이것을 위한 별도의 서버가 있는데 이를 DNS(Domain Name System)이라고 한다.

크롬 브라우저 에러

아래는 크롬에서 웹페이지 로드 시 마주칠 수 있는 에러 메세지와 에러의 의미이다.
전체 에러 메세지 목록은 chrome://network-errors/에서 확인할 수 있다.

Aw, Snap! (앗, 이런!) 크롬 브라우저에서 페이지를 로드하는데 문제 발생
ERR_NAME_NOT_RESOLVED 호스트 이름(웹 주소)이 존재하지 않음
ERR_INTERNET_DISCONNECTED 사용중인 기기가 인터넷에 연결되지 않음
ERR_CONNECTION_TIMED_OUT ERR_TIMED_OUT 페이지를 연결하는데 시간이 너무 오래 걸림 (인터넷 연결이 느리거나 접속사용자가 많아서 발생 가능)
ERR_CONNECTION_RESET 웹페이지 연결을 방해하는 요소 발생
ERR_NETWORK_CHANGED 웹페이지를 로드하는 중에 기기의 네트워크 연결이 해제되었거나 새로운 네트워크에 연결됨
ERR_CONNECTION_REFUSED 웹페이지에서 크롬 브라우저의 연결을 허용하지 않음
ERR_CACHE_MISS 웹페이지로부터 이전에 입력한 정보를 다시 제출하도록 요청받음
ERR_EMPTY_RESPONSE 웹페이지에서 데이터를 전혀 전송하지 않았으며, 데이터를 전송할 서버가 다운되었을 수 있음
ERR_SSL_PROTOCOL_ERROR 페이지에서 전송된 데이터를 Chrome 브라우저가 해석하지 못함
ERR_BAD_SSL_CLIENT_AUTH_CERT 클라이언트 인증서(은행 또는 회사 내부 웹사이트 등)에 오류가 발생하여 웹페이지에 로그인할 수 없음

HTTP Messages

HTTP Messages 클라이언트와 서버 사이에서 데이터가 교환되는 방식이다. 요청(Requests)와 응답(Responses) 두가지 유형이 있다. 몇 중의 텍스트 정보로 구성되며 직접 작성할 필요 없이 자동으로 완성된다. 요청과 응답은 다음과 같은 유사한 구조를 가진다.

1. start line 요청이나 응답의 상태를 나타내며 항상 첫 번째 줄에 위치한다. 응답에서는 status line이라고 부른다.
2. HTTP headers 요청을 지정하거나, 메세지에 포함된 본문을 설명하는 헤더의 집합이다.
3. empth line 헤더와 본문을 구분하는 빈줄이다.
4. body 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함한다.

Stateless(무상태성) 서버를 가지지 않는다는 뜻으로 HTTP로 클라이언트와 서버가 통신을 주고 받는 과정에서 HTTP가 클라이언트나 서버의 상태를 확인하지 않는다. 클라이언트에서 발생한 모든 상태(ex. 사용자가 쇼핑몰에서 로그인하거나 카트에 담거나 하는 모든 활동)를 HTTP 통신이 추척하지 않기 때문에 다른 방법(쿠키-세션)을 통해 상태를 저장하고 확인 한다. HTTP의 가장 큰 특징이라고 할 수 있다.

AJAX

AJAX란?

AJAX는 웹페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 브라우저에 렌더링 하는 기법이다. 예시로는 구글의 검색창이나 무한스크롤에서 데이터를 가져오는 부분이 있다.

AJAX의 두 가지 핵심 기술

AJAX를 구성하는 핵심 기술은 Javascript와 DOM, 그리고 Fetch이다. Fetch를 사용하면 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아 올 수 있다. 사용자가 현재 페이지에서 서버와 통신할 수 있게 해준다.

XHR과Fetch

Fetch는 Javascript와 호환되는 JSON을 사용한다. Fetch의 등장 이전에는 사용된 XHR은 Cross-Site 이슈 등의 불편함이 있었고, 그에 비해 Fetch는 promise 지원 등의 장점을 가지고 있기 때문에 이제는 많은 사람들이 Fetch를 사용한다.

fetch('http://52.78.213.9:3000/messages')
	.then (function(response) {
		return response.json();
	})
	.then(function (json) {
		...
});

AJAX의 장점

• 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다.
• 표준화된 방법: 브라우저에 상관없이 AJAX를 사용할 수 있다.
• 유저 중심 애플리케이션 개발
  AJAX를 사용하면 필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있습니다.
• 더 작은 대역폭(네트워크 통신 한 번에 보낼 수 있는 데이터의 크기)
  이전에는 서버로부터 완성된 HTML 파일을 받아와야 했기 때문에 한 번에 보내야 하는 데이터의 크기가 컸으나 AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML 등)로 보내면 되기 때문에 비교적 데이터의 크기가 작다.

AJAX의 단점

• Search Engine Optimization(SEO)에 불리
  AJAX 방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어렵다.

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

SSR vs CSR

SSR

SSR은 Server Side Rendering의 줄임말이다. 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링한다. 브라우저가 서버의 URI로 GET요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다. 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 한다. 브라우저에서 다른 경로로 이동하면 서버는 다시 같은 작업을 수행한다. 검색엔진 최적화에 유리하고 초기 로딩 속도가 빠르며 사용자와 상호작용이 적은 경우 사용한다.

CSR

CSR은 Client Side Rendering을 의미한다. 웹 개발에서 사용하는 대표적인 클라이언트인 웹 브라우저에서 페이지를 렌더링한다. 브라우저의 요청을 서버로 보내면 웹페이지와 Javascript 파일을 보낸다. 클라이언트가 웹 페이지를 받고 Javascript 파일은 브라우저의 웹페이지를 완전히 렌더링한다. 데이터베이스에 저장된 데이터를 가져와야 할 경우에는 Fetch와 같은 API가 사용된다. 브라우저에서 다른 경로로 이동해도 서버가 웹 페이지를 다시 보내지 않는다. 검색엔젠 최적화가 우선순위가 아니고 웹 애플리케이션 등 풍부한 상호작용이 있는 경우 CSR을 사용한다.

SSR와 CSR의 차이점

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