AJAX, JSON, XML이 뭘까?

AJAX

정의

Asynchronous Javascript And XML의 약자로, 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능을 의미한다. AJAX가 가진 장점은 페이지 전체를 새로고침 하지 않아도 된다는 "비동기성"에 있다. 기존에는 화면이 전환될 때 마다, 서버로부터 매번 새로운 HTML을 받아오고 렌더링했었는데, AJAX를 통해 웹 페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터를 전송받아 변경해야하는 부분만 한정적으로 렌더링하는 방식으로 발전했다.

 

사용법

1. XMLHttpRequest

XMLHttpRequest 객체를 사용하여 인스턴스를 만들어 인스턴스의 open() , send() 등의 메소드를 이용한다.

 

2. fetch

IE를 지원하지 않는다는 점을 제외하면 XMLHttpReqeust 보다 훨씬 직관적이다. ES6(ES2015) 에서 표준이 되었고, Promise를 리턴한다.

응답객체는 json() , blob() 과 같은 내장 메서드로 body를 추출해내면 되고 이는 다시 Promise를 리턴함에 유의하자.

 

3. axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

 

 

장점

• 페이지를 새로고침하지 않아도, 빠르게 화면 일부분을 업데이트 할 수 있다.
• 수신하는 데이터 양을 줄일 수 있고 클라이언트에게 처리를 맡길 수 있다.
• 서버 처리를 기다리지 않고 비동기 요청이 가능하다.

단점

• 지원하지 않는 브라우저가 있다.
• 페이지 전환없이 서버와 통신을 하기 때문에 보안상에 문제가 있을 수 있다.
• 무분별하게 사용하면 역으로 서버의 부하가 늘어날 수 있다.
• 동일 출처 정책 문제가 발생할 수 있다.

 

---

JSON

• JavaScript Object Notation의 약자로, Javascript의 객체(Object) 문법으로 구조화된 데이터를 표현하기 위한 텍스트 기반의 표준 포맷(형식)이다.
• 장점 : 가볍고, 간단하다.
• 단점 : 문법 오류에 취약함
• 활용도 : 서버와 데이터를 주고 받을 때

---

XML

• 데이터를 저장하고 전달할 목적으로만 만들어진 마크업 언어로, HTML과 비슷하게 생겼지만 자신이 직접 태그를 지정할 수 있다.
• 장점 : 문법오류가 나도 괜찮다. 주석이 가능하다. 스키마를 통해 검증을 할 수 있다.
• 단점 : 문법 오류에 취약함
• 활용도 : 안정성이 요구되는 작업에 활용된다.
• (ex : 웹 서비스의 설정 파일, 모바일앱의 UI 작성할 때 (안드로이드 레이아웃 파일이 XML임!))

---

YAML

• JSON에서 직관적으로 정보를 표현하도록 발전함.
• 장점 : 주석 가능, 상속 가능, 편의를 우선시함

---

요약

AJAX

• Asynchronous Javascript And XML의 약자
• 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
• 페이지 전체를 새로고침 하지 않아도 된다는 "비동기성"
• 기존에는 매번 새로운 HTML을 다 받아야됐다.
• 서버로부터 필요한 데이터만 전송받아 변경해야하는 부분만 한정적으로 렌더링

JSON, XML, YAML

• 데이터를 표현하기 위한 텍스트 기반의 표준 포맷
• JSON : 간단해서 주로 데이터를 주고 받을 때 사용함
• XML : 태그로 되어있어서 복잡하지만, 안정성이 높음. 따라서 웹 서비스 설정파일에 사용함.

---

Reference

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/ajax.md

GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

자바스크립트 Deep Dive

https://poiemaweb.com/coding

Progmamming | PoiemaWeb