1. 약어
Ajax(Asynchronous JavaScript and XML) 탄생 배경에는 2000년도 초반에 등장한 RIA(Rich Internet Application)이라는 패러다임이 있어요
이 패러다임은 웹 어플리케이션의 장점은 유지하면서 기존 웹 브라우저 기반 인터페이스의 단점인
늦은 응답속도, 데스크톱 어플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술들의 통칭이에요
즉, 웹 어플리케이션은 별도의 설치가 필요없다는 장점을 살리고 기존 마크업 언어 기반의 구성은 유지하면서
데스크톱 어플리케이션과 동등한 성능으로 사용자에게 양질의 경험을 주는 것을 목표로 하는 기술이에요!
RIA는 영어 문장 그대로 해석하면 부유한 인터넷 응용, 다시 말해서 웹 어플리케이션인데 풍부한 것을 의미해요
2. 의미
그럼 뭐가 풍부하냐 하면 웹을 보면 하나의 창에 여러가지 정보들이 있는데요
RIA 이전의 패러다임은 정적인 느낌이 강했다면 RIA 이후에는 동적인 느낌이 강해요
무슨 말이냐면 정적이다 라는 것은 웹 페이지가 한번 로딩이 되면 변화가 없다라는 말이에요
동적이라는 것은 웹 페이지가 한 번 로딩이 되어서 사용자의 웹 브라우저에 출력이 되었을 때
그 안에서 전체 페이지와는 상관없이 백그라운드 프로세스 영역에서 변화를 처리해준다는 의미에요
말로하면 무슨 느낌인지 잘 와닿지 않을 수 있어요 예를 들면 페이스북이 있는데요
페이스북의 뉴스피드에서 새로운 글을 보기 위해서 아래로 스크롤을 하는데 글들을 처음부터 왕창 불러놓고 보여주는 것이 아닌거는 다들 많이 사용하셔서 아실거에요
(프로그래밍적으로 말하자면 예전 패러다임에는 javascript가 없었다면 RIA 이후에는 javascript로 구현)
사용자가 더 많은 글을 원해서 스크롤을 맨 밑으로 내리면 그제서야 새로운 글을 DB에서 불러와 다시 사용자에게 보여지는데 이것을 동적이라고 불러요
정적은 그 반대로 한 번 DB에서 데이터를 가져올 때 사용자에게 보여줄 모든 데이터를 가져와서 뿌려주면 그 이후로 웹 페이지에 변화가 없는 것을 말해요
그런데 동적으로 보여주는 과정에서 페이지 전체가 로딩되지 않는데요 이게바로 동기 비동기의 차이에요
동기는 쉽게 말해서 웹 페이지를 구성하는 데이터들이 다 같이 행동하는 것을 의미하고 그에 반해 비동기는 각각의 데이터들이 따로 행동하는 것을 말해요
( 진짜 쉽게 말해서 동기는 순서대로 비동기는 비순서대로 )
3. 예시
예를 들어 구글 지도 혹은 네이버 지도가 있을 때 우리가 지도를 볼 때 지도가 나와있는 창이 있잖아요?
지도 위에 마우스로 드래그를 하면 지도에서 보여지는 부분이 옮겨지면서 지도가 로딩되는 것을 볼 수 있으실거에요
그럼 지도는 동기일까요 비동기일까요? 답부터 말하면 비동기에요
만약에 네이버 지도를 동기로 만들었다면 마우스로 드래그를 하고 지도가 불려오는 동안에 사용자는 아무것도 못할 거에요
게다가 지도의 로딩 과정이 첫번째 조각이 로딩 되고 나서야 그 다음 조각을 호출하고 이 조각이 로딩된 후에 다음 조각을 호출하는 답답한 과정을 거칠거에요
당연하다고 생각할 수 있지만 지도는 비동기로 구성이 되어 있어요 왜냐하면 속도면에서나 사용자에게 주는 느낌에서나 비동기로 구성하는게 맞다는 생각이 들어요
비동기로 구성이 되면 보여주는데 필요한 지도 조각을 한꺼번에 호출을 하고 로딩은 되는대로 보여줘요
또한 네트워크 상태나 서버 상태에 따라서 로딩 속도가 느릴 수 있는데 동기는 로딩하는 동안 사용자가 아무것도 할 수 없지만 비동기는 다른 동작을 할 수 있어요
4. 프로그래밍
위에서 살펴본 개념들을 프로그래밍으로 구현하는데 도움을 주는 것이 바로 Ajax인데요
Ajax라는 기술을 이용해서 우리가 비동기, 동적 웹 페이지를 구성할 수 있어요!
물론 Ajax말고도 다른 기술들이 있어요 (예를 들면 FLEX) 이 기술들은 XMLHttpRequest라는 API를 사용하는데 우리가 자바스크립트에서 직접 선언해서 사용하지는 않지만
자바스크립트의 대표적인 라이브러리 중에 jQuery에서 내부적으로 선언을 해줘요
사용 방법은 다음 포스팅에서 다룰게요~~
