[Ajax] Ajax란?

 

 

 

HTTP 프로토콜은 클라이언트에서 request를 보내고 서버에서 response를 받으면서 연결이 끊긴다. 화면을 변경할 필요가 있으면 다시 request 하고 response를 받아야 한다. 매번 서버로부터 새로운 HTML을 전송받아 웹페이지를 전체를 렌더링 하게 되는 것.

변경할 필요가 없는 부분까지 매번 새로 렌더링을 하다보니 불필요한 데이터 통신이 발생하고 이로 인해 순간적인 화면 깜빡임이 생긴다.

또한 클라이언트와 서버가 동기방식으로 동작하기 때문에 서버로 부터 응답이 오기까지 다음 작업은 중단된다.(블로킹)

AJAX를 이용해 비동기로 통신하게 되면  json이나 xml형태로 데이터를 받아 일부만 갱신하기 때문에 깜빡임 없이 부드러운 화면 전환과 자원, 시간을 아낄 수 있다.

 

동기 방식과 비동식 방식의 속도차이

 

🗂️ ajax(Asyncronous JavaScript and XML)란?

ajax는 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 서버에 request 하여 전체 페이지를 고치지 않고도 페이지 일부만 데이터 로드 기법

 

🗂️ ajax 장점

변경이 필요한 데이터만 비동기 방식으로 전송받아 필요한 부분만 한정적으로 렌더링해 빠른 동작과 부드러운 화면 전환이 가능하다.

• 필요한 데이터만 서버로부터 전송 받기 때문에 불필요한 데이터 통신 발생 하지 않음
• 필요한 부분만 렌더링 하기 때문에 화면 깜빡임이 발생하지 않음
• 클라이언트와 서버가 비동기 방식으로 동작하기 때문에 서버로부터 응답이 오기까지 블로킹이 발생하지 않는다.
• 각 페이지마다 HTML 코드없이 서버에서 data만 전송해 주면 되기 때문에 코드가 컴팩트해진다.

 

🗂️ ajax 단점

클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용해 서버 푸시 방식의 실시간 서비스는 불가

히스토리 관리가 안되므로 보안 문제

연속으로 데이터 요청 시 서버 부하 증가

XMLHttpRequest 사용 시 사용자는 진행 정보를 알 수 없다.

script로 작성되어 디버깅이 어려움

 

🔎 클라이언트 풀링 방식 : 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식

🔎 서버 푸시 방식 : 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보 제공

 

 

📍 react의 ajax 구현

리액트는 UI 구축에 초점을 맞춘 프레임워크로 HTTP Client를 내장하고 있지 않다.

🔎 HTTP Client는 HTTP 프로토콜을 이용해 서버에 request를 보내고 response를 받는다.

리액트는 Ajax를 구현하기 위해선 자바스크립트의 내장 객체인 XMLRequest 객체를 사용하거나 HTTP Client가 필요(라이브러리 이용)

 

 

🗂️ react에서 ajax를 구현할 수 있는 방법 3가지

① JQuery의 ajax

② 외부 라이브러리인 axios

③ javascript built-in 라이브러리 fetch