[JS] API 동기/비동기 통신 방법과 종류 이해하기 -1

해당 글에서는 Javascript 환경에서 클라이언트에서 API로 통신하는 다양한 방법에 대해 알아봅니다.

 

 

 

1) 동기 통신

---

💡 동기(Synchronous) 처리 방식이란?

- 데이터 통신을 위해 ‘요청'을 하였을 때, 어떠한 요청에 대한 ‘응답'을 받을 때까지 기다리다가 완료된 뒤 다음 코드가 수행되는 처리방식을 의미합니다.

 

[ 더 알아보기 ]

💡 브라우저에서는 동기 통신을 하면 안 되는 것일까?

- 브라우저에서 동기 통신을 하는 것은 권장되지 않습니다. 동기 통신은 브라우저의 실행을 일시 중지시키고 사용자 인터페이스를 블로킹하는 문제를 야기할 수 있습니다. 따라서, 비동기적인 방법을 사용하여 서버와 통신하는 것이 좋습니다.

 

 

 

2) 비동기 통신

---

💡 비동기(Asynchrous) 처리 방식이란?

- 데이터 통신을 위해 ‘요청’을 하였을 때, 어떠한 요청에 대한 ‘응답'을 기다리지 않고 다음 코드가 수행되는 처리방식을 의미한다.

 

 

 

1. 요약

---

💡 XMLHttpRequest(XHR) → Ajax → 콜백함수 → Promise → Fetch API → async/await 순으로 출시가 되었습니다.

분류	XMLHttpRequest(XHR)	AJAX	콜백함수	Promise	Fetch	async/await
사용성	낮음	높음	낮음	높음	높음	매우 높음
프로미스 지원	아니오	아니오	아니오	ES6(ECMA2015)부터 지원	ES6(ECMA2015)부터 지원	ES8(ECMA2017)부터 지원
성공 핸들링	콜백 함수로 구현	콜백 함수로 구현	콜백 함수로 구현	.then() 메서드	.then() 메서드	try…catch 블록 내에서 사용
에러 핸들링	콜백 함수로 구현	콜백 함수로 구현	콜백 함수로 구현	.catch() 메서드	.catch() 메서드	try...catch 블록 내에서 사용
코드 가독성	낮음	중간	낮음	중간	높음	매우 높음

 

 

 

2. XMLHttpRequest(XHR)

---

💡 XMLHttpRequest(XHR)

- 웹 브라우저가 서버와 비동기적으로 데이터를 교환할 수 있게 해주는 API입니다. 이를 통해 웹 페이지에서 서버로 데이터를 보내거나 서버에서 데이터를 받아와서 동적으로 DOM을 수정하는 등 다양한 작업을 수행할 수 있습니다.

- XHR은 AJAX(Ajax) 기술의 핵심 구성 요소 중 하나입니다.

 

 

2.1. XMLHttpRequest(XHR) 메서드

---

 

 

분류	메서드	설명
생성자	new XMLHttpRequest()	새로운 XMLHttpRequest 객체 생성
생성자 속성	onreadystatechange	readyState가 변경될 때마다 호출되는 이벤트 핸들러
생성자 속성	readyState	XMLHttpRequest의 상태를 반환
생성자 속성	responseText	서버의 응답 데이터를 반환
생성자 속성	responseType	서버의 응답 데이터 타입을 설정
생성자 속성	responseXML	서버의 응답 데이터를 XML로 반환
생성자 속성	status	서버 응답의 HTTP 상태 코드를 반환
생성자 속성	statusText	HTTP 상태 코드에 대한 설명을 반환
생성자 속성	timeout	요청이 중지되기 전 대기 시간(밀리초)
생성자 속성	withCredentials	요청에 쿠키 및 인증 헤더를 포함

 

XMLHttpRequest - Web API | MDN

 

 

2.2. XMLHttpRequest(XHR) 사용예시

---

💡 [사용 예시]

- XMLHttpRequest 객체를 이용한 Ajax 방식의 비동기 통신 예시입니다. XMLHttpRequest 객체는 브라우저에서 제공하는 API로, HTTP 요청을 보내고 받는 역할을 합니다.

1. new XMLHttpRequest()를 통해 XMLHttpRequest 객체를 생성합니다.

2. open()을 이용해 GET 요청을 보낼 주소를 지정합니다.

3. setRequestHeader()를 이용해 요청 헤더를 설정합니다.

4. onload 이벤트 핸들러를 등록하여 요청이 완료되었을 때 처리할 콜백 함수를 작성합니다.

5. 이벤트 핸들러 함수 내부에서는 readyState와 status 속성을 이용하여 응답 상태를 확인하고, responseText 속성을 이용하여 응답 본문을 가져옵니다.

const xhr = new XMLHttpRequest(); // 1
const url = '<https://example.com/api>';

xhr.open('GET', url, true); // 2
xhr.setRequestHeader('Content-Type', 'application/json'); // 3

// 4
xhr.onload = function () {
  // 5
  if (xhr.readyState === xhr.DONE && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  } else {
    console.log('Error!');
  }
};


xhr.send();

 

 

2. Ajax(Asynchronous JavaScript and XML)

---

💡 Ajax(Asynchronous JavaScript and XML)

- 웹 페이지에서 데이터를 동적으로 로드하고 표시하기 위한 기술입니다. 이 기술은 전체 페이지를 다시 로드하지 않고 웹 페이지와 서버 간에 데이터를 교환할 수 있게 해 줍니다.
- 이를 통해 웹 페이지의 성능을 향상하고 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다.

 

2.1. Ajax(Asynchronous JavaScript and XML) 속성

속성	설명
url	Ajax 요청을 보낼 URL
method	HTTP 요청 메서드(GET, POST, PUT, DELETE 등)
data	Ajax 요청에 필요한 데이터
dataType	서버로부터 받을 데이터의 타입(XML, JSON, HTML 등)
async	비동기식 여부(True, False)
beforeSend	Ajax 요청이 전송되기 전에 실행할 함수
success	Ajax 요청이 성공적으로 완료되었을 때 실행할 함수
error	Ajax 요청이 실패했을 때 실행할 함수
complete	Ajax 요청이 완료되었을 때 실행할 함수

 

Ajax - Developer guides | MDN

 

 

 

 

2.2. Ajax(Asynchronous JavaScript and XML) 예시

💡 [사용 예시]

- jQuery의 ajax 메서드를 사용하여 비동기적인 HTTP 요청을 보내는 예시입니다.

1. url 프로퍼티에는 요청을 보낼 URL을, context 프로퍼티에는 요청을 보낼 때 사용할 this 키워드를 설정합니다.

2. ajax() 메서드는 Promise 객체를 반환하며, done() 메소드는 Promise 객체가 완료되었을 때 실행됩니다

3. 이 코드에서는 요청이 완료되면 document.body의 클래스에 done을 추가합니다.

$.ajax({
  url: "example.com/data",
  dataType: "json",
  success: function(response) {
    console.log(response);
  },
  error: function(xhr, status, error) {
    console.log(error);
  }
});

 

 

 

3. 콜백함수(CallBack)

---

💡 콜백(CallBack) 함수

- 함수의 인자로 다른 함수를 받아서 작업이 완료되면 해당 함수를 실행하는 방식을 의미합니다.
- 다른 함수 내에서 필요한 시점에 호출되어 결과를 반환합니다. 이는 비동기적 프로그래밍에서 매우 유용하며, 대표적인 예로는 이벤트 리스너나 타이머 콜백 함수가 있습니다.

 

 

3.1. 콜백 함수의 메서드

메서드	설명
call()	콜백함수를 호출한다.
apply()	콜백함수를 호출하면서, this 키워드와 인자들을 배열로 전달한다.
bind()	콜백함수를 호출할 때, this 키워드를 특정 객체로 고정시킨 새로운 함수를 반환한다.

 

콜백 함수 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

3.2. 콜백 함수의 예시

💡 [사용 예시]

- 이 코드는 자바스크립트에서 콜백 함수를 사용하는 방법을 보여주는 예시입니다.

1. myFunction 함수는 콜백 함수를 인자로 받아들이고 setTimeout을 사용하여 3초 후에 해당 함수를 호출합니다.

2. 이 경우, 콜백 함수는 displayMessage이며, 메시지를 콘솔에 로그 합니다.

3. myFunction이 displayMessage 인자와 함께 호출되면, 3초를 기다린 후 "Hello, world!"를 콘솔에 로그 합니다.

4. 이는 비동기 작업에서 유용하며, 작업이 완료되면 어떤 작업을 수행하고 싶지만, 대기하면 안 될 때 사용됩니다.

// 1
function myFunction(callback) {
  setTimeout(() => {
    callback('Hello, world!');
  }, 3000);
}

function displayMessage(message) {
  console.log(message);
}

myFunction(displayMessage);

 

 

4. Promise

---

💡 Promise

- 비동기 작업의 결과를 나중에 받아올 수 있는 객체입니다. Promise 객체는 세 가지 상태를 가지며, 작업이 성공적으로 완료되면 이행(fulfilled) 상태가 되고, 작업이 실패하면 거부(rejected) 상태가 됩니다.

Promise - JavaScript | MDN

 

4.1. Promise 메서드

메서드	설명
Promise.all()	주어진 모든 프로미스가 이행될 때까지 대기하고 이행된 결과를 배열로 반환
Promise.race()	주어진 프로미스 중 하나가 이행되거나 거부될 때까지 대기하고 그 결과를 반환
Promise.resolve()	주어진 값을 가지는 새로운 이행된 프로미스 객체를 반환
Promise.reject()	주어진 이유로 거부된 프로미스 객체를 반환

 

 

 

4.2. Promise 예시

💡 [예시]

1. doSomething 함수를 실행하면 Promise 객체를 반환합니다.

2. 비동기 작업을 수행하고 작업이 성공적으로 완료되면 resolve 함수를 호출하고, 실패하면 reject 함수를 호출합니다. 이후, then 메서드와 catch 메서드를 사용하여 Promise 객체의 상태에 따른 처리를 수행합니다.

function doSomething() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (/* 비동기 작업 성공 */) {
      resolve('Success!');
    } else {
      reject('Failure!');
    }
  });
}

doSomething()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

 

 

💡[참고] Promise에 대해 더 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.

[JS] Promise 이해하기 -1 (콜백함수, 정의, 요청상태)

 

[JS] Promise 이해하기 -2 (Promise 체이닝, Promise.all, async/await)

 

 

5. Fetch API

---

💡 Fetch API

- 비동기 네트워크 요청 방법 중 하나입니다. fetch API를 사용하여 서버에서 데이터를 가져와 사용자가 볼 수 있는 형식으로 변환할 수 있습니다. 이 방법은 XMLHttpRequest(XMLHttpRequest)와 같은 기존의 방법보다 간단하고 더 많은 기능을 제공합니다.

- fetch API는 Promise를 반환하며, Response 객체를 반환합니다. 이 객체는 서버 응답과 관련된 정보, 텍스트 및 JSON 데이터 등을 포함합니다.

Fetch API - Web API | MDN

 

 

5.1. Fetch API 메서드

메서드	설명
fetch()	네트워크 리소스를 가져오기 위한 메서드입니다. URL을 인수로 사용하고 응답 객체를 반환합니다.
clone()	응답 객체를 복제합니다.
text()	응답 텍스트를 Promise로 반환합니다.
json()	JSON 응답을 Promise로 반환합니다.
blob()	응답 바이너리 데이터를 Promise로 반환합니다.
arrayBuffer()	ArrayBuffer 응답을 Promise로 반환합니다.

 

 

 

5.2. Fetch API 예시

💡 [ 사용 예시 ]

- JavaScript에서 fetch API를 사용하여 API 엔드포인트에 비동기 요청을 보내고 데이터를 검색하는 예제입니다.

1. fetch 함수는 Response 객체와 함께 해결되는 Promise를 반환합니다

2. Response 객체는 json() 메소드를 사용하여 JSON 형식으로 데이터를 검색할 수 있습니다.

3. 코드의 첫 번째 then() 메서드는 Response 개체에서 JSON 데이터를 검색하여 콘솔에 기록하는 데 사용됩니다. catch() 메소드는 요청 중에 발생할 수 있는 모든 오류를 처리하는 데 사용됩니다.

fetch('<https://example.com/api/data>')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

 

 

6. async/await

---

 💡  async/await

- 자바스크립트에서 비동기 처리를 위한 문법 중 하나입니다. 함수 앞에 async 키워드를 붙이면 해당 함수는 비동기 함수가 됩니다. 비동기 함수 내에서 await 키워드를 사용하면, 해당 연산이 끝날 때까지 다음 코드를 실행하지 않고 기다릴 수 있습니다.

async function - JavaScript | MDN

 

6.1. 사용 예시

💡 [ 사용 예시 ]
1. wait 함수는 지정된 시간 (밀리초) 후에 해결되는 promise를 반환합니다

2. example 함수는 콘솔에 "Hello"를 출력하고, wait를 사용하여 1000 밀리초 동안 기다린 후 "World!"를 콘솔에 출력합니다.

3. example 함수는 async로 표시되어 있으며, 이를 통해 await 키워드를 사용하여 실행이 계속되기 전에 promise가 해결될 때까지 대기할 수 있습니다.

4. example 함수가 호출되면 "Hello"를 로그하고 1000 밀리초 동안 기다린 다음 "World!"를 로그 합니다.

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function example() {
  console.log('Hello');
  await wait(1000);
  console.log('World!');
}

example();

 

 

 

 

 

 

오늘도 감사합니다😀