AJAX
- Asynchronous JavaScript And XMLHttpRequest
- AJAX 구성 요소(기술)
- JavaScript, Fetch
- DOM: 데이터에 접근하거나, 화면 구성을 동적으로 조작
- 웹 페이지 표현을 위한 HTML, CSS
- 데이터 교환에 사용되는 JSON 이나 XML
- 웹 서버와 비동기적 통신을 위한 XMLHttpRequest 객체
- AJAX의 장점
- 서버 의존도가 낮음, 서버에서 HTML을 완성해 보내주지 않아도 웹페이지를 만들고, 비동기적 데이터 로딩으로 화면의 일부만 업데이트하여 렌더링
- XHR 표준화로 브라우저에 구애받지 않고 사용 가능
- 유저 중심 어플리케이션 개발이 가능, 일부만 렌더링하여 더 빠르고 많은 상호작용 가능
- 더 작은 대역폭(통신 1회에 주고받는 데이터의 크기)
- AJAX의 단점
- SearchEngineOptimization(SEO)에 불리, AJAX는 뼈대에 필요한 데이터만 렌더링 하는 방식, 검색 사이트는 사이트의 모든 정보를 긁어와 검색 결과로 보여줘야 함
- 뒤로가기 구현을 별도의 History API를 사용해야 함, AJAX는 이전 상태를 기억하지 않음
SSR vs CSR
SSR
- Server side rendering: 웹페이지를 서버에서 렌더링, 정해진 웹 페이지 파일을 브라우저로 전송해주는 방식, 경로를 이동할 때마다 전체 페이지를 전부 렌더링 함, 느림
- SEO, 웹페이지 첫 화면 렌더링이 빠르게 필요한 경우, 상호작용이 적은 경우에 유리함
CSR
- Client side rendering: 웹페이지를 클라이언트에서 렌더링, 서버는 웹페이지의 뼈대가 되는 단일 페이지와 JavaScript를 클라이언트로 전송, 클라이언트에서 렌더링을 함, 변경되는 내용에 따라 필요한 데이터만 가져와서 변경이 필요한 부분만 렌더링 함
- 웹 애플리케이션의 빠른 동적 렌더링을 제공, 빠른 라우팅으로 풍부한 상호작용에 유리, 이는 더 나은 사용자 경험을 제공함
CORS
- Cross-Origin Resource Sharing, 교차 출처 리소스 공유
- 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
- 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행
- CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원합니다. 최신 브라우저는 XMLHttpRequest 또는 Fetch와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화
