[javascript] 자바스크립트의 비동기 제어와 네트워크 통신

08 Dec 2023

javascript

이번에는 자바스크립트에서 비동기 프로그래밍과 네트워크 통신을 어떻게 다루는지 알아보겠습니다. 비동기 프로그래밍은 네트워크 요청과 같이 시간이 걸리는 작업을 처리할 때 매우 유용합니다.

비동기 프로그래밍

대부분의 네트워크 통신은 비동기적으로 처리됩니다. 이는 요청을 보내고 서버로부터 응답을 기다리는 동안에도 다른 작업을 할 수 있다는 의미입니다. 자바스크립트에서는 보통 콜백 함수나 프로미스를 사용하여 비동기 코드를 처리합니다.

// 콜백 함수
fetch('https://api.example.com/data', (response) => {
  // 서버 응답을 처리하는 코드
});

// 프로미스
fetch('https://api.example.com/data')
  .then((response) => {
    // 서버 응답을 처리하는 코드
  })
  .catch((error) => {
    // 에러를 처리하는 코드
  });

네트워크 통신

자바스크립트에서는 fetch나 XMLHttpRequest와 같은 API를 사용하여 서버로부터 데이터를 가져올 수 있습니다. 최근에는 fetch가 더욱 선호되는 방법이지만, 기존에 사용되던 XMLHttpRequest도 여전히 지원되고 있습니다.

// fetch를 이용한 GET 요청
fetch('https://api.example.com/data')
  .then((response) => {
    // 응답을 처리하는 코드
  })
  .catch((error) => {
    // 에러를 처리하는 코드
  });

// XMLHttpRequest를 이용한 GET 요청
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 응답을 처리하는 코드
  }
};
xhr.send();

이처럼 자바스크립트를 이용하면 비동기 프로그래밍과 네트워크 통신을 효과적으로 다룰 수 있습니다.

참고 자료: