Ajax

Halam Lee

Published in

모던 애자일

7 min readMar 1, 2022

만약 인스타그램에서 댓글을 작성할 때마다 새로고침이 된다면 어떻게 될까?

더 나아가서 좋아요를 누를 때마다 페이지가 새로고침이 된다면 어떻게 될까?

사용자 입장에서 매우 불편해질 것이다. 기업 및 서비스는 사용자가 불편함을 느끼지 않게 해야 하기 때문에 현재 사용하고 있는 서비스들을 살펴보면 앞선 상황들에서 새로고침이 되지 않는다.

그렇다면 어떻게 이게 가능할까?

그 이유는 Ajax를 사용했기 때문이다. 이번 글을 통해 Ajax에 대해서 알아보자.

Ajax

Asynchronous Javascript And XML 의 약자로 JS를 이용해서 클라이언트와 서버 간에 비동기적으로 데이터를 주고받는 통신 방식이다.
브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다.
XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다.

XML ?

html보다 강력하고 확장 가능한 마크업 언어. 최초에 데이터를 주고받을 때 사용했던 데이터 포맷이었지만 JSON 포맷이 표준화가 되면서 현재는 JSON 데이터를 주고 받는다.

JSON ?

JavaScript Object Notation
클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷
자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷으로 대부분의 프로그래밍 언어에서 사용 가능하다.
자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트
키는 반드시 큰 따옴표로 묶어야 함.
값은 객체 리터럴과 같은 표기법 사용 가능
하지만 문자열은 반드시 큰 따옴표로 묶어야 함.
JSON 데이터는 자바스크립트를 이용하여 데이터를 자바스크립트 객체로, 자바스크립트 객체는 JSON 데이터로 쉽게 변환할 수 있다.
자바스크립트 객체에 저장된 데이터를 서버로 전송하기 위해서는 객체를 JSON 형식의 문자열로 변경해야 한다. ⇒ 직렬화
직렬화는 JSON 내장 객체의 stringify() 메서드 이용
서버로부터 JSON 데이터가 전송되면 이 데이터는 문자열이다. 이 문자열을 자바스크립트 객체로 변환해야 하는데 이를 객체의 역직렬화라고 한다. 다른 말로 문자열을 파싱한다고 한다.
역직렬화는 JSON 내장 객체의 parse() 메서드 이용
JSON.stringify() : JavaScript Object → JSON 데이터 ⇒ 직렬화
JSON.parse() : JSON 데이터 → JavaScript Object ⇒ 역직렬화

예전의 웹페이지

html 태그로 시작해서 html 태그로 끝나는 완전한 html을 서버로부터 전송 받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작
화면이 전환되면 서버로부터 새로운 html을 전송받아 전체를 처음부터 다시 렌더링
이때 화면이 전환되기 전과 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 html을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생
처음부터 다시 렌더링하기 때문에 화면전환이 일어나면서 순간적으로 깜박이는 현상이 발생

Ajax를 사용한 웹페이지

서버로부터 웹페이지의 변경에 필요한 데이터만 전송 받아, 변경할 필요가 있는 부분만 한정적으로 렌더링
브라우저에서도 빠른 퍼포먼스와 부드러운 화면 전환이 가능
변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않음
변경할 필요가 없는 부분은 다시 렌더링되지 않기 때문에 화면이 순간적으로 깜박이는 현상이 발생하지 않음

Ajax의 특징

요청/응답 과정을 통해 불필요한 부분까지 처리하지 않는다.

⇒ 쉽게 말해 필요한 부분만 별도로 요청하고, 응답 받아 처리

모든 데이터를 업데이트할 필요가 없으니, 불필요한 대역폭 감소가 가능하고 비용 절감을 가져온다.
페이지를 새로고침하지 않고도 필요한 데이터만 받아와서 내용을 업데이트 시킬 수 있기 때문에 사용자가 대기하는 시간을 줄일 수 있다.
이것이 가능한 이유는 기존의 동기 방식이 아닌, 비동기 방식으로 데이터를 요청/처리하기 때문이다.

Ajax 사용 방법

예전에는 XMLHttpRequest 를 통해 XHR 객체를 이용해 Ajax를 사용했으나 그 방법은 복잡하기도 하고 가독성이 떨어져서 Fetch API 가 ES6에 등장했다.

Fetch API를 통해 Ajax를 사용해보자. Fetch API의 기본 사용방법은 다음 사진과 같다.

JSONPlaceholder 에서 더미데이터를 사용해 원하는 데이터를 출력해보자. 다음과 같은 JSON 데이터가 있다.

GET

Fetch API의 기본 사용방법에 맞게 url을 넣고, GET 방식이기 때문에 추가 옵션을 주지는 않았다.

status: 200을 통해 성공한 것을 볼 수 있고, 응답결과만 출력했기 때문에 데이터를 출력하지는 않았다.

.then((data) ⇒ console.log(data)); 코드를 추가해 데이터를 가져와 출력하도록 했다.

POST

POST는 Create Read Update Delete 에서 Create를 맡고 있다. 즉, 데이터를 생성할 때 사용하는 HTTP 메소드이다. 앞서 살펴봤던 GET 방식과 다르게 옵션을 실어서 보내야 한다.

옵션에는 어떤 메소드인지, Content-Type은 어떤 건지 등 API 명세에서 요구한 데이터 형식에 맞게 보내야 한다.

PUT

PUT은 CRUD에서 U ⇒ Update를 할 때 사용하는 메소드이다. POST와 사용방식은 같다. POST에서는 url이 /posts 까지만 있었다면(그곳에 데이터를 생성하기 위해) PUT은 하나의 데이터를 콕 찝어서 수정을 한다. 그렇기 때문에 위 사진에서 url 부분에 /posts/1이 있는 것이다. POST와 결과가 같아 보이지만 POST에서는 데이터를 생성한 것이고, PUT은 1번 데이터를 수정한 것이다.