SPA
Single Page Applicaton이라는 의미로 사용자의 인터렉션으로 인한 URL 변경 시 화면 전체의 로드 없이 화면의 일부분만 동적으로 렌더링 되는 방식으로 AJAX를 이용해서 대부분의 리소스들을 로드 시 한 번에 읽은 후 JSON과 같은 데이터만 요청해서 받아올 때 관련된 화면만 변경시키는 방식으로 동작된다. 기존의 방식의 경우 페이지의 변경이 일어날 때마다 새로운 페이지가 전송되었기 때문에 페이지 용량이 커질 수록 생기는 부담이 있었고 SPA는 이러한 부담을 개선하기 위해 나타난 웹 어플리케이션 구조이다.
HTML 5 History API
SPA 프레임워크가 서버로 요청을 전달하지 않고 자바스크립트 영역에서 화면 이동이 일어난 것과 같은 효과를 낼 수 있다.
History.back(): 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드History.forward(): 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드History.go(): 특정한 세션 기록으로 이동하게 해 주는 비동기 메서드History.pushState(): 주어진 데이터(JavaScript 객체)를 세션 기록 스택에 저장History.replaceState(): 최근 세션 기록 스택의 내용을 주어진 데이터로 교체
React
SPA 프레임워크로 Virtual DOM을 사용해서 브라우저의 성능 저하 없이 웹 페이지의 변경을 한 번에 일어나는 것이 가능한 점을 바탕으로 최소화된 브라우저 상호작용으로 인터렉티브한 웹 사이트를 만드는 것이 가능하다.
CORS
한 출처에서 실행 중인 웹어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 브라우저에게 부여하도록 알려주는 체재이다. 보완상의 이유로 해당 교차 출처 요청을 제한하기 때문에 다른 출처의 자원을 요청할 때느 preflight라는 예비 요청을 통해 서버에게 확인 작업을 하고 요청이 가능하면 다른 리소스에 대한 요청을 하는 방식으로 동작한다.
Simple requests
CORS의 예비요청 없이 바로 요청이 가능한 조건은 다음과 같다.
GETHEADPOSTmethod- 유저 에이전트가 자동으로 설정 한 헤더
- CORS-safelisted request-header로 정의한 헤더
Accept
Accept-Language
Content-Language - 아래의 Content-Type 헤더
application/x-www-form-urlencoded
multipart/form-data
text/plain
ㅇㅅㅇ