[ Ajax 강좌 ] 1강. Ajax는 무엇일까요.

안녕하세요. 많이 찾지 않던 티스토리라 아직도 어색한데..
이곳에 Ajax에 관한 강좌를 진행해 볼까 합니다.
물론 !! 찾으시는 분만 보실 수 있겠죠. ㅎㅎ

필자를 소개 하자면 아무것도 없는 대학생입니다. ㅎㅎ
메뉴를 보시면 알겠지만 PHP와 ASP, AJAX, C#(ASP.NET, 응용프로그램 포함) 등을 주로 공부하고 있습니다.
올 방학에는 JSP를 공부할 계획이고요. 자바는 물론 공부를 해놓은 상태이지요 ㅎㅎ

제가 처음 AJAX 라고 하는 기술을 접한 것은 지난해 1학기였습니다. 정확히 말씀드리자면 2007년 1학기였지요. 교수님의 소개로 한번 공부해 보자 하는 생각에 찾아가 공부하게 된 기억이 있네요.

제가 공부하면서 제일 처음 접했던 것은 [ ActiveX 대체기술에 관한 정보] 들이었습니다.
실제로 ActiveX는 요즘들어서도 말이 많죠.
그런데왜? Ajax에서 ActiveX를 논해야 하는가 라는 질문이 딱! 떠오르실겁니다. ㅎㅎ
현재 Ajax는 많은 부분에서 사용되고 있지만 그것이 어떤 목적을 가지고 있다고 말하기는 힘든 것 같습니다.
이곳 저곳에 쓰이기 마련이지요. 하지만 ActiveX를 대체하기 위한 기술중에 하나인 것도 확실합니다.
요즘 SilverLight, Flex 등등의 많은 기술들도 ActiveX의 대체 기술중의 하나 라고 생각하셔도 무방할 듯 합니다. (그 궁극적인 목표가 대체에 있지 않을지는 모르겠지만요 ㅎㅎ)

그럼 잠깐 ActiveX에 대해 말씀드리고 넘어가겠습니다.
  이것은 물론 우리나라에만 한정된 문제라고 보여집니다. 우리나라가 ActiveX도배가 된 이래 문제가 발견된 지금까지도 무수히 많은 곳에서 ActiveX를 사용하고 있습니다. 문제라 함은 우선 MS의 끼워팔기 전술에 한 몫을 하고 있는 익스플로러가 되겠지요. 익스플로러 에서만 동작한다는 것입니다. 물론 리눅스는 이미 예전에 저리가라였죠. 시대가 시대인만큼 사용자의 수준은 많이 높아져 있는 상태입니다. 그리고 많이 다양해져있지요. firefox를 사용하는 사용자도 많고 리눅스를 사용하는 사용자도 많습니다. 하지만! 결정적인 문제는 대부분의 유용한 사이트들은 ActiveX를 사용하고 있다는 것입니다. 그것때문에 사용자는 ActiveX의 대체 기술을 원하고 있는 것이지요.(다른이유도 있겠지만 제일 큰 이유라고 생각합니다.) 그럼 왜 이런 문제 많은 ActiveX가 우리나라에 쓰이게 되었을까요. 그것은 아주 예전으로 돌아가서의 이야기 입니다. 그 때 당시 우리나라에는 64비트 암호화 기술이 도입되기 이전입니다. 그래서 그러한 기술을 가지고 있는 나라들에 굽신굽신(_ _) 대며 좀 빌려줘~~ 라고 말했지만 결국 얻지 못했답니다. 그래서 우리나라에서 자체개발을 했다죠. 그런데 그걸 웹에 응용할 수 있는 기술이 없었습니다. 결국 ActiveX에 실어 웹에 얹혀놨던 것이죠..... (그럼 외국은? SSH라는 보안 솔루션을 개발하여 사용했지요. 우리만................... ActiveX에 얹어서.............. 하하 -_-)
  결국 개나소나 ActiveX를 쓰기 시작했고 (막말해서 죄송합니다 ㅋㅋ) 이 지경까지 오게 되었다고 합니다. 아무튼 그래서 요즘에 대체기술을 찾고 있고, 그 중 UI를 담당하는 부분이 Ajax라고 보시면 되겠습니다.
서론은 여기서 끝내고!! ^^

웹을 많이 사용하시는 분이라면 누구나 한번쯤 Ajax 라는 말을 들어보셨을 것이라 생각이 됩니다.
실제로 Ajax는 많은 부분에서 사용되고 있으며, 개발자 분들께서 아주 많은 시도들을 하고 계시지요.

그런데 Ajax가 무엇이냐!

Ajax는 'Asynchronous JavaScript and XML' 의 약자이며 이름에서도 알 수 있듯이 JavaScript, 통신객체( XMLHttpRequest ), 통신 데이터(XML) 세 가지가 주요 구성 요소며, JavaScript를 통하여 웹서버에 비동기 통신으로 데이터를 송수신하여 웹에 반영해 주는 방식이다.

라고 말씀을 드리겠습니다.! ( 위의 본문은 필자의 논문에서 발췌되었습니다. )
  위에서 말씀 드렸다시피 Ajax는 JavaScript로 동작을 합니다. 기존의 웹 방식에서는 필터링 기능등의 간단한 기능만을 Javascript로 처리를 했습니다. 그리고 그러한 데이터를 전송해 주는 것이 XMLHttpRequest 라는 개체인데 이것은 기존의 브라우저에도 내장되어있는 함수라고 합니다. (지금까지는 사용을 하지 않았었죠^^)

  자, 여기서 JavaScript로 처리할 때와 기존의 PHP,ASP,JSP 등의 서버사이드 언어로 개발했을 때의 차이점을 알아야겠지요.

  JavaScript는 클라이언트. 즉 사용자의 브라우저에서 처리가 됩니다. 반면 PHP,ASP,JSP 등의 서버사이드 언어는 서버에서 모든 것이 계산 된 후 사용자에게 HTTP 프로토콜을 이용하여 전송해 주는 형태를 띄고 있지요.

다시 말씀 드리자면 AJAX를 사용하면 처리해주는 부분은 모두 사용자의 브라우저 에서 처리가 됩니다. 데이터만 끌어서 가지고 오는 것이지요. 어떤것으로? XML의 형태로 말입니다.(나중에는 XML형태로 가지고 오지 않아도 되는 경우도 있습니다) 그렇기 때문에 이 AJAX라는 놈의 강점은 서버에 무리를 주지 않는다 라는 것이 있습니다. 하지만 말이 그렇지 상황에 따라서는 오히려 더 큰 무리를 줄 수도 있습니다.(크기가 작은 대신 요청이 많을 수 있기 때문에)
  하지만 단점은 무엇일까요? 맞습니다. 사용자의 환경이 각각 모두 다를 수 있으므로 그것에 대한 처리를 해주어야 한다는 사실이지요. (개발자만 죽습니다 ㅠ_ㅠ)

자, 그럼 어지러운 글보다 예제를 보면 편하겠지요? ㅎㅎ
우리가 쉽게 찾을 수 있는 예저는 검색엔진에서 쉽게 찾을 수 있는 연관검색어 기능입니다. (아래 사진)

위처럼 우리는 [하하] 라고 검색어를 입력했을 때 발생하는 이벤트에 따라 그에 알맞은 결과를 볼 수 있습니다.
하지만 실제 처리되는 내용은 어떠한 것이 있을까요? 한번 찾아보지요. ㅎㅎ

자, 찾아본 결과 위와 같은 데이터가 전송됨을 알 수 있습니다.
이것은 어떠한 흐름을 갖고 있느냐, 설명을 드린다면

우선 우리가 검색엔진의 검색어에 ㅎ 이라고 입력하고 키를 떼는 순간 onKeyUp 이벤트가 발생을 합니다.(자바스크립트죠? ㅎㅎ) 그럼 그 이벤트에 따라 XMLHttpRequest 라는 객체를 사용하여 데이터를 얻어올 수 있는 페이지를 호출을 합니다. 그럼 아래와 같이

window.google.ac.jsonRPCDone(["하ㅎ",["하하몰","하하투어","하하 너는 내운명","하회마을","하회별신굿탈놀이","하회","gk한게임","하현곤","하후돈","하호테크"],["1,030,000 결과","309,000 결과","289,000 결과","288,000 결과","30,600 결과","757,000 결과","2,350 결과","94,400 결과","19,600 결과","1,770 결과"]])

라는 결과값을 돌려주게 되는 것입니다.( 하하 일때 호출한 데이터가 아니라 "하ㅎ" 일때 의 호출결과이네요^^;; 앗 실수 ㅎ 그리고 지금 구글의 결과물은 xml데이터가 아니고 json의 형식을 띄고 있네요. 이것은 나중에 설명을 드리겠습니다. ) 

아무튼 저러한 결과를 가져와서 자바스크립트 만으로 각각의 PC에서 결과를 내어 위와 같은 결과를 얻을 수 있는 것이겠지요. 아마 아시는 Ajax 응용 사이트가 있다면 위와 같은 디버깅툴을 이용하여 조회해 보시면 눈에 볼 수있는 XML 파일이나 혹은 JSON과 같은 형식문서를 볼 수 있을 것입니다.

그럼 기존 방식과의 차이점은?
간단합니다. 기존의 방식은 이벤트 자체가 Form을 통한 페이지 호출에 있습니다. 쉽게 말해 데이터를 넘겨주고 받고 하기 위해서는 페이지 호출이 있어야 한다는 말입니다. 예를들어 위와 같은 연관검색어를 찾고자 한다고 하면 검색어를 입력하고 연관검색어 탭을 선택한 후 검색 버튼을 누릅니다. 그럼 결과를 표시해 주는 페이지를 호출하게 되고 그 페이지에서는 대략 PHP의 예로 $_POST['검색어'] 로 그 값을 받아 DB에 가서 찾아오는 형식을 띄고 있습니다. 이럴 경우 전송량을 따져 본다면 계산된 결과값에 따라 달라지겠지만 그 외 로고, 광고 등의 이미지를 모두 불러오는 결과를 낳게됩니다. 그리고 연관검색어를 계속 검색하기 위해 몇번이고 똑같은 이미지나 광고이미지 들을 불러들이게 되겠지요.
  Ajax를 사용한 방식을 보자면 자바스크립트의 여러가지 이벤트를 통해 페이지를 호출하되 데이터 만을 가져와 각각의 사용자에서 처리를 합니다. 위의 예와 같이 페이지에서 페이지의 이동을 하지 않고 간단한 Key 또는 Mouse, onFocus 등의 이벤트를 통하여 다른 페이지를 호출하여 옵니다. 그렇기 때문에 내가 필요한부분의 데이터 만을 처리 할 수 있다는 장점이 있지요. ( 단점도 무지하게 많습니다. )

  제가 느끼기에 정말 적절한 시기에 쓰인 경우는 연관검색어 부분이라고 생각합니다. 많은 개발자들께서 채팅에도 적용을해보고, 게시판에도 적용을 해보고 하시는데... 그것은 어찌보면 낭비가 아닐까 생각도 해봅니다. 물론 제가 개발한 방명록도 있지만요.

단점을 간단히 말씀드리자면 소스코드가 모두 공개되기 때문에 보안상의 헛점이나.. 혹은 코드의 개별화 등에 큰 치명타가 있다는 것이지요. ㅎㅎ 이것은 뭐 아직까지는 대책이 없는 것 같습니다. 그리고 한 페이지 내에서 처리되기 때문에 뒤로가기 같은 기능이나 즐겨찾기 기능이 기본적으로 존재할 수 없습니다. ㅎ 하지만 여러가지 시도를 통해 해결되어진 상태라 알고 있습니다.

여기까지 첫강을 마치겠습니다. ㅎㅎ
읽어보시고 아니다 싶으신 부분이 있으면 태클 무지 걸어주셔도 되고요 ㅎㅎ
읽으신 분들은 댓글 부탁드립니다.

그럼 2강에서는 실질적으로 페이지를 호출해보고 처리해 보도록 하겠습니다!!
2강때 뵙겠습니다 ~_~ ㅎㅎ
(일단 PHP와 Ajax의 연동 부분부터 진행하겠습니다.)