AJAX?
Asynchronous JavaScript And XMLHttpRequest 약자로 JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다.
AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 페이지를 보여줍니다.
AJAX의 2가지 핵심 기술
AJAX를 구성하는 핵심 기술은 JS, DOM, Fetch 입니다.
fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있습니다. fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 합니다. (비동기적 방식)
서버로부터 필요한 데이터를 받아올 수 있다는 건 새로운 페이지로 이동없이 스크롤을 내리면 기존 페이지에서 필요한 부분만 추가(변경)할 수 있다는 뜻입니다. (스크롤은 예시)
XHR과 fetch
최근에는 XHR보다 fetch를 많이 사용합니다.
(fetch 등장 이전 사용한 것이 XHR입니다.)
ex)
// Fetch를 사용
fetch('http://kakao.gg/messages')
.then (function(response) {
return response.json();
})
.then(function (json) {
...
});AJAX의 장점
-
HTML 페이지를 완성하여 보내주지 않아도 웹 페이지를 만들 수 있습니다. AJAX 사용 시 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저 화면 일부를 업데이트 하여 렌더링합니다.
-
일부분만 렌더링 하기 때문에 빠르고 더 많은 상호작용이 가능한 어플리케이션을 만들 수 있습니다.
-
AJAX에서는 필요한 데이터를 텍스트 형태 (JSON, XML 등) 보내면 되기 때문에 비교적 데이터 크기가 작습니다.
AJAX 단점
-
SEO(Search Engine Optimization) 불리합니다. 데이터의 일부만 긁기 때문에 사이트 정보를 긁어가기 어렵기 때문입니다.
-
뒤로가기 버튼.. 일반적인 사용자들이 적응을 못하고 있지만 이는 문제 될 리 없습니다.. 사람은 적응하니까요..
SSR?
Server Side Rendering의 줄임말, 웹 페이지를 브라우저에서 렌더링 하는 대신, 서버에서 렌더링합니다. 브라우저가 서버에 GET 요청을 보내면 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. 브라우저에 도착하면 완전 렌더링 된 상태입니다.
- SEO가 우선순위일 경우 사용합니다.
- 첫 화면 렌더링이 빠르게 필요한 경우 사용합니다.
- 클라이언트와 서버간 상호작용이 적은 경우 활용됩니다.
CSR?
Client Side Rendering의 줄임말, SSR과 반대입니다. 클라이언트가 페이지를 렌더링합니다. 일반적인 경우 CSR입니다. 클라이언트가 요청을 하면 서버는 응답하고 자료를 받아 렌더링합니다.
- 클라이언트가 서버에 많은 요청을 보낼 때 사용됩니다. 빠른 라우팅으로 강력한 UX를 제공합니다.
SSR과 CSR의 차이
주요 차이점은 페이지가 렌더링 되는 위치입니다. SSR은 서버에서 페이지를 렌더링하고, CSR은 클라이언트에서 페이지를 렌더링 합니다.
CORS (Browser Seurity Model)
- CORS: 서로 다른 Origin 간 리소스 공유, 브라우저가 사용자를 보호하기 위한 정책
모든 조건을 준수해야 하고, GET, HEAD, POST 조건을 충족 시켜야 합니다.
기타 수동적으로 내용을 추가할 경우 거절됩니다.
