AJAX ⚙️

앙두·2023년 3월 27일
0

for My Programming

목록 보기
8/20

🧚🏻‍♀️ AJAX 등장 배경

AJAX가 등장하기 전에는,
웹 브라우저가 데이터를 요청하면 서버에 해당 정보를 “통째”로 보내주었었습니다.
작은 영역의 일부 데이터만 변경되었을지라도, 서버는 변경된 데이터가 포함된 전체 정보를 다시 보내주었고, 브라우저는 당연히 그 통째의 데이터를 받아 웹페이지를 재로딩하였습니다.

이러한 방식은 “동기”적인 통신이였으므로, 우리는 “비동기”적인 정보를 요청하는 새로운 기술이 필요했습니다.


잠깐!🖐🏻 동기 / 비동기란 무엇일까?

동기 : 요청 후 응답이 올 때까지 기다렸다가, 응답이 오면 다음 동작 수행
→ 요청을 보내고, 해당 요청에 대한 응답이 올때까지 기다린다.
시간이 얼마나 걸리던, 응답처리가 되지 않았다면 다른 작업을 시작하지 않는다.

비동기 : 요청 후 응답상태와 상관없이 다음 동작 수행
→ 요청을 보내고, 응답을 기다리지 않고 다음 작업을 하는 방식.
요청과 응답 시점이 동일하지 않음.
여러가지 일이 동시적으로 발생한다!


🥳 AJAX

(Asynchronous Javsscript And XML) 의 약자로, 말 그대로 자바스크립트와 XML을 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식 및 기법

이 개념이 소개될 때, 주로 XML을 통해 서버와 클라이언트가 통신했기 때문에 이러한 이름을 갖게 되었습니다.
서버는 XML, HTML, JSON 형식으로 브라우저에 응답해주는데,
현재는 XML과 HTML은 복잡하고 무겁다는 의견으로 JSON 형식을 사용하는 것이 일반화 돼있습니다.


📌 AJAX의 Point

원래는 서버로부터 응답 데이터를 받게 되면, 화면 전체를 갱신해야 합니다.
그러나 AJAX 방식으로 통신하게 되면 전체 렌더링할 필요가 없이,
갱신이 필요한 일부분만 로드
할 수 있게 됩니다.
그러므로, 빠른 퍼포먼스와 부드러운 렌더링을 기대할 수 있게 됩니다.

특정부분만 데이터를 가져와서 변경할 수 있다면,
서버는 서버대로 데이터를 필요한 양만큼만 보내서 좋고,
클라이언트는 클라이언트대로 적은 데이터를 렌더링하므로 부하가 적게 걸리니 좋습니다.
😊👍🏻


⚙️ AJAX의 동작 원리

  1. 사용자에 의한 요청 이벤트 발생

  2. 이벤트 요청이 발생하면, 이벤트 핸들러(함수같은 것들)에 의해 자바스크립트 호출 및 실행

  3. XMLHttpRequest(ajax 기능 보유) 객체 생성 및 요청 (Request)

  4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 AJAX 요청 처리

  5. 처리한 결과를 HTML or XML or JSON 데이터로 생성하여 웹 브라우저에 응답.

이 때, 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만 전달 (AJAX 기술)

  1. 자바스크립트로 HTML 및 CSS 데이터로 변환하여 웹페이지의 일부분만을 갱신함

  2. 웹페이지 일부분만 다시 로딩되어 부드럽게 표시됨


😎 AJAX의 기법 종류 3가지

1️⃣ XHR

(XMLHttpRequest)의 약자로,
“XML 형식과 HTTP 프로토콜을 이용하여 서버와 통신한다”는 의미를 가지고 있습니다.

( HTTP ? Hyper Text Transfer Protocol 인터넷에서 서버와 클라이언트가 데이터를 주고받을 수 있는 통신 규약 및 규칙약속 )

1999년 마이크로소프트 개발.
자바스크립트의 내장 객체 중 하나, 서버와 비동기적으로 데이터를 주고 받을 수 있는 기능을 제공합니다.

즉, 전체 페이지를 다시 로드하지 않고도 웹 페이지 일부 업데이트가 가능한 API 입니다.
XHR은 HTTP 요청 전송과 응답 수신을 위한 메서드와 프로퍼티 제공하고 있습니다

➕ XMLHttpRequest(XHR)의 대표적인 메소드

  • send() : 서버에 요청 보내기
  • abort() : 현재 요청을 취소
  • open() : 요청을 구체화 / (ex) open(method, url, async, user, psw)
  • method : 요청 유형 (GET 또는 POST)
  • url : 파일 위치
  • async : true (비동기) 또는 false (동기) / default 는 비동기
  • user (optional) : 사용자 이름
  • psw (optional) : 암호

✨ 예시코드

// XMLHttpRequest 객체 생성 구문(IE7 이상 지원)
const xhr = new XMLHttpRequest()

// GET 방식으로 url에 데이터 요청
xhr.open(GET, ‘https://example.com/data’)

// onreadystatechange 이벤트를 이용한 이벤트 핸들러 함수 설정
xhr.onreadystatechange = function (e) {
	const { target } = event;

	if (target.readyState === XMLHttpRequest.DONE) {
		const { status } = target;

		if (status === 200) { 
			console.log('요청이 정상적으로 처리됐습니다.')	
	  } else {
			console.log('에러가 발생했습니다.')
		}
	}
}

xhr.send() // 요청 전송
xhr.abort() // 전송된 요청 취소

🤥 단점

  • 콜백지옥이 생길 수도 있음

2️⃣ jQuery Ajax

XHR의 불편함과 브라우저 호환성을 이유로, 보완이 필요
jQuery 내에서 Ajax를 편리하게 사용할 수 있는 개발 환경이 정립됨
(Ajax 프레임워크 -> 이로 인해 제이쿼리가 급부상)
브라우저에 구애받지 않고 동일한 코드로 같은 작업 구현 가능
XHR 코드보다 훨씬 간단하고 직관적

✨ 예시코드

$.ajax({
	url: "/examples/data", // 요청을 보낼 서버 주소
	data: { name: '오앙두' }, // 서버로 보낼 데이터
	type: "GET", // 요청 방식 (HTTP)
	dataType: "json", // 서버에서 보내줄 데이터 타입
	success: function good (data) { // 성공 시
		console.log(data) 
	},
	error: function bad (error) { // 실패 시
		console.error(error)
	}
})

🤥 단점

  • jQuery 를 따로 설치해야 함
  • 콜백지옥이 생길 수도 있음

3️⃣ Axios

Node.js와 브라우저를 위한 Promise API를 활용하는 비동기 HTTP 통신 라이브러리
서버에서는 네이티브 Node.js http모듈 사용
클라이언트에서는 XMLHttpRequest 사용
자동으로 JSON 형식으로 변환
크로스 브라우징 기반으로 브라우저 호환성이 좋음
요청 취소 및 타임아웃(일정시간이 지나면 에러를 띄움) 설정이 가능
해킹을 보호해줌

➕ Promise(프로미스) : 콜백 함수의 단점(콜백지옥)을 보완하여, 비동기 처리에 사용되는 객체, 비동기 작업의 최종 완료 또는 실패를 나타낸다.
then()을 여러번 사용하여 여러개의 콜백을 추가할 수 있다 → 주어진 순서대로 하나하나 실행
- 비동기 처리 시점을 명확히 표현 가능
- 연속된 비동기 처리 작업을 수정하기 유연
- 유지보수성 향상

✨ 예시코드
axios.post({ // 설정옵션1 : 요청 방식
	url: 'https://test/api/data' // 요청할 서버 주소
	// method: 'POST' // 설정옵션2 : 요청 방식
	timeout: 5000, // 통신 제한 시간(타임아웃)
	data: { name: '오앙두', age: '29' } // 요청할 데이터
})
.then(response => console.log(response.data))
// then으로 성공 시, 서버가 제공한 응답데이터를 받는다
.catch(error => console.log(error)
// catch로 실패 시, 에러를 잡아준다

🤥 단점

  • 모듈/라이브러리 설치 필요(npm install axios)

4️⃣ Fetch API (Fetch())

자바스크립트(ES6) 내장 라이브러리로 따로 설치 불필요 (잦은 업데이트에도 잘 적용)
Promise 기반으로 동작
Axios에 비해 상대적으로 기능이 적음
ES6부터 들어온 자바스크립트의 내장 라이브러리. axios에 비해 상대적으로 기능이 부족
해킹 별도 보호 없음

자바스크립트가 네트워크 요청을위해 fetch()라는 메서드를 제공

✨ 예시코드

fetch('/example/data', {
	method: 'POST',
	headers: {
		"Content-Type": "application/json";charset=UTP-8,
	},
	body: JSON.stringify({
		name: '오앙두',
		age: '29'
	})
})
.then(response => console.log(response))
.catch(err => console.error('error')

🤥 단점

  • 구형 브라우저 지원 안함(호환을 위해서는 polyfill 사용)
  • API 요청 취소 불가
  • 데이터 변환이 필요 (JSON.stringify, JSON.parse)
  • 백엔드 오류 시에도, then으로 받아(status code) 성공과 실패가 섞여있게 됨(수동적으로 코드를 작성 요)

🪘 AJAX의 장단점

🙂 장점

  • 웹페이지의 속도향상
    웹 전체를 갱신하지 않고 필요한 데이터만 요청하고 응답받는 비동기 방식이기 때문에, 속도가 빠릅니다.

😞 단점

  • 페이지 이동없는 통신으로 인한 보안상의 이슈
  • 연속으로 데이터 요청 시, 부하 가능성 증가


🙇🏼‍♀️ Reference

TCP : http://www.tcpschool.com/ajax/ajax_intro_works

우테톡 : https://www.youtube.com/watch?v=avfIUwDG2d8

XHR 관련 블로그 : https://homzzang.com/b/js-80

AJAX 관련 블로그
https://velog.io/@ehhdrud/JavaScript-AJAX-이해하기
https://ghost4551.tistory.com/139
https://basemenks.tistory.com/256
https://kangaroo-dev.tistory.com/8
https://sdy-study.tistory.com/38

profile
쓸모있는 기술자

0개의 댓글