[HTTP/네트워크] 브라우저의 작동원리(보이는곳:AJAX,SSR과CSR,CORS) [BEB 6th]

코드스테이츠 블록체인 부트캠프 6기 

 

SPA를 만드는 기술 : 
AJAX란? Asynchronous JavaScript And XMLHttpRequest

(핵심기술)JavaScript, DOM, Fetch, XMLHttpRequest, HTML등의 다양한 기술 사용된 '웹 개발 기법'

AJAX의 장점1 : 웹 페이지에 필요한 데이터만 비동기적으로 받아와 렌더링 하는데 AJAX기술이 쓰임 **특징**

(이전에는 서버에서 HTML을 완성해 보내줘야 화면에 렌더링을 할 수 있었는데, )

ex. 검색창(한글자입력시마다 추천검색어), 무한스크롤(서버로부터 Fetch가져와 업데이트하여 렌더링)

 

•XHR(XML Http Request)의 단점을 보완한 새로운 WepAPI Fetch.

Cross-Site이슈 등 XML보다 가볍고 JavaScript와 호환되는 JSON사용

WepAPI Fetch : 사용자가 현재 페이지에서 작업을 하는 동안 (멈추는게아닌)서버와 통신할 수 있도록 한다. "비동기적"

DOM에 적용시켜 새로운 페이지로 이동하지 않고, 기존 페이지에서 필요한 부분만 변경.

Fetch장점: 간편, pomise지원 등

Fetch와 XML의 예제 비교

AJAX의 장점2 : XHR이 표준화되면서부터 브라우저에 상관없이 AJAX사용! (표준화되기전엔 브라우저마다 다른방식으로 AJAX사용했었음)

AJAX의 장점3 : 더 많은 상호작용이 가능한 어플리케이션을 만들 수 있다 (빠르니깐~)

AJAX의 장점4 : (더 작은 대역폭! 대역폭! 네트워크 통신에 한 번에 보낼 수 있는 데이터의 크기.)

AJAX에서는 필요한 데이터를 텍스트형태(JSON,XML등)라서 데이터의 크기가 비교적 작다. (이전 완성된HTML은 한번에 보내기 큰 편)

 

AJAX의 단점1 : Search Engine Opimization(SEO)에 불리하다..

AJAX방식의 웹 어플리케이션은 처음받은 HTML파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우(데이터없이)가 많아

사이트의 정보를 긁어가기가 힘듦

AJAX의 단점2 : 뒤로가기 버튼 문제

AJAX는 이전 상태를 기억하지 않기 때문에;;ㅋ(쿨해~~) 기능을 구현하려면 History API를 사용하면 된다!

 

지메일이 핫메일을 이긴 찐짜이유 (Ajax가 가져온 UI의 혁신)

 

SSR과 CSR 

차이점 : 렌더링 위치 차이/ 좋고나쁨이 아니라 특징차이.

	SSR Server Side Rendering	CSR Client Side Rendering
렌더링을 어디서?	서버	브라우저 (클라이언트)
작동방식	(브라우저) : 서버 URI로 GET요청	(브라우저) : 서버 URI로 GET 요청
	(서버) : 완전히렌더링해서 (+DB가필요하면여기서 작업) 정해진 웹페지파일을 브라우저로 전송	(서버) : 웹페이지(정적 단일페이지-틀), javaScript파일 브라우저로 전송
	(브라우저) : 파일도착하면 렌더링 완료	(브라우저) : 정적 단일 페이지를 기반으로 동적으로 JS구동! 렌더링 완료 (+DB가 필요하다면)서버에 데이터를 요청해 렌더링
유저의 경로이동 시,	다시 서버에서 부터 작업 (새로고침)	(서버로보내지않고) 요청한 경로에 따라 페이지를 다시 (동적) 렌더링.
사용방법	•SEO(Search Engine Optimization)이 우선순위인 경우 •첫 화면 렌더링이 빠르게 필요한 경우 •단일파일용량이 작은 경우 •인터렉션이 적은 경우	•SEO가 우선 순위가 아닌 경우 •인터렉션이 많은 경우!  (DOM을 활용한 빠른 동적 렌더링)
	서버야,같이일하자! (브라우저'나만 열일할수없지')	index.js에서 확인가능
	블로그(HTML전체렌더링) ... 컴성능+인터넷속도가 빨라져서 깜빡이는것 처럼 보임.	검색창, 무한스크롤

 

 

 

Browser Secury Model
서버 / DB / 클라이언트-브라우저의 보안의 3가지  (2️⃣XSS 3️⃣CSRF)생략
1️⃣CORS Cross-Origin Resource Sharing(CORS)우리모두가꼭읽어보아야한다!

아니근데 이게 눈이 더 가네ㅋㅋ[슈슉-슈슉.-슉.-슉.C..C.CORS놈아]

다른 Origin간의 소스공유 / 브라우저만의 자발적인 보안조치

 

•Simple requests : [GET, HEAD, POST]택1 또는 그외 기본으로세팅되는 헤더만 인정

•Preflighted requests** : POST보다 "옵션"메소드가 먼저  요청을 한다.

•Requests with credentials : 브라우저에 쿠키,세션을 심을 때 requests가 따라간다.

CORS의 핵심

 

고도화된 최근의 웹 cross orijin →CORS필요하게됨

브라우저에서 크로스 도메인 요청은 기본적으로 제한되어 있었다.

(나의 클라이언트가 아닌데; 어떤 요청을 할줄알고? 어떤 리소스를 생성할지도 모르잖아!)

개발자들은 웹 애플 고도화를위해 브라우저회사에 개선요청 → sever가 allow하는 범위내에서는 가능하게”

Preflighted req의 options