AJAX란?

AJAX란

이전의 웹 페이지는 오직 HTML코드를 서버로부터 전달받아 웹페이지 전체를 렌더하는 방식이였다.

화면의 값이 바뀌면 서버로부터 새로운 HTML을 전송받아 화면 전체를 다시 re-render하는 방식으로 동작했지만 이는 매우 비효율적인 방식이다. 값이 바뀐 부분만 부분적으로 서버에서 받아오는것이 데이터 통신면에서도 클라이언트쪽에서도 불필요한 비용이 발생하는것이다.

이로 인해 값이 바뀌면 서버에서 다시 HTML전체를 받아 리렌더하기 때문에 화면이 깜빡이는 이슈도 있고 당연히 성능면에서도 불리하다.

 

그러나 AJAX의 등장으로 이러한 문제를 해결 할 수 있다. 웹페이지에서 변경할 필요가 없는 부분은 다시 리렌더하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링 하는 방식이 가능해진 것이다. 이로써 웹 브라우저에서도 빠른 성능과 부드러운 화면 전환이 가능했다.

 

대표적인 예로 구글 맵스가 AJAX를 사용하며 그 가능성을 보여주었고 본격적으로 널리 사용되기 시작했다.

 

동작방식

사용자가 AJAX가 적용된 UI와 상호작용하면, 서버에 AJAX 요청을 보내게 된다. 서버는 DB에서 데이터를 가져와서 JS 파일에 정의되어 있는 대로 HTML/CSS와 데이터를 융합하여 만든 DOM 객체를 UI에 업데이트 시킨다. 비동기로 이루어지며, 기존의 페이지를 전부 로딩하는 방식이 아닌 일부만 업데이트 하는 방식이다.

 

 

 

출처: 자바스크립트 딥다이브

출처: https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/ajax.md

GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들