AJAX 그것이 알고싶다! (2) [스마트인재개발원]

AJAX 그것이 알고싶다!(1)

https://jaws-coding.tistory.com/14

AJAX 그것이 알고싶다! (1) [스마트인재개발원]

---

 

그러면 지난번에 이어서 이번에는 AJAX의 필요성과 흐름 그리고 장단점에 대해 포스팅 해보겠습니다!

앞서 설명했던 동기와 비동기 처리방식을 선으로 나타낸 그림입니다.

동기와 비동기 처리방식을 한눈에 볼 수 있으니 차이점을 공부하실 때 참고하시면 되겠습니다.

출처 - https://wickedmagica.tistory.com/184

 

웹이 동작하는 흐름은 AJAX가 등장한 이전과 이후로 나누어서 볼 수가 있는데요!
먼저 AJAX가 사용되기 이전의 웹의 초창기 클래식 웹 모델을 보도록 하겠습니다.

 

1. Classic Web application model
브라우저 클라이언트가 상단에 있고, 하단에는 서버-사이드 시스템 부분이 있습니다. 보통 백엔드 개발자라고 하는 것이 이 부분을 담당하시는 분들이 됩니다.
브라우저 클라이언트 부분은 사용자 그리고 사용자들에게 화면을 제공해주는 프런트엔드 개발자가 이 역할을 맡게 되어있습니다.

 

밑부분 백엔드 쪽에서는 서버가 있고, 위는 보통 클라이언트 단이라고 부르게 되고 유저 인터페이스가 그 안에 있습니다.

브라우저에서 사용자가 도메인 주소를 통해서 서버 요청을 하게 되면 서버단에서 데이터베이스에서 데이터를 꺼냅니다.
백엔드 환경에서의 프로세싱, 처리를 해주게 되고, 그리고 이 시스템에서 네트워크 통신을 통해서 사용자의 브라우저로 데이터를 전송해줍니다.

그럼 전송받은 데이터가 이미지 파일이나 html 같은 구조 언어, 그리고 css 스타일 언어와 같은 것들이 이 내에서 해석이 됩니다.
해석이 되어 사용자가 보는 UI로 구현이 되는 것입니다.
웹을 사용하시면서 일반적인 데스크톱에서 사용되는 애플리케이션보다 느린 경험을 좀 하게 되는 데, 이유가 여기에 있습니다.

통신을 해서 데이터를 받아서 조립을 해서 만든 화면이 필요하니까 (UI단에서) 서버에서는 데이터를 전송해줘야 되고..

이러한 과정을 거치다 보니, 사용자가 보는 시간대가 빠르지가 않게 되는 것입니다.
느리게 구성이 돼서 화면이 보이는 것! 그것이 초창기 웹 애플리케이션입니다.

이때 요청과 응답이라는 과정이 있는데 요청할 때 (request) HTTP 프로토콜을 가지고 브라우저를 통해서 주소를 입력하게 되면 해당 주소가 가진 IP 어드레스의 통신을 통해서 서버에서 응답을 받게 됩니다.

서버가 프라이밍 처리를 해서 데이터 (- HTML이나 CSS, JS 등 데이터들)를 전송해줍니다.
이걸 응답(reponse) 한다고 얘길 하는 것이죠!
그래서 이런 클래시컬한 모델에서는 상당히 느리게 작동하게 됩니다.
또 하나 단점은 매번 요청을 하면 매번 새로운 데이터를 보내서 다시 화면을 구성을 해야 됩니다.
즉 우리가 뭔가를 클릭하고 액션을 요청할 때마다 서버에 요청을 하게 되고, 서버는 그걸 처리한 다음에 다시 페이지를 만들어서 전송을 해주는 시스템입니다.   상당히 느리겠죠?

 

2. Ajax Web application model

반면에, AJAX를 사용하는 시스템을 보겠습니다.
기존의 브라우저 클라이언트랑 서버 계층 외에 중간 계층이 생겼습니다.
여기서 중요한 역할을 하는 것이 자바스크립트입니다.
자바스크립트에는 엔진이 포함되어 있는데 정확히는 브라우저 엔진이 포함되어 있는 것입니다.
다음과 같이 AJAX 엔진이라는 것이 포함되어 있습니다. 이 AJAX엔진이 하는 일이 무엇이냐면 브라우저단에서 사용자 인터페이스를 통해서 사용자 요청을 하게 되면 자바스크립트 함수가 AJAX엔진을 통해서 이를 요청을 합니다.
그러면 엔진은 다시 서버에 요청을 합니다. 이때 중요한 차이점은 옆의 모델은 모든 데이터를 한 번씩 다 불러오게 됩니다.
하지만 이 모델은 일부만 바꿀 수 있는 것이죠. 그래서 요청을 할 때 일부분의 필요한 데이터만 요청을 합니다.

그러면 web and or xml server 이 쪽 데이터의 서버에서는 데이터베이스에서 필요한 자료만 꺼내고, 프로세싱을 통해서 xml 또는 json 같은 데이터를 보내주게 됩니다.

기존과 다른 점은 기존에는 html과 css 같은 데이터들을 다 보내줘야 되는데, AJAX를 사용하게 되면 정말 딱 필요한 데이터만 보낼 수 있게 됩니다.
당연히 모든 데이터가 이동하는 것보다는 필요한 데이터만 읽어오는 것이 보다 시간이 적게 들게 되겠죠?
그리고 AJAX엔진을 통해서 받은 데이터를 이 내부에서 조립을 해가지고 UI를 통해서 보여주게 되는 것입니다.

 

---

다음은 AJAX의 장, 단점입니다.

---

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

 

 

스마트인재개발원