2022-01-27 브라우저의 작동 원리(비지블 AJAX)

SPA를 만드는 기술: AJAX

 

위 페이지에서 개 사진만 냥이 사진으로 바꾸고 싶다? 그럴때 AJAX를 사용함

 

 

AJAX란?

 

Asynchronous JavaScript And XMLHttpRequest의 약자로,

 

JS, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법!

 

AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것!

 

 

Q. 그럼 AJAX와 리액트의 차이는 뭔데? https://okky.kr/article/722164 투쟁결과가 있긴 함

 

예를들어 google.com에 접속해보자

 

 

html에 의해 나에게 필요한 페이지가 렌더링 됨.

 

허나, 여기서 검색창만큼은 유저의 요구에 따라 반응하며 변화하는 부분임!

 

다시 말해, 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링되며, 여기에 AJAX가 사용됨!

 

 

AJAX의 두 가지 핵심 기술

 

JavaScript, DOM, Fetch!

 

전통적인 웹 애플리케이션에서는 <form> 태그를 이용해 서버에 데이터를 전송해야 했음

 

또한 서버는 요청에 대한 응답으로 새로운 웹 페이지를 제공해 주어야 했음. 다시 말해,

클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동해야 했음

 

허나 Fetch를 사용하면 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있음!

 

Fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 해줌

 

즉 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라,

 

계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용!

 

또한 JS에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌

 

필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 안호 기존 페이지에서 필요한 부분만 변경 가능

 

 

Fetch 예제

// Fetch를 사용
fetch('http://52.78.213.9:3000/messages')
	.then (function(response) {
		return response.json();
	})
	.then(function (json) {
		...
});

 

 

XMLHttpRequest 예제

// XMLHttpRequest를 사용
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');

xhr.onreadystatechange = function(){
	if(xhr.readyState !== 4) return;
	// readyState 4: 완료

	if(xhr.status === 200) {
        // status 200: 성공
		console.log(xhr.responseText); // 서버로부터 온 응답
	} else {
		console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
	}
}

xhr.send(); // 요청 전송

이 외에도 Axios와 같은 라이브러리도 존재하며, 경우에 따라 적절한 것을 선택하여 사용

 

AJAX의 장점

 

- 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있음

 

이전에는 서버에서 HTML을 완성하여 보내주어야 화면에 렌더링을 할 수 있었으나

 

AJAX를 사용하면 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 렌더링 할 수 있음

 

 

- 표준화된 방법

 

이전에는 브라우저마다 다른 방식으로 AJAX를 사용했으나, XHR이 표준화되면서부터 브라우저에 상관없이

 

AJAX사용 가능

 

- 유저 중심 애플리케이션 개발

 

AJAX를 사용하면 필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있음

 

- 더 작은 대역폭

 

대역폭: 네트워크 통신 한 번에 보낼 수 있는 데이터의 크기

 

이전에는 완성된 HTML 파일을 한 번에 받아와야 했기 때문에 대역폭이 커야되었지만

 

AJAX에서는 필요한 데이터를 텍스트 형태로 보내면 되기 때문에 비교적 데이터의 크기가 작음.

 

 

AJAX의 단점

 

- Search Engine Optimization(SEO)에 불리

 

AJAX 방식의 웹 애플리케이션은 한 번 받은 HTML을 렌더링 한 후, 서버에서 비동기적으로 필요한 데이터를 가져와 그려냄.

 

따라서 처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성되어있는 경우가 많음.

 

그래서 AJAX 방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어려움

 

 

- 뒤로가기 버튼 문제

 

AJAX에서는 이전 상태를 기억하지 않기 때문에 사용자가 의도한 대로 동작하지 않음.

 

따라서 뒤로가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야함