본문 바로가기

이론/JSP&Spring&등등 이론

[Ajax] 왜 Ajax를 쓸까?



헬스일정관리시스템을 개발하면서 누구나 그렇겠지만 구글링의 도움을 많이 받고 있는데

Javascript, JQuery 를 제대로 배워본적도 공부해본 적도 없는 내가 이해하기 힘든 코드가 아주 많다는 것을 느꼈다.


특히, 이번에 Validation, S3 업로드 기능을 구현해보면서 아주 많이 느꼈다.

결국 인터넷에 널린 Ajax 코드 활용은 포기하고 그냥 컨트롤러 단에서 처리해주는 것을 택했는데

성공하고서도 너무 찝찝한거다 ㅠ____ㅠ  


왜 컨트롤러 단에서 쉽게 처리 가능한 걸 굳이 에이젝스로 처리하는 걸까!? (물론 아는 사람들은 그게 더 쉬워서라고 할 수도 있겠지만)

인터넷에 널리고 널린 코드 중 왜 컨트롤러에서 처리하는건 찾기가 이렇게 힘든걸까!!! 정말 힘들어 죽는줄 알았네 



그래서, 자바스크립트도 잘 모르면서 시작된 Ajax에 대한 탐구

(아 그래도 에이젝스 좀 들어봤다고 정처기에 나온거 맞춘게 생각나는군) 


Ajax(Asynchronous Javascript and XML)

해석 그대로 - 비동기 자바스크립트 그리고 XML

위키피디아에 따르면,

HTML, CSS + DOM, 자바스크립트(동적인 정보) + XML, JSON(데이터 교환 및 조작)

이 조합으로 이루어진다고 한다.

왜 필요한가는 기존 기술과의 차이점에서 알 수 있을 것 같다.

기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다. 이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. 결과적으로 중복되는 HTML 코드를 다시 한번 전송을 받음으로써 많은 대역폭을 낭비하게 된다. 대역폭의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화(상호 반응)하는 서비스를 만들기 어렵게도 한다.

반면에 Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 보통 SOAP이나 XML 기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 자바스크립트를 쓴다. 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다. 또한 웹서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다.

출처 - 위키피디아

즉,

  • 서버로 제출하고 컨트롤단에서 처리한 뒤 페이지를 리턴하면 아예 웹페이지 전체를 새로 작성해서 응답해주게 된다. 현실적으로 제출 폼과 제출 후 결과의 페이지는 유사한 구조를 가질 때가 많기 때문에 매우 비효율적이라 변화하는 부분만을 재출력해주겠다는 것이다.

  • 또, 웹서버에서 전적으로 처리하던 데이터의 일부를 클라이언트측에서 처리하면서 응답성, 처리량이 좋아진다는 것.

으로 내 기준에서 재해석된다. (맞겠지..?)


-----------
헬스일정시스템의 파일 업로드는 "트레이너 추가" 라는 폼 입력을 통해 발생하는 이벤트이다. 현재 컨트롤단에서 파일을 S3에 업로드하고 다시 해당 빈 폼을 응답으로 전달해주는데, 전송하기 전 페이지=전송 후 페이지 인데 굳이 왜 새로 작성해서 응답해주어야하냐 에서 나온 개념인 것 같다.
결론적으로 내가 매우 비 효율적인 서비스를 구현하고 있었나보다 ,, 다시 비슷한 시스템을 제작한다면 그땐 꼭 에이젝스를 사용해보는 걸로..

아, 하지만 무분별한 Ajax 요청을 남발하면 역으로 서버 부하가 커질수 있다니까 적절히 사용하는 것이 중요할 듯하다.