📋 AJAX & JSON

🧑🏼‍🚀 알아야 하는 이유

❗사용자의 반응에 따라 보여주는 화면을 더 좋은 사용자 경험으로 만들고 싶다면 ❗페이지의 일부만 효율적으로 변경하고 싶다면

🙋🏻‍♂️ 이 문서를 보고 나면

• 비동기 통신을 통해 데이터를 가져온 후 웹페이지에 적용하는 방법을 알 수 있다.
• 비동기 통신이 이루어지는 순서와 기본 개념을 이해할 수 있다.
• 비동기 통신으로 받은 JSON 데이터를 자바스크립트에서 사용할 수 있는 데이터로 변환해 접근하는 방법을 알 수 있다.

AJAX(Asynchronous JavaScript and XML)

AJAX 또는 XMLHttpRequest 는 비동기 방식으로 데이터를 주고받기 위해 개발된 자바스크립트 기술입니다. 초기에는 XML/XLST 포맷 형태의 데이터를 주고받다가 최근에는 JSON 형태의 데이터를 주고받는 웹 비동기 기술로 정착되고 있습니다. AJAX는 HTML, XML, JSON 등 다양한 데이터를 주고받을 수 있습니다. AJAX를 위해서 자바스크립트는 XMLHttpRequest 객체를 사용합니다. XMLHttpRequest 객체는 자바스크립트의 내장 객체로 비동기 통신 구현을 위한 객체이며, 이 객체는 서버로 요청을 보내고 요청받은 결과를 비동기로 처리합니다. (비동기에 대한 내용은 다음 Promise 페이지에서 자세히 다룹니다.) 따라서 요청을 보낸 후 사용자는 UI 화면과 상호작용을 하거나 다른 AJAX 요청을 추가로 보낼 수 있습니다. 서버에서 응답이 오면 AJAX 요청을 보낼 때 등록한 콜백 함수를 통해 결과 데이터를 처리하게 됩니다. AJAX를 요청하는 자세한 과정은 링크 (opens new window)에서 확인할 수 있습니다.

JSON(JavaScript Object Notation)

AJAX로 받아오는 대부분의 데이터는 JSON 포맷입니다. 비동기로 받은 데이터가 HTML이면 웹페이지에 바로 붙여넣을 수 있지만, JSON 데이터면 동적으로 HTML 태그들을 생성해 넣어야 합니다. 전통적인 웹페이지와 다르게 동적 웹페이지를 생성하는 데 있어 JSON을 사용해야 하는 이유는 JSON으로 전송하는 데이터의 양이 HTML보다 훨씬 적기 때문에 느린 인터넷 환경, 특히 모바일 환경에서 더 빠른 페이지 로딩과 페이지 갱신을 보장할 수 있기 때문입니다.

또한, HTML 데이터를 받아 웹페이지에 붙이는 과정이 적은 자바스크립트 코드만으로 구현이 가능하지만, 내부 과정은 결국 HTML 데이터를 파싱해 DOM 노드를 생성해 붙이는 과정을 거치기 때문에 JSON 데이터를 사용해 동적으로 HTML 페이지를 갱신하는 과정과 차이가 없습니다.

AJAX로 받아올 수 있는 데이터 포맷에 제약이 있는 것은 아니지만, 웹에서 오고 가는 데이터의 대부분이 JSON으로 표현이 가능하기 때문에 사실상 표준으로 정착해 있습니다. AJAX 응답으로 받은 JSON 데이터는 단순 문자열이기 때문에 그냥 사용할 수는 없고 데이터 변환을 해야 합니다. 응답을 받은 XMLHttpRequest 객체에는 responseText속성이 있고, 이 속성에 응답으로 받은 JSON 텍스트 데이터가 있습니다. 이 데이터를 JSON 객체로 변환해야 합니다.

자바스크립트에는 전역 객체로 JSON 객체가 있으며, JSON 문자열을 객체로 변환해주는 메서드가 제공됩니다.

const json = JSON.parse(xhr.responseText)

json변수는 JSON 객체 참조를 나타내고, 속성을 통해 JSON 값에 접근할 수 있습니다.

💁🏻‍♂️Tip

JSON 기능을 개발할 때는 데모, 또는 테스트용으로 JSON 데이터를 출력하는 개발용 원격 서버, 또는 로컬 서버가 필요한데, 여건상 이런 준비가 어려운 경우 사용할 수 있는 JSON Rest API 서비스를 제공하는 사이트가 있습니다.

https://jsonplaceholder.typicode.com/ (opens new window)

가상의 블로그 서비스 데이터를 Rest API로 제공하는 JSON 서버 서비스를 무료로 제공하므로 초기 학습 환경에서 작성한 AJAX 기능, 또는 JSON 데이터 수신 및 가공 기능을 테스트하는데 유용하게 사용할 수 있습니다.

📘 정리

• AJAX는 (페이지의 전체가 아니라) 일부만을 수정하는 것을 가능하게 해주는 기술의 총칭이다.
• HTML, XML, JSON 데이터를 페이지에 삽입할 수 있다. (JSON이 점차 대중화되어 가고 있다)

🔗 참고 링크

• MDN_AJAX (opens new window)
• MDN_JSON (opens new window)