[Network] http, 네트워크 기초

🦋 클라이언트

• 인터넷 연결이 없으면 쇼핑몰 앱은 정상동작을 안함

• 이유는 상품정보를 인터넷의 서버로 받아오기 때문

• 서버는 영어단어 그대로 제공serve하는 주체

• 쇼핑몰앱과 연결된 서버가 없다면 신상품 나올때마다 계속 앱을 업데이트해야함

• 결제도 안됨. 금전정보를 주고받는 은행서버와 연결필요하므로

• 리소스에 접근하는 앱은 마치 손님(client)와 같아서 리소스를 갖고있는 점원(server)에게 물품을 요청해야 합니다.

• 사실 서버는 리소스를 전달할뿐 리소스 저장공간은 DB라는 창고에 둔다.
  

• 이처럼 클라이언트ㅡ서버ㅡ데이터베이스 형태를 3-Tier아키텍처라고 한다.

• 클라이언트 서버 종류 : 웹사이트(웹앱), 스마트폰앱, 데스크탑앱

🦋 클라이언트<->서버 통신과 API

• 클라이언트ㅡ서버간 통신은 요청과 응답으로 구성됨. 요청이 있어야 응답이 옴
  
• 프로토콜: 통신규약. 손님이 주문하기위해선 꼭 지켜야 하는 약속이 존재함
• 웹 어플에서는 클라이언트와 서버가 http라는 프로토콜로 대화를 나눔
• 프로토콜 종류
  
• http, https, ftp, smtp, ssh, rdp, websocket / tcp, udp 외우진x, 상식선에서 알아두셈
• api: 컴퓨터에게 0101로 요청할수 없으니 리소스 활용을 위해 제공하는것.
• interface: 의사소통이 가능하도록 만들어진 접점
  
• 파라미터 ?와 & 사용 참조
  
• http의 메서드 종류
  

🦋 URL

• URL은 서버가 제공되는 환경 파일위치를 나타냄
• file://127.0.0.1/Users/username/Desktop/ 브라우저로 pc폴더, 파일 탐색 가능
• uri > url포함함 url은 scheme, host, url-path 3개, uri는 5개
  
• uri의 구성요소

🦋 PORT

• ip adress : 특정 pc의 주소
• port : 네트워크상에서 특정pc를 나타내는 ip주소와 그 주소에 진입할수있는 통로
• IPv4 : 192. 168. 0. 1 이런 4덩이 숫자로 구분된 ip주소체계, 요즘은 IPv6
• 반드시 기억해야할 ip주소
• localhost, 127.0.0.1 : 현재 사용중인 로컬pc를 지칭함
• 0.0.0.0, 255.255.255.255 : broadcast adress임, 로컬 네트워크에 접속된 모든장치와 소통하는 주소
• port : 리액트 실행하면 127.0.0.1:3000 처럼 뒤에 :3000rkxdl pc에 접속할수있는 통로, 만약 다른 프로그램에서 3000번 쓰고있으면 3001로 실행됨.
• 잘 알려진 포트번호
• 22 : SSH, 80 : HTTP, 443 : HTTPS
• 이런건 url에 생략가능 사실 www.naver.com:443임, 듣보는 꼭 적어줘야함

🦋 domain name

• 터미널에서 도메인이름을 통해 nslookup codestates.com 로 ip주소 확인할 수 있음
• DNS : 도메인이름과 매치된 ip주소를 확인하는 작업을 위한 서버, 브라우저 검색창에 naver.com을 입력한다면, 이 요청은 dns에서 ip주소를 찾아 클라이언트와 서버를 통신케함

🦋 크롬브라우저 에러 읽기

🦋 HTTP

• HTTP 메세지: 클라이언트와 서버사이 데이터교환방식. 요청(Requests), 응답(Responses)두가지임
  
• HTTP메시지의 구조

1. start line : 요청이나 응답의 상태를 나타냄. 항상 첫번째줄에 위치함
2. HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합이다.
3. empty line : 헤더와 본문을 구분하는 빈줄
4. body : 데이터또는 문서

• 이중 start line, http headers 를 묶어 요청or응답의 head라 하고 payload는 body라고 함
• stateless : 상태를 가지지않음. http의 큰 특징임. 클라이언트의 상태를 저장하지 않음.

🦋 HTTP Requests

• 구성요소 : Start line, Headers, body로 구성됨
• Start line

1. 수행할 작업이나 방식을 설명하는 HTTP method를 나타냄.
2. 요청대상또는 프로토콜,포트,도메인의 절대경로는 요청 컨텍스트에 작성됨.
   
3. http버전에 따라 http message 구조가 달라집니다.

• Headers

• 헤더 이름, 콜론, 값을 입력함
  

• general headers : 메시지 전체에 적용되는 헤더

• request headers : fetch를 통해 가져올 리소스나 클라이언트에 대한 자세한 정보를 포함

• entity headers : body에 담긴 리소스의 정보를 포함하는 헤더

• body

• http messages 마지막에 위치, 필수는 아님, 두종류로 나뉨

1. single-resource bodies : 헤더 두개로 정의된 단일파일로 구성
2. multiple-resource bodies: 여러 파트로 구성된본문, 파트마다 다른정보를 지님

🦋 HTTP Responses

• status line
• http responses는 서버가 클라이언트에게 보내는 메시지임. 응답의 첫줄을 status line으로 부름.
• status line은 다음의 정보를 포함함

1. 현재 프로토콜의 버전 HTTP/1.1
2. 상태 코드 : 요청의 결과를 나타냄 (200,404등)
3. 상태 테스트 : 상태 코드에 대한 설명

• headers
• 응답에 들어가는 http headers는 요청 헤더와 동일한 구조를 가짐. 대소문자 구분없는 문자열, 콜론(:), 값을 입력합니다. 값은 헤더에 따라 다르고, 몇그룹으로 나눌 수 있다.
  
• body
• 모든응답에 body 필요하진 않음

1. single-resource bodies : 헤더 두개로 정의된 단일파일로 구성
2. multiple-resource bodies: 여러 파트로 구성된본문, 파트마다 다른정보를 지님

🦋 브라우저의 작동원리(보이는 곳) 개요

• 웹 페이지의 일부만 바꾸고 싶을때 AJAX를 씀

AJAX란?

• Js, DOM, HTML등 다양한 기술을 사용하는 웹 개발 기법
• 웹페이지에 필요한부분만 비동기적으로 받아와 화면에 그려낼 수 있는게 특징
• 구글 메인에서 검색창은 한글자 입력할때마다 그 글자로 시작되는 단어들을 서버로부터 받아와, 추천검색어로 띄움 즉, 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링되며, 여기에 ajax가 사용됨.
• 페북 무한스크롤처럼 비동기적으로 데이터를 서버에서 받아와 브라우저에 렌더링하는 기법이 ajax이다.

AJAX의 두가지 핵심기술

1. JS와 DOM
2. Fetch

• 예전엔 서버에 form태그로 서버에 데이터 전송해야 했음. 서버는 매번 새로운 웹페이지를 응답했음
• fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 데이터를 받아올수있음
• fetch : 서버에 요청을 보내고 응답을 받을때까지 동작을 멈추지않고 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 말함. JSON을 씀
• 또한 js에서 dom을 조작해서 fetch를 통해 전체페이지 아닌 필요부분만 변경할수있음
• 예전에는 XHR썼으나 요즘은 Fetch사용함.
• fetch 예제
  
• ajax 장점
• 서버에 html완성해서 보내주지 않아도 웹페이지 만들수있음
• 표준화된 방법
• 유저중심 어플개발
• 더 작은 대역폭
• ajax 단점
• seo에 불리
• 뒤로가기 문제: 이전상태를 기억안함

🦋 SSR vs CSR

• ssr 서버 사이드 렌더링
• csr 클라이언트 사이드 렌더링
• 웹개발에서 두가지의 차이점을 아는것은 중요함

SSR

• 웹페이지를 브라우저에 렌더링하는 대신 서버에서 렌더링함
• 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링했기때문에 SSR이라 부름
• 사용자가 브라우저의 다른 경로로 이동할때마다 서버는 같은작업을 다시 수행함

CSR

• 클라이언트에서 페이지를 렌더링함
• 사용자가 브라우저 다른 경로로 이동하면 서버가 웹페이지를 보내지 않고 브라우저가 페이지를 다시 렌더링함.
• 경로요청마다 페이지를 새로고침하지않고 동적으로 라우팅을 관리함

차이점

• 페이지가 렌더링되는 위치 SSR은 서버, CSR은 브라우저에서 렌더링함

SSR 사용

• SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용합니다. (검색엔진 키워드 중요한 네이버블로그, 뉴욕타임즈)
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR 이 적합합니다.
• 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있습니다.

CSR 사용

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

🦋 핵심

• 프론트엔드 개발자로서 기본적인 서버는 개발할 줄 알아야함
• 2티어 3티어
• api문서를 잘 작성해야 백엔드와 소통이 원활하다
• api문서 잘 작성하는법 : rest api
• http://www.google.com:80/search?q=JavaScript
• 여기서 search 전까지 URL, 서치이후 포함한게 URI
• 200은 ok
• 400대는 요청을 못한 내잘못, 500은 서버잘못
• status line은 중요함.대부분 맨윗줄보고 판단함. 헤더는 안중요함
• 헤더중 acces control allow origin, set cookies는 알아두면 좋음
• ssr => 필요에 따라 페이지를 분기 => react => csr
• 자바스크립트 파일이 너무 커 => 로딩시간이 길기 => ssr => 첫페이지를 보여주는데 늦음
• 필요한 자바스크립트만 일단 받아오면 되는거 아님?
• 코드 스플리팅 => 필요한 자바스크립트만 일단 받아옴 => lazy loading
• 부트캠프 다 외울순 없다. 프로젝트까진 다 경험해봐라