[10분 테코톡] 레고의 Ajax 정리

Ajax란?(Asynchronous Javascript and XML)

- 자바스크립트를 사용해서 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
- HTML, CSS, JS, DOM, XML, XMLHttpRequest를 이용하여서 "새로운(2005년 기준) 접근법이자 싱글 스레드인 자바스크립트 엔진을 보완하기 위한 비동기 통신 방식

여기서 새롭다고 한 이유는 Ajax 적용 이전의 웹페이지 동작 방식을 보면 알 수 있다,

클라이언트가 최초 요청을 하고 응답을 서버에서 주고 html, css, js를 클라이언트에게 보낸다. 그리고 클라이언트는 그것을 사용해서 뭔가를 하다가 이벤트를 발생시키고 서버에게 요청을 하면 서버는 html, css, js를 또 새로 보내주게 된다. 옛날에는 이렇게 동작해서 'html 태그로 시작해서 html 태그로 끝나는, 완전한 html을 서버로부터 받고 웹 페이지 전체를 처음부터 다시 렌더링하는 방식'으로 동작을 했다. 그래서 이것의 특징은 아래와 같다.

 

Ajax 적용 이전의 웹페이지
1. 이전 페이지와 비교하여 변경할 필요가 없는 부분까지 포함한 HTML을 매번 다시 받기 때문에 불필요한 데이터 통신이 발생

2. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링하여, 화면 전환이 일어날 때 화면이 순간적으로 깜빡이는 현상이 발생
3. 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹됨

 

 

Ajax의 적용
- 브라우저에서 제공하는 Web API인 XMLHttpRequest(XHR) 객체를 기반으로 동작

- XHR은 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공

 

XMLHttpRequest(XHR) 란?

- XHR 객체는 서버와 상호작용할 때 사용
- XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있음
- 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트 할 수 있음
- XML 이외의 다른 종류의 데이터도 요청할 수 있음

 

다시 돌아와서 Ajax의 적용 이후에 웹페이지 동작 방식을 보면 위에서와 같이 최초 요청은 동일하다. 하지만 Ajax Request 부분이 다르다. 클라이언트가 이벤트를 발생시켜서 Ajax Request를 서버에게 보낸다. 그럼 서버는 응답으로 json 파일 단 하나만을 보내서 DOM 조작을 하게 된다.

 

 

이 부분을 보면 json 파일을 보냈다. XMLHttpRequest를 했는데 XML이 오지 않고 JSON이 왜 왔을까?
AJAX는 Asynchronous JavaScript and XML의 준말인데, 마찬가지로 XMLHttpRequest도 XML이 들어가 있다. 왜 JSON을 주로 사용할까?

 

이것이 XML 파일로 변환한 영화에 관련된 데이터인데 열린 태그와 닫힌 태그로 모든 걸 닫아줘야 하고 배열조차 표현할 수 없다.

 

 

비교가 쉽도록 동일한 데이터를 JSON 파일로 보면 위와 같다. 확실히 가독성이 좋아졌다.

 

 

가독성 뿐만이 아니라 파싱 속도 또한 JSON이 상대적으로 빠르다. 데이터의 크기도 동일한 데이터일 때 상대적으로 더 작다.

 

 

Ajax 적용 이후의 웹페이지

1. 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 받기 때문에 불필요한 데이터 통신이 발생하지 않음
2. 변경할 필요가 없는 부분은 다시 렌더링하지 않아서 화면이 깜박이지 않음
3. 클라이언트-서버 간 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 뒤 블로킹이 발생하지 않음

 

 

동기/비동기

- 동기/비동기는 요청을 보낸 뒤 그에 대한 응답을 기다리는지 여부로 구분

 

동기 : 요청 후 응답을 받아야만 다음 동작을 실행

비동기 : 요청 후 응답을 받지 않아도 다음 동작을 실행

 

 

블록킹/논블록킹

- 제어권이 어느 함수에게 있는지
- 처리되어야 하는 작업 하나가 전체적인 흐름을 막는지(block)로 구분

 

 

블로킹

*제어권 : 함수릐 코드를 실행할 권리 개념

 

A 함수가 제어권을 가지고 있는데 B 함수를 호출한다.

 

 

B 함수가 호출을 받으면 A 함수는 제어권을 B 함수에게 넘기게 되고 제어권을 뺏긴 A 함수는 실행을 중단하게 된다. B 함수는 제어권을 가졌기 때문에 실행을 하고

 

 

B 함수가 완료가 되면 다시 A 함수에게 제어권을 넘겨서 A 함수를 다시 진행하는 방식이다.

 

논블로킹

 

 

제어권을 가진 A 함수가 B 함수를 호출을 하여도 B함수도 실행이 되고 A 함수도 계속 실행을 하는 형태의 동작 방식이다.

 

 

동기-블로킹

- 동기-블로킹 : Ajax 이전의 웹 동작 방식

- 호출한 A함수가 호출된 B함수의 응답을 기다리며(동기) 실행을 중단하고 있는 것(블로킹)

<예시>
<form>태그의 제출 버튼을 클릭하면 submit 이벤트에 대한 응답으로 서버에서 새로운 페이지를 전송하기 때문에 새로고침이 발생

 

 

비동기-논블로킹

- 비동기-논블로킹 : Ajax의 웹 동작 방식

- 호출한 A함수가 호출된 B함수의 응답을 기다리지 않고(비동기) A함수는 그대로 실행하는 것(논블로킹)

<예시>
무한 스크롤(infinite scroll) 기능
사용자의 입력에 따라 실시간으로 검색 결과를 보여주는 검색 기능

 

그럼 우리는 어떻게 AJAX를 사용할까요?

 

 

ES6 이전의 비동기 통신 방법(XMLHttpRequest의 API)

최초의 XMLHttpRequest (XHR) 객체를 생성하고 XHR의 open 메소드를 사용해서 http 요청에 필요한 정보를 설정한다. 그리고 send 메소드를 사용해서 http 요청을 보낸다. 성공을 하면 xhr의 onload 함수가 실행이 되고 실패하면 onError 함수가 실행이 된다.

 

ES6 이전의 비동기 통신 방법(jQuery.ajax)

 

HTTP 요청에 필요한 정보를 설정해 주고 성공하게 되면 success 함수가 실행된다. 마찬가지로 실패했을 때 error 함수가 실행이 된다.

 

 

ES6 이후 비동기 통신 방법

1. Fetch API

- Promise(ES6)와 함께 등장

- Promise를 이용한 브라우저 내장 함수인 Fetch API

- 기존의 XHR API를 사용하는 것보다 손쉽게 비동기 통신 가능

- 구버전의 브라우저에서 동작하지 않음

 

 

ES6에 Promise라는 객체가 등장을 하게 되었다. 그러면서 Promise를 이용한 브라우저 내장함수인 fetch API도 같이 등장을 했다. fetch API는 XHR API를 사용하는 것보다 손쉽게 비동기 통신이 가능해졌는데 이는 구 버전의 브라우저에서 동작을 하지 않는다는 단점을 가지고 있다.

 

 

fetch API는 HTTP 요청을 보내고 then에서 응답을 받는다. 그리고 성공하면 함수를 실행할 것이다. 실패하면 response.ok 메소드를 통과하지 못하면 에러를 throw 하여서 catch에서 콜백 함수를 실행해 준다.

 

 

ES6 이후 비동기 통신 방법

2. Axios

- 비동기 통신 라이브러리

- XHR / Promise를 활용하여 비동기 통신

- 구버전의 브라우저와도 호환됨

- XSRF(교차 사이트 요청 위조) 보안 기능 O

- JSON 데이터 자동 변환

- import하여 사용

두 번째로는 XHR과 Promise를 활용하는 비동기 통신 라이브러리 Axios가 있다. 이 Axios의 장점으로는 구 버전의 브라우저와도 호환이 되고 XSRF 교차 사이트 요청 위조 공격에 대한 보안 기능을 가지고 있다. JSON 데이터를 자동으로 변환하는 기능 또한 갖고 있는데 import하여서 사용해야 된다는 점이 번거롭다는 단점 정도를 가지고 있다.

 

axios는 마찬가지로 import하여서 사용하고 get 메소드를 이용해서 HTTP 요청을 보내고 성공하였을 때 then으로 콜백함수를 실행시켜 준다. 에러가 발생하였을 때는 마찬가지로 catch 안에 있는 콜백함수를 실행한다.

 

 

결론

- Ajax는 특정한 함수도, 라이브러리도, 프레임워크도 아니다. 접근 법이며 비동기 통신 방식이다.

- 우리는 Ajax의 적용으로 Ajax 이전의 웹 사용자보다 좋은 사용 자 경험을 하고 있으며 동시에 좋은 사용자 경험을 만들어 낼 수 있다.

---

참고

https://www.youtube.com/watch?v=ZFlnrGgdekI&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC