2022-06-07(Section2_Network_2)

0. 시작하게 된 계기 및 다짐 😮

• 이번 코드스테이츠의 백엔드 엔지니어링 개발자 부트캠프에 참여하게 되면서 현직개발자 분들의 빠른 성장을 위한 조언 중 자신만의 블로그를 이용하여 배운 것 들을 정리하는게 많은 도움이 된다 하여 시작하게 되었다.

  • 그 날 배웠던 것을 길지 않아도 좋으니 정리하며 복습하는 습관 기르기
  • 주말에 다음주에 배울 내용들을 예습
  • 코딩 문제와 java코드들은 꾸준히 학습
  • 자료구조를 이용한 알고리즘 문제 해결 학습

1. 학습 목표 😮

목표	결과
extra) Chrome Network Tab	O
SPA기법_(AJAX) 및 SSR,CSR/CORS 개념 이해	O
크롬 브라우저의 에러 메시지를 통해 문제를 파악	O

2. 정리

SPA(single page application) 기법 AJAX

 1). AJAX
 - Asynchronous JavaScript and XML
 - CSR 방식을 위해 사용
 - javascript, DOM, fetch, html등 다양한 기술을 사용하는 웹 개발 기법
 - 웹페이지의 필요한 부분만을 비 동기적으로 받아와 화면에 그림
 - 검색창으로, 글자를 입력할 때마다 글자로 시작하는 단어들을 서버로 받아와 추천 검색어  표시(비동기적)

2). AJAX 2가지 핵심기술
 (1) JavaScript와 DOM

 (2) Fetch
   - 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 계속해서 페이지를 사용할 수 있게 하는 비동기적 방식
   - 현재 페이지에서 작업을 하는 동안 서버와 통신을 유지
   - 페이지 이동없이 서버로부터 필요한 데이터를 받아올 수 있음
   - javascript와 호환되는 JSON을 사용
   - 이전에는 XHR(XMLHttpRequest)을 사용했고, 더욱 업데이트한게 Fetch

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

3). AJAX 장점
 - 서버에서 HTML을 완성하지 않고 보내도 필요한 데이터를 비동기적으로 가져와 웹페이지를 만들 수 있음
 - 이때, 화면의 일부분만 업데이트하여 렌더링됨
 - 표준화된 이후, 브라우저에 상관없이 AJAX 사용 가능
 - 유저 중심 app 개발 AJAX사용하면, 필요한 부분만 렌더링하여 더 빠른 상호작용
 - 더 작은 대역폭 : 필요한 데이터를 텍스트 형태(JSON,XML 등)을 이용하여 보내어 데이터의 크기가 작음

4). AJAX 단점
 - 데이터를 채우기 위한 틀/HTML 뼈대만 존재하고 데이터는 이후 전 세계 사이트를 돌며 정보를 긁어오는 방식으로,
    데이터가 처음에 없기에 사이트의 정보를 긁어가기 어렵다
 - AJAX는 이전의 상태를 기억하지 않기에, 뒤로가기 버튼을 눌러도 이전 상태로 돌아가지 않아 별도로 기능을 구현해야함
    (History API 사용)

SSR과 CSR

 1). SSR 
 - Server Side Rendering
 - 브라우저 대신 서버에서 렌더링을 함
 - 브라우저로 보내기 전에 서버에서 렌더링
 - 웹 페이지에서 데이터가 필요한 경우, 브라우저에 렌더링된 웹페이지가 도착된 후 응답을 보냄
 - 브라우저가 바뀌면 바뀔 때마다 위의 과정을 반복 수행

과정 : 브라우저 --> 서버 --> 서버에서 브라우저로 웹 페이지 파일을 전송 -> 완전히 도착하면 렌더링 종료
                 GET요청                   

2). CSR
 - Client Side Rendering
 - 클라이언트(웹 브라우저)에서 페이지를 렌더링
 - 서버에 요청이 오면, 웹페이지의 골격이 될 단일 페이지와 javaScript 파일을 함께 보냄
 - 이후, 클라이언트에서 받은 두 파일을 웹 페이지에서 렌더링 된 페이질 바꿈
 - 데이터의 경우, 데이터베이스에 API를 요청하여 데이터를 받음
 - 서버는 주로 API 응답을 담당
 - 브라우저가 바뀌면 요청한 경로에 따라 페이지를 다시 렌더링함

3). 주요 차이점
 - SSR은 서버, CSR은 클라이언트에서 렌더링을 함
 - 브라우저는 다른 경로를 요청할 때마다 동적으로 라우팅을 관리

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

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

Browser Secury Model

(1) CORS : Cross-Origin Resource Sharing
 # 참조 : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
 - 처음 전송되는 리소스의 도메인과 다른 도메인으로 리소스가 요청 될 경우 CORS요청에 의해 요청됨
 - 브라우저가 자발적으로 브라우저의 app을 사용하는 유저를 보호하기 위한 정책 
 - 클라이언트는 서버가 어떤 origin 요청을 허용하는지는 알 수 없습니다.
 [1] simple request : 
 [2] Preflighted request : 먼저 OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP요청을 보내 안전한지 확인후 원래 요청을 하는 방식
 
# 그 외) XSS,CSRF 등 존재

3. 피드백 😮

• 브라우저를 동작시키는 기법중 하나인 AJAX의 동작 원리와 핵심기술, 장/단점을 살펴보았다. AJAX는 CSR을 기반으로 동작하는데, 서버에서 비 동기적으로 필요한 부분만을 받아와 Client에서 렌더링을 하는 방식으로 이루어진다.

• SSR/CSR을 배워봤는데, SSR과CSR은 각 서버/클라이언트에서 브라우저를 렌더링 시키는것에 큰 차이점이 있는데, 각 웹페이지의 목적에 맞는 방식을 이용하여 사용하면 좋다. 이를 잘 이해하여 적절한 방식을 사용해야 한다.

• CORS는 브라우저의 유저를 보호하기 위한 보안모델인데, 간단히 하여 한 브라우저에서 다른 브라우저의 리소스를 받을 때 CORS요청에 의하여 안전하게 리소스를 받아오기 위함이다. (어떤 리소스를 요청할 지 모르기 때문에)

4. 앞으로 해야 될 것 😮

• 매일 꾸준히 할 것
  • 꾸준히 velog 작성
  • Java 언어 및 Algorithm 공부(Coding-Test)
  • 틈틈히 운동 하기

---

• 내일 해야 할 것
  • 네트워크의 HTTP의 추가적인 학습
  • REST API규칙과 실제 받아오는 실습