[HTTP/네트워크] 기초 리뷰

소금·2021년 9월 7일
0
post-thumbnail

Chapter. 클라이언트-서버 아키텍쳐


🍔 클라이언트-서버 아키텍쳐

삼품 정보같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨것
리소스를 저장하는 공간은 데이터베이스 (+3티어 아키텍쳐)

  • 프론트엔드 개발자 - 사용자가 직접 눈으로 보고 상호작용 할 수 있는 앱을 개발
  • 백엔드 개발자 - 상품정보를 api로 노출하거나 사용자 인증 및 시스템 설계를 다룸

🍔 서버 통신과 API

클라이언트와 서버 간 통신은 요청과 응답으로 구성되며, 요청이 있어야 응답이 존재

🍔 프로토콜

통신 규약,즉 통신하기 위한 약속 (가게에서 주문 규칙과 같은 역할)
웹 애플리케이션 아키텍쳐에서는 HTTP라는 프로토콜을 이용해 통신함

API : applicatioin programming interface (가게에서 메뉴판과 같은 역할)
서버가 어떻게 구성되어 있는지 서버가 클라이언트에게 리소스를 제공하는 것

보통 웹 애플리케이션의 데이터를 요청할 때에 HTTP 프로토콜을 사용하며,
주소(URL, URI)를 통해 접근 - 파라미터 사용

HTTP요청 - 메서드
GET : 조회
POST : 추가
PUT : 갱신
DELETE : 삭제

Chapter. 브라우저의 작동원리


🍟 URI URL

URL uniform resource locator
서버가 제공되는 환경-네트워크상-에 존재한 파일의 위치

URI uniform resource identifier
url + query, bookmark

🍟 IP & 포트

IP internet proctocol address :
네트워크에 연결된 특정 PC의 주소를 나타내는 체계

  • localhost, 127.0.0.1 :
    현재 사용중인 로컬 pc
  • 0.0.0.0, 255.255.255.255 : 로컬 네트워크에 접속된 모든 장치와 소통하는 주소

PORT
ip 주소가 가리키는 pc에 접속할 수 있는 통로,
사용 중인 포트는 중복해서 사용할 수 없다

22 : SSH
80 : HTTP
443 : HTTPS

🍟 도메인 & DNS

ip 주소가 지번 또는 도로명 주소라면, 도메인은 해당 주소에 위치한 상호임
= 웹 브라우저를 통해 특정 사이트에 진입 시 ip 주소를 대신하여 사용하는 주소

DNS domain name system, 호스트의 도메인 이름을 ip 주소로 변환하거나
반대의 경우를 수행할 수 있도록 함

🍟 AJAX

form 태그로 정보를 서버에 전송하면 페이지가 한번 전환이 되어야 하는데,
페이지 전환으로 인해 필요하지 않은 부분까지 전부 로딩을 해야함

그래서 원하는 부분만 로딩을 하기 위해 서버와 자유롭게 통신할 수 있는 XMLHttpRequest
페이지 깜빡임 없이 seamless하게 작동하는 Javascript와 DOM을 이용하는 Ajax가 개발됨 = > 현재는 더 쉬운 fetch API가 많이 사용됨

서버에서 데이터를 가져오는 방법

  • XMLHttpRequest
function reqListener () {
  console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();
  • jQuery Ajax
$.ajax({
  url: 'http://example.com',
  method: 'GET',
  dataType: 'json'
})
  .done(function(json) {
	console.log(json)
  })
  .fail(function(xhr, status, errorThrown) {
    
  })
  .always(function(xhr, status) {
	console.log('요청완료')
  });
  • fetch
fetch('http://example.com')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err=>{
    console.error(err)	
  });

Chapter. HTTP


🍕 HTTP Messages

http = hypertext transfer protocol
html과 같은 문서를 전송하기 위한 프로토콜
웹 브라우저와 웹 서버의 소통을 위해 디자인 됨
클라이언트가 http messages 양식에 맞춰 요청을 보내면
서버도 http messages 양식에 맞춰 응답
http는 특정 상태를 유지하지 않는 특정이 있음 - stateless(무상태성)

request와 responses 유형이 있으며 파일, api, 기타 인터페이스가 자동으로 완성시킴

공통

  • start line : 요청이나 응답의 상태를 나타냄
    응답에서는 status line이라 칭함
  • HTTP headers : 요청을 지정하거나 메시지에 포함된 본분을 설명
  • empty line : 헤더와 본문을 구분하는 빈 줄
  • body : 요청과 관련된 데이터나 응답과 관련된 데이터 혹은 문서를 포함

Chapter. ssr&csr


페이지가 렌더링 되는 위치에 따라서 나뉨

🌭 Server Side Rendering

  • SEO가 우선순위인 경우 사용
  • 첫 화면 렌더링이 빠르게 필요한 경우
  • 웹페이지가 사용자와 상호작용이 적은 경우

🌭 Client Side Rendering

  • SEO가 우선순위가 아닌 경우
  • 사이트에 풍부한 상호 작용이 있을 경우
  • 더 나은 사용자경험 (더 나은 동적 렌더링 등)을 제공할 경우

🌭 CORS

브라우저가 리소스 로드를 허용해야하는 원본이 아닌 다른 원본을 서버가 나타낼 수 있도록 하는 HTTP 헤더 기반 메커니즘 =>
api를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올수 있으며
다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야함

여기에서 출처는 protocol과 host, 그리고 port까지 모두 합친 것을 의미
= 서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들

profile
Salty as Salt

0개의 댓글