메인 콘텐츠로 건너뛰기
AJAX란 무엇인가요? AJAX 사용 사례는 어떤 것들이 있나요? AJAX의 실제 예는 어떤 것들이 있나요? AJAX는 어떤 기술을 사용하나요? AJAX는 어떻게 작동하나요? AWS는 웹 애플리케이션 개발 요구 사항을 어떻게 지원하나요?

AJAX란 무엇인가요?

비동기 JavaScript 및 XML(AJAX)은 웹 애플리케이션이 사용자 상호 작용에 더 잘 반응하도록 하는 웹 애플리케이션 개발 기술의 조합입니다. 사용자가 단추나 체크 표시 상자를 클릭하는 등 웹 애플리케이션과 상호 작용할 때마다 브라우저는 원격 서버와 데이터를 교환합니다. 데이터 교환으로 인해 페이지가 다시 로드되어 사용자 경험이 중단될 수 있습니다. AJAX를 사용하면 웹 애플리케이션이 백그라운드에서 데이터를 보내고 받을 수 있으므로, 필요에 따라 페이지의 일부만 새로 고칠 수 있습니다.

AJAX 사용 사례는 어떤 것들이 있나요?

AJAX를 사용하여 웹 애플리케이션에서 다양한 기능을 만들 수 있습니다.

자동 완성

검색 엔진은 사용자가 검색 창에서 특정 키워드를 검색할 때 실시간으로 자동 완성 옵션을 제공합니다. AJAX를 사용하면 웹 페이지가 각 문자 입력을 웹 서버로 릴레이하고 기존 페이지의 관련 권장 사항 목록을 반환할 수 있습니다.

양식 검증

AJAX를 사용하면 웹 애플리케이션이 사용자가 양식을 제출하기 전에 양식의 특정 정보를 확인할 수 있습니다. 예를 들어 새 사용자가 계정을 만들면 웹 페이지는 사용자가 다음 섹션으로 이동하기 전에 사용자 이름을 사용할 수 있는지 자동으로 확인할 수 있습니다. 

채팅 기능

텍스트 메신저와 챗봇은 AJAX를 사용하여 브라우저에 실시간 대화를 표시합니다. AJAX는 사용자가 작성한 텍스트를 서버로 전송하고 다른 사용자의 채팅 인터페이스에 동시에 게시합니다.

소셜 미디어

소셜 미디어 플랫폼은 AJAX를 사용하여 브라우저에 새 페이지를 로드하지 않으면서 최신 콘텐츠로 사용자의 피드를 업데이트합니다. 예를 들어 Twitter는 내가 팔로우하는 누군가가 새 소식을 트윗할 때마다 피드를 즉시 새로 고칩니다. 

투표 및 등급 시스템

일부 포럼 및 소셜 북마킹 사이트는 AJAX를 사용하여 특정 게시물의 등급 또는 투표 결과를 실시간으로 표시합니다. 예를 들어 Reddit에서는 전체 페이지를 새로 고치지 않고도 게시물에 찬성 또는 반대 투표를 할 수 있습니다.

AJAX의 실제 예는 어떤 것들이 있나요?

아래에서 몇 가지 실제 AJAX 애플리케이션을 공유하겠습니다.

AJAX는 어떤 기술을 사용하나요?

AJAX는 웹 애플리케이션이 웹 서버와 비동기로 데이터를 교환할 수 있도록 하는 여러 웹 및 프로그래밍 기술로 구성되어 있습니다. 

XHTML, HTML 및 CSS

Extensible HyperText Markup Language(XHTML), HTML 및 Cascading Style Sheets(CSS)는 마크업 언어입니다. 이들 언어를 사용하여 웹 브라우저에 웹 페이지 콘텐츠의 디자인과 스타일에 대한 정보를 제공할 수 있습니다.

예를 들어 XHTML 또는 HTML을 사용하여 텍스트와 이미지를 웹 페이지에 배치할 수 있습니다. 그런 다음 CSS를 사용하여 글꼴 유형과 배경색을 변경할 수 있습니다. 

XML

XML은 여러 애플리케이션 간에 데이터를 교환할 수 있도록 하는 프로그래밍 언어입니다. 데이터는 다양한 애플리케이션에서 서로 다르게 표현되므로 XML을 사용하여 데이터를 일반 텍스트로 프레이밍할 수 있습니다. 그러면 AJAX 애플리케이션이 일반 XML 형식으로 데이터를 교환하고 처리할 수 있습니다.

XMLHttpRequest

XMLHttpRequest는 웹 브라우저가 웹 서버와 비동기로 통신할 수 있도록 하는 API입니다. XMLHttpRequest 객체를 사용하여 일부 웹 페이지 정보를 XML 형식으로 서버에 전송할 수 있습니다.

API에 대해 읽어보기 »

문서 객체 모델

문서 개체 모델(DOM)은 HTML 및 XML 페이지를 트리와 같은 구조로 구성합니다. DOM은 노드로 구성되며, 노드는 더 많은 하위 노드 또는 객체로 분기됩니다. DOM을 사용하여 특정 페이지의 코드에 보다 효율적으로 스타일을 지정하거나 코드를 수정할 수 있습니다. 

JavaScript 

JavaScript는 웹 페이지에 동적 콘텐츠를 제공하는 데 사용할 수 있는 스크립팅 언어입니다. 동적 콘텐츠는 실시간으로 업데이트되거나 사용자 상호 작용에 따라 달라지는 웹 페이지 정보를 말합니다. 예를 들어 AJAX에서는 JavaScript가 이 게시물에서 언급한 다른 웹 기술과 연동하여 비동기 페이지 업데이트를 지원합니다. 

AJAX는 어떻게 작동하나요?

AJAX는 JavaScript와 XML을 사용하여 브라우저와 서버가 데이터를 교환할 때 비동기 호출을 지원합니다. 다음으로, 기존에 브라우저가 데이터를 교환하는 방법을 설명하고 이를 AJAX를 사용한 데이터 교환 방식과 비교합니다.

AJAX를 사용하지 않는 데이터 교환

기존 모델에서는 사용자가 작업을 수행할 때 브라우저가 서버 측에 HTTP 요청을 보냅니다. 웹 서버는 요청을 수신하여 처리하고 업데이트된 데이터를 브라우저에 전송합니다. 그러면 브라우저가 새 데이터로 웹 페이지를 새로 고칩니다.

이 방식에서는 요청된 데이터가 사소한 변경 사항으로 구성된 경우에도 브라우저가 전체 페이지를 다시 로드합니다. 또한 브라우저는 웹 서버 소프트웨어를 로드하는 요청을 자주 보낼 수 있습니다. 

AJAX를 사용한 데이터 교환

AJAX는 전체 페이지를 업데이트하는 대신 JavaScript 함수를 사용하여 브라우저에 XMLHttpRequest 객체를 생성합니다. 그러면 XMLHttpRequest 객체가 XML 형식으로 페이지 정보를 컴파일합니다. 이 형식은 XMLHttpRequest 객체가 웹 서버로 보내는 데이터의 형식입니다. 웹 서버는 요청을 처리하고 요청된 데이터로 응답합니다. 마지막으로, 브라우저는 페이지를 새로 고치지 않고 현재 화면을 최신 데이터로 업데이트합니다. 

AJAX가 더 효율적인 이유는 무엇인가요?

데이터 교환 및 정보 흐름은 유사하지만 AJAX는 기존 웹 요청보다 더 효율적입니다. AJAX를 사용할 경우, 브라우저가 요청된 데이터에 따라 특정 웹 콘텐츠만 업데이트합니다. 즉, 페이지의 다른 콘텐츠를 불필요하게 새로 고치지 않습니다. 따라서 AJAX 애플리케이션은 기존 웹 애플리케이션보다 더 빠르고 응답성이 뛰어납니다. 

AWS는 웹 애플리케이션 개발 요구 사항을 어떻게 지원하나요?

Amazon Web Services(AWS)는 웹 애플리케이션 개발을 지원하는 몇 가지 기술을 제공합니다.

  • AWS Amplify는 웹 및 모바일 앱을 손쉽게 구축, 배포 및 확장할 수 있는 도구 모음을 제공합니다. AWS Amplify를 사용하여 크로스 플랫폼 애플리케이션을 만들고, 사용자 친화적인 앱 인터페이스를 구축하며, 안전한 AWS 콘텐츠 전송 네트워크에서 웹 애플리케이션을 호스팅할 수 있습니다.
  • AWS API Gateway는 대규모로 API를 생성, 배포 및 관리할 수 있는 완전 관리형 서비스입니다. 안전하고 유연하며 사용자에게 영향을 미치지 않는 환경에서 수백 개의 동시 API 호출을 처리합니다. AWS API Gateway를 사용하여 웹 애플리케이션을 위한 RESTful 및 HTTP API를 생성할 수 있습니다.
  • AWS Lambda는 인프라를 프로비저닝하지 않고도 코드를 실행할 수 있는 서버리스 서비스입니다. 필요에 따라 앱의 컴퓨팅 리소스를 확장할 수 있으며, 사용한 리소스에 대해서만 비용을 지불하면 됩니다. 

Amazon API Gateway를 사용하여 Lambda 함수를 RESTful API로 제공할 수 있습니다. 그런 다음 제공된 API에 AJAX 호출을 수행하는 클라이언트 측 JavaScript를 추가하여, 동적 웹 애플리케이션을 만들 수 있습니다. AWS Amplify, AWS Lambda 및 AWS API Gateway를 사용하여 서버리스 애플리케이션을 구축하는 방법을 알아보십시오. 

지금 계정을 생성하여 AWS에서 AJAX를 시작하십시오.