HTTP/네트워크 기초-3
AJAX: SPA를 만드는 기술
- AJAX란
- Asynchronous JavaScript And XMLHttpRequest
- JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법
- AJAX 구성 요소(기술)
- 웹 페이지 표현을 위한 HTML, CSS
- 데이터에 접근하거나, 화면 구성을 동적으로 조작하는 DOM
- 데이터 교환에 사용되는 JSON 이나 XML
- 웹 서버와 비동기적 통신을 위한 XMLHttpRequest 객체
- JavaScript
- 웹 페이지를 리랜더링 할 때마다 전체 데이터를 받아 오는 것이 아니라, 필요한 데이터만 비동기적으로 받아와 화면을 그려낼 수 있다
- 두가지 핵심기술: JavaScript+DOM, Fetch
- Fetch: Web API
- Fetch 이전에는 XMLHttpRequest를 사용하였음, 단점을 보완하여 나옴
- XML보다 가볍고 JavaScript와 호환되는 JSON을 사용함
- AJAX의 장/단점
- 장점
- 유저 중심 어플리케이션 개발이 가능: 빠르고 더 많은 상호작용이 가능함
- 대역폭이 작아짐: 네트워크 통신 한번에 받아오는 데이터의 크기가 작아짐
- 단점
- SEO(Search Engine Optimization)에 불리
- 뒤로가기 버튼: 이전 상태를 기억하지 않음, History API를 따로 사용해야 함
SSR, CSR
- Server Side Rendering
- 웹 페이지를 서버에서 랜더링하여 전송해 준다
- 페이지를 이동할 때에, 서버에서 페이지를 랜더링하여 보내준다
- Client Side Rendering
- 웹 페이지를 클라이언트에서 랜더링한다
- 서버에서 웹 페이지의 골격이 되는 단일 페이지와 JS 파일을 받아옴
- 페이지를 이동할 때에, 추가적으로 랜더링할 부분의 데이터만 API로 서버에 요청한다
CORS
- Cross-Origin Resource Sharing, 교차 출처 리소스 공유
- 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
- 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행
- CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원합니다. 최신 브라우저는 - XMLHttpRequest 또는 Fetch와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화
