안녕하세요.
Hynn 입니다.
이번 포스팅에서는 Ajax 에 관련하여 학습을 진행하고자 합니다.
이전 프로젝트에서 진행했을때, 가장 구현하고자 했지만, 정해진 Module 안에서 진행을 하려고 하다 보니, Ajax 에 대한 필요성을 보다 많이 느끼게 된 프로젝트 이기도 했습니다.
오늘 포스팅에서는 이 Ajax 가 무엇이고, 어떻게 동작을 지원하는지에 대해서 알아보고, 실제 코드 작성을 다음 포스팅에서 나누어 진행할 예정입니다.
===========
1. Ajax 란 무엇인가요?
2. Ajax 의 동작방식
3. Ajax와 함께 알아야할 XML
===========
1. Ajax 란 무엇인가요?
Ajax는 Asynchronous JavaScript and XML의 약자로 쉽게 이해하자면, 웹 페이지의 일부만을 새로고침해서, 사용자는 새로고침이 된지 인지할 수 없이, 서버에 통신하여 데이터를 새롭게 표시해주는 기술이라고 생각하시면 편합니다.
Ajax 는 새로운 신기술이라고 할 수 는 없습니다. 아래의 기술을 결합해서 만들어진 기법이거든요.
- HTML/CSS
- JavaScript / DOM
- XML
단순히 Ajax 라고 하니, 이해가 안되실 수도 있습니다.
이를 한번에 이해하는 좋은 예제가 있습니다. 그것을 살펴보면 Ajax 가 적용된 것과, 적용되지 않은 것의 대한 예제를 쉽게 알 수 있습니다.
위의 영상을 보면, 예전 회원가입을 했거나, 조금 오래된 사이트에서 회원가입을 시도할 때,
팝업으로 ID중복체크를 했던 시절을 기억하시나요?
즉, 위의 예시대로라면, Ajax 적용과 비적용은 이러한 통신의 대한 과정이 사용자가 느끼기에 조금 다를 수 밖에 없습니다.
위의 구조는 모두 동일하게 서버로부터 요청해서, 회원정보가 담겨있는 DB 에 사용자가 사용을 희망하는 아이디의 값이 같은 것인지를 검사하고, 그 결과에 따라 가능/불가능 여부를 출력해야 합니다.
하지만 기존에는 하나의 요청을 전달하면 페이지가 랜더링이 되면서, 페이지 전체가 새로고침이 이루어지는 구조였습니다.
그러다보니 팝업에서 검사 후 문제가 없다면 사용이 되고, 그렇지 않다면 오류가 출력되는 구조 이후에 사용하기 혹은 예제처럼 아이디가 자동으로 입력이 되는 구조였습니다.
하지만 Ajax 를 적용하면, Google 웹 사이트의 예제처럼, 아이디를 입력하고 keyup 이벤트가 발생하는 즉시, 중복여부를 서버와 통신해서 바로 메시지로 표시해주는 통신이 가능하게 됩니다.
즉, "웹 페이지" 를 새로고침 하지 않고 "일부"만 새로고침을 하게되고, 실제 사용자는 이러한 통신을 인지하지 못하는 상태가 된 것이기도 합니다.
이것이 바로 Ajax 입니다.
2. Ajax 의 동작방식
Ajax 의 동작방식은 그림으로 표현하는것이 더 좋은 예제가 될 것 같습니다.
실제 통신의 방식은 Ajax 가 더욱 더 복잡해보일 수는 있습니다. 그만큼 코드작성에더욱 신경을 써야하는 것은 사실입니다.
하지만 통신의 방식을 직접 사용하는 사용자 입장에서는 더욱 좋아보이기도 합니다.
그 구조를 한번 살펴보도록 하겠습니다.
먼저 기존의 방식을 살펴보면 대략 이렇습니다.
즉, Client 에서 요청을 생성하면, 이전 TCP 통신에서 다루었던 SYN > ACK+SYN > ACK 이후에
Client 에서는 이 정보를 바탕으로 페이지를 새롭게 그려냅니다.
즉, 1개의 요청의 처리가 완료되면 페이지가 새롭게 Rendering 혹은 Redirect 가 되는 구조입니다.
하지만 여기서, 이러한 방식을 하게 될 경우, 예를 들어, 회원가입같이 작성해야할 컨텐츠가 많은 상황에서는 새로고침이 될 경우
기존에 입력한 데이터가 모두 사라지게 될 수밖에 없는 상황이 발생합니다.
그래서 기존에 회원가입에서 팝업창으로 별도로 확인 하고 그 아이디정보를 입력되도록 한 것이기도 합니다.
하지만 여기서 Ajax 를 적용하면 아래와 같이 통신이 이루어집니다.
TCP 통신의 규격은 동일하겠습니다.
하지만 여기서 XMLHttpRequest 라는 객체 및 요청이 전달되고 이를 바탕으로 HTML,XML,JSON 과 같은 응답 결과를 클라이언트에게 전달하면서, 일부만 다시 로딩을 할 수 있도록 구현된 것이 Ajax 입니다.
물론 그림으로는 간단하게 설명했지만, 아래의 과정을 거치는 것이 일반적입니다.
- 최종사용자에 의해 이벤트가 실행됩니다
- 요청 이벤트가 발생하면 Public(정적) JavaScript 파일에서 이벤트를 호출합니다.
- 이 때 JavaScript 는 XMPHttpRequest() 요청으로 객체를 생성, 그리고 서버로 요청을 보냅니다 ( TCP 1Step. SYN)
- 서버는 이를 확인하고 XMPHttpRequest()에 담겨진 것을 바탕으로 Ajax 요청을 처리하고 클라이언트에 전달합니다. (TCP 2Step ACK+SYN)
- 클라이언트는 수신된 정보를 바탕으로 HTML/XML/JSON 형태의 데이터를 클라이언트에 전달합니다. (TCP 3Step. ACK)
- Res.Render/Redirect 가 아니라, 필요한 정보만을 전달함으로, 웹 사이트의 일부만이 변화가 발생합니다.
하지만 여기서 우리가 한가지 더 알아보아야 할 것은 XML 입니다.
물론 깊게는 아니지만.. 간단하게는 알아야 이해가 조금 더 쉬울 것 같습니다.
3. Ajax와 함께 알아야할 XML
XML 의 단어는 위의 Ajax 의 명칭에서 나온 단어기도 하지만, 정식명칭은 Extensible Markup Language 라고 합니다.
이 XML의 기본적인 기능은 바로 3가지로 요약이 가능합니다.
- 데이터를 구조화합니다.
- 구조화된 데이터를 저장합니다
- 저장한 데이터를 전송합니다.
XML 문서는 요소마다 태그로 정의되는 구성을 지니고 있습니다.
이 구성요소는 예를 들면 아래와 같이 구성됩니다.
<root>
<port:3000></port>
</root>
하지만, XML 의 장점은, 이런 요소 안에 요소가 중첩된 계층 구조를 가지고 있기 때문에, 이를 사용하면 태그에 중첩된 다단계 문서를 만들 수 있습니다.
하지만 Ajax 에서 XMLHttpRequest 이 사용되는 이유 중 하나는, 플랫폼/응용프로그램에 독립적 특징을 지니고 있습니다.
즉, XML을 읽고 처리할 수 있는 플랫폼/응용프로그램이라면, 시스템이 다르더라도 데이터를 저장하고 교환하는것에 대한 장점을 가지고 있습니다.
다음 포스팅에서는 기본적으로 XMPHttpRequest 를 사용해 기본적으로 코드를 만들어보도록 할 예정입니다.
감사합니다.
댓글