Ajax, SPA

Ajax(Asynchronous Javascript And Xml)

Ajax는 JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자

 

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

 

비동기 방식은 웹페이지를 리로드 하지 않고 데이터를 불러오는 방식

이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야 하는데 이미지, 스크립트 , 기타 코드 등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있다.

 

기본적으로 HTTP 프로토콜은프로토콜은 클라이언트 쪽에서를 보내고 Server 쪽에서쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하면서 페이지 전체를 갱신하게 되는 것이다. 하지만 이렇게 할 경우 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야 하는데 엄청난 자원낭비와 시간낭비를 초래한다.

 

하지만 ajax는 html 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XML HttpRequest객체를 통해 서버에 request를 합니다. 이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

 

장점

1. 웹페이지 속도 향상
2. 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
3. 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어듦

단점

1. 히스토리 관리가 안됨(보안에 좀 더 신경을 써야 함)
2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
3. 사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생할 수 있다.

 

SPA(Single Page Application)

서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. SPA는 현재 웹 개발의 트렌드이다.

 

기존 웹 서비스는 요청 시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링 하는 방식이다. 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송해주었다. 그러나 현대에 이르러 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었다.

 

반면 SPA형태는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다. 뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어난다. 페이지 변경이 일어난다고 보이는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.

 

SPA 프레임워크로 유명한 Angular, React, Vue들은 세부적인 구현 개념은 다르겠지만 그 목적은 모두 SPA를 쉽고 확장성 있게 구현하는 것을 목표로 하고 있다.