AJAX는 Asynchronous Javascript And XML의 약자.
비동기적으로 JS사용해 DOM을 갱신하고 조작하는 웹개발 기번을 말한다.
사용자가 AJAX가 적용된 UI와 상호작용하면, 서버에 요청을 보낸다.
서버는 DB에서 데이터를 가져와 JS파일에 정의되어있는대로 HTML과 CSS를 융합해 만든 DOM객체를 UI에 적용한다.
이과정은 비동기로 이루어지며 => (비동기: 요청과 결과가 동시에 일어나지 않을 거라는 약속이다.
하나의 요청에 따른 응답을 즉시 처리하지 않아도, 그 대기 시간동안 또 다른 요청에 대해 처리 가능한 방식이다..)
기존의 페이지를 전부 로딩하는 방식이 아니라 일부만 업데이트 하는 방식이다.
XMLHttpRequest
XMLHttpRequest객체를 사용해
open()으로 요청할 메소드와 URL을 설정한다. 그 후 모드 로드 되었을떄 콜백함수를 초기화한다.
즉, 어떤 메소드를 사용해 요청하는지(post,get등)
요청할 URL은 어디인지 준비시키는 것이다.
다음은 get요청을 작성한것이다.
let ourRequest = new XMLHttpRequest(); ourRequest.open( "GET", "https://learnwebcode.github.io/json-example/animals-1.json" ); ourRequest.onload = () => { let ourData = JSON.parse(ourRequest.responseText); console.log(ourData[0]); }; ourRequest.send(); // 받는 요청
요청을 하고, 로드가 되면 => 요청이 잘 되면
결과를 변수에 담아 찍어보고, 이 요청을 받는다
==> Promise와 axios, await등이 나오기 전에 많이 사용했다.
Fetch API
fetch를 통해서 요청을 할 수도 있다. IE는 지원하지 않는다.
그러나 XMLHttpRequest보다 훨씬 직관적이다. ES6에서 표준이 되었고 Promise를 리턴한다.
fetch("https://learnwebcode.github.io/json-example/animals-1.json") .then(res => res.json()) .then(resJson => console.log(resJson)); ```
응답객체는 json(),blob()과 같은 내장객체라고한다.
이것은 다시 promise를 리턴한다.
----AJAX의 장점
- 페이지를 전환하지 않고 빠르게 화면 일부분을 업데이트 가능
- 수신하는 데이터 양을 줄일 수 있고 클라이언트에 처리를 맡길 수 있다.
- 서버 처리를 기다리지 않고 비동기 요청이 가능하다.
AJAX의 단점
- 지원하지 않는 브라우저 있음.
- 페이지 전환없이 이루어지는 서버와의 통신으로 보안상 문제 존재
- 무분별하게 사용하면 역으로 서버의 부하가 늘어날 수 있다.
- 동일출처정책이 발생할 수 있다.
Same-Origin Policy => 동일 출처 문제(SOP)
어떠한 문서나 스크립트가 다른 프로토콜, 포트, 호스트에 있는 리소스를 사용하는 것을 제한 하는 정책HTTP헤더를 사용해 요청을 보낼때 HTTP 헤더의 Origin속성에 자동으로 값이 할당된다.
Origin: http://company.com
이 도매인에서 다른 출처의 자원을 사용하기위해 ajax요청을 하면 SOP정책때문에 에러가 발생한다.
이 에러가 CORS에러(CORS이슈)라고 할 수 있다.
CORS
이전에는 동일한 도메인에서 리소스를 받아왔지만 지금은 클라이언트에서 도메인이 다른 서버에서 제공하는 API를 사용하기도 한다. 따라서 전처럼 동일한 도메인간의 요청만 할 수는 없어졌기에 CORS(Cross Origin Resource Sharing
- CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘이다.)
가 등장하였다.
동일출처정책은 브라우저에서 임의로 하는것이다.
클라이언트에서 CORS에러를 해결하려면
- 브라우저에서 동일출처 정책을 사용하지 않는 방식이 있고,,
- 자바스크립트 파일이나 css파일은 SOP에 영향받지 않고 가져올 수 있기에 이것을 이용해 자바스크립트 파일을 가져와 json형식으로 파싱해 데이터를 사용하는 방식이 있다.
- 또는 프록시 서버를 만들어 프록시 서버에서 Access-Control-Allow-Origin: 원하는 주소(도매인)
을 헤더에 담아 응답하면 된다. - 프론트엔드에서 webpack-dev-server proxy 기능을 사용하면 서버쪽 코드를 수정하지 않고 해결 할 수 있다.
서버에서는 cross-origin HTTP요청을 허가하는 Access-Control-Allow-Origin 헤더에 주소를 추가해 줄 수도 있다.
CRA(create-react-app)로 생성한 프로젝트라면 package.json에 proxy 값을 설정하여 간단하게 webpack-dev-server proxy 기능을 활성화 할 수 있다.
API가 동일한 도메인에서 제공이되는 경우는 문제 없지만 API의 도메인과 서비스의 도메인이 다르다면 axios의 글로벌 baseURL을 설정하면 된다.axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/' : '{API 도메인}';
