IT 개발자 블로그 - Java, Spring Boot, React 등

안녕하세요, 오늘은 자바스크립트에서 매우 중요한 개념인 비동기 프로그래밍에 대해 알아보려고 합니다. 웹 개발을 하면서 피할 수 없는 이 개념을 제대로 이해하는 것은 효율적인 웹 애플리케이션 개발의 핵심입니다.

동기 vs 비동기: 그 차이점은 무엇일까요?

자바스크립트는 기본적으로 단일 스레드 언어입니다. 이는 한 번에 하나의 작업만 처리할 수 있다는 의미입니다. 그러나 웹 개발에서는 데이터 가져오기, 파일 시스템 접근, 타이머 설정과 같은 시간이 오래 걸리는 작업이 자주 발생합니다.

동기 프로그래밍에서는 코드가 순차적으로 실행됩니다. 한 작업이 완료될 때까지 다음 작업은 대기 상태에 놓입니다. 이렇게 되면 시간이 오래 걸리는 작업으로 인해 전체 프로그램이 멈춰버리는 "블로킹" 현상이 발생할 수 있습니다.

console.log("1번 작업");
// 시간이 오래 걸리는 작업
console.log("2번 작업"); // 1번 작업이 완료된 후에만 실행됨

반면, 비동기 프로그래밍은 시간이 오래 걸리는 작업을 백그라운드로 보내고, 다른 코드를 계속 실행할 수 있게 합니다. 작업이 완료되면 결과를 처리하는 방식입니다.

자바스크립트의 비동기 처리 방식

자바스크립트에서 비동기 프로그래밍을 구현하는 방법은 여러 가지가 있습니다:

1. 콜백 함수 (Callbacks)

가장 전통적인 방식으로, 함수를 다른 함수의 인자로 전달하여 작업이 완료된 후 호출되게 하는 방식입니다.

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: "홍길동", age: 30 };
    callback(data);
  }, 2000);
}

fetchData((data) => {
  console.log("데이터 수신 완료:", data);
});
console.log("다음 작업 진행 중...");

이 코드는 "다음 작업 진행 중..."이 먼저 출력되고, 2초 후에 "데이터 수신 완료: {name: '홍길동', age: 30}"가 출력됩니다.

2. 프로미스 (Promises)

콜백 지옥을 피하기 위해 ES6에서 도입된 기능입니다. 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "홍길동", age: 30 };
      resolve(data); // 성공 시
      // reject(new Error('데이터 가져오기 실패')); // 실패 시
    }, 2000);
  });
}

fetchData()
  .then(data => console.log("데이터 수신 완료:", data))
  .catch(error => console.error("오류 발생:", error));

console.log("다음 작업 진행 중...");

3. Async/Await

프로미스를 더 쉽게 사용할 수 있도록 ES2017에서 도입된 문법입니다. 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 좋습니다.

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: "홍길동", age: 30 });
    }, 2000);
  });
}

async function processData() {
  console.log("데이터 요청 중...");
  const data = await fetchData(); // fetchData가 완료될 때까지 대기
  console.log("데이터 수신 완료:", data);
}

processData();
console.log("다음 작업 진행 중...");

비동기 프로그래밍의 중요성

비동기 프로그래밍은 특히 웹 애플리케이션에서 매우 중요합니다. 사용자 경험을 향상시키고, 서버와의 통신, 파일 처리 등의 시간이 오래 걸리는 작업을 효율적으로 처리할 수 있게 해줍니다.

예를 들어, 사용자가 버튼을 클릭했을 때 서버에서 데이터를 가져오는 작업을 비동기적으로 처리하면, 데이터를 가져오는 동안에도 사용자는 다른 작업을 수행할 수 있습니다.