웹을 공부하던 중에 AJAX라는 기술을 알게 되었고 AJAX가 비동기 방식이라는 것도 알게 되었다. 알고 있었던 개념이라 생각하고 넘어갔었는데 다시 보니 기억이 나지 않았다...
이 시간에 확실히 정리 및 정복하겠다...!!
AJAX란?
위키에서 AJAX를 아래와 같이 정의하고 있다.
AJAX는 JavaScript의 라이브러리 중 하나이며 Asynchronous JavaScript And Xml (비동기식 자바스크립트와 XML)의 약자이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다.
즉, JavaScript를 사용한 비동기 통신, Client-Server간 XML 데이터를 주고 받는 기술이다.
JavaScript는 보통 Web을 구현할 때 많이 사용하는 언어이다. 따라서 웹의 Client-Server간에 XML 데이터를 주고 받는 기술이라는 것은 이해했다. 그러나 '비동기 방식이 뭐지?'라는 생각이 들었다.
그래서 비동기 방식이 뭔데? (Asynchronous)
비동기 방식은 웹 페이지를 리로드하지 않고 데이터를 불러오는 방식이다. AJAX를 이용해 서버에 요청 후 응답이 오는 시간 동안에 멈춰있는 것이 아닌 다른 프로그램(작업)은 계속 돌아간다는 의미이다.
페이지 리로드의 경우 전체 자원을 다시 불러와야하는데 image, script, 기타 코드 등을 모두 재요청할 경우 불필요한 자원 낭비가 발생하게 되지만 비동기 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있는 장점이 있다.
그 반대인 동기 방식은? (Synchronous)
서버에 요청 후 응답에 오는 시간 동안에 멈춰있는 것을 의미한다. (하나만 처리, 다른 프로그램은 STOP!) 응답을 받아야만 다음 동작이 수행되는 방식이다.
아하 그러면 하나의 일(작업)을 완전히 끝내고 다음 일(작업)을 차례로 수행하는 것이라고 이해하였다.
비동기 vs 동기
아래 그림을 통해 간단히 정리하여 보았다.
-
동기(Synchronous) 방식은 하나의 작업(요청과 그 결과)이 완전히 끝낸 후 다른 작업을 수행하는 방식이다. 그 결과를 받기 전까지는 다른 일을 처리하지 못한다!
-
비동기(Asynchronous) 방식은 하나의 작업(요청과 그 결과)이 완료되던지 말든지에 상관없이 다른 작업을 수행하는 방식이다. 결과를 받기 전에도 다른 일을 처리할 수 있어 자원을 효율적으로 사용할 수 있다.
AJAX 왜 쓰는걸까?
자원 낭비를 방지하면 당연히 좋다는 사실은 누구나 알고있다. 그렇다면 '자원 효율성의 이유로만 AJAX를 쓰는걸까?'라는 생각이 들었다...
why?
기본적으로 HTTP 프로토콜(상태를 가지고 있지 않음!)은 Client에서 요청을 보낸 후 Server로부터 응답을 받게 되면 연결이 끊기게 되었다. 그래서 화면의 내용을 갱신하기 위해서는 다시 요청하고 응답을 받으면서 페이지 전체를 갱신하게 된다. (--> 연결이 끊겼기 때문에 전체를 갱신해야함!) 따라서 이러한 방식은 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야 하는데 엄청난 자원 낭비, 시간 낭비를 초래한다.
하지만 AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XML HttpRequest 객체를 통해 Server에 요청을 보낸다. 이 방식은 JSON이나 XML 형태로 필요한 데이터만 받아 갱신하므로 그만큼 자원, 시간을 아낄 수 있다.
자원 효율성으로 인해 속도가 빨라지는 이유로 AJAX를 쓰는거였다...! 웹 뿐만 아니라 컴퓨터공학 관점에서 이러한 장점(속도, 자원)은 엄청난 차이를 불러일으킬 수 있다는 점을 간과했다...
(Ex) 페이지 전체를 다시 로드해야하는 양이 1억이라 하고, AJAX를 이용하여 일부분만 갱신할 수 있도록 해주는 로드양이 100이라 가정하자. 무려 1,000,000배 차이로 이는 매우 Critical하다고 생각한다.
(너무 말도 안되게 극단적인 예시인 것 같기도 하나 이해를 위해...^^)
AJAX의 장단점
장점
-
웹 페이지의 속도 향상
-
서버의 처리가 완료 될 때까지 기다리지 않고 다른 일을 처리할 수 있음 --> 자원 효율성 증가
-
서버에서 Data만 전송하면 되므로 전체적인 코드의 양이 감소
-
기존 웹에서 불가능했던 다양한 UI를 가능하게 함
(Ex) 사진공유 사이트 Flickr의 경우 사진 제목, 태그를 페이지 리로드 없이 수정할 수 있음
단점
-
History 관리가 안됨 --> 보안에 취약
-
연속으로 많은 데이터를 요청하게 되면 서버 부하가 증가 및 자주 발생할 수 있음
-
XML HttpRequest를 통해 통신을 하는 경우 사용자에게 아무런 진행 정보가 주어지지 않음(즉, 응답을 받았는지 알 수 없음) --> 따라서 아직 처리가 완료되지 않았는데 사용자가 페이지를 나가거나 오류가 발생할 수 있음
출처 :
https://coding-factory.tistory.com/143
https://private.tistory.com/24
https://ko.wikipedia.org/wiki/Ajax
https://velog.io/@yejinh/%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0
https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
