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

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

웹 페이지를 띄우고 생각해보자. 사용자가 버튼을 클릭하는 순간 애니메이션이 부드럽게 실행되고, 동시에 서버에서 데이터를 가져오는 API 요청도 비슷한 시점에 일어난다. 심지어 스크롤 이벤트도 문제없이 잘 동작한다.

 

"응? 자바스크립트는 싱글 스레드라면서? 그럼 이 모든 일들을 동시에 어떻게 처리하는 거지?"

 

이런 궁금증이 든다면 아주 자연스럽다. 자바스크립트는 분명 한 번에 하나의 작업만 처리할 수 있는 언어다. 그럼에도 불구하고 다양한 작업들이 "거의 동시에" 일어나는 것처럼 보이는 이유는 무엇일까? 이를 이해하려면 먼저 자바스크립트 엔진의 동작 원리, 그리고 비동기 처리 구조에 대해 짚고 넘어가야 한다.

 

⬇️ 스레드에 대한 개념은 아래 글을 참고

[CS #6] Process와 Thread에 대하여

 

console.log("Start");
setTimeout(() => console.log("Timeout"), 1000);
console.log("End");

// 결과:
// Start
// End
// Timeout

 

자바스크립트는 실행 중인 함수가 끝나기 전까지는 다른 함수가 끼어들 수 없다. 이걸 Run-to-Completion이라고 부른다. 함수가 호출되면 Call Stack에 쌓이고, 실행이 끝나야만 Stack에서 빠져나간다. 그 사이에 아무리 다른 이벤트가 발생하더라도, 그 이벤트의 Callback은 "지금 실행 중인 코드가 끝날 때까지" 대기하게 된다.

 

"그런데도 왜 동시에 작동하는 것처럼 보일까?"

 

그 이유는 자바스크립트는 자바스크립트 엔진만으로 동작하지 않기 때문이다. 즉, 브라우저(또는 Node.js) 환경에는 자바스크립트 런타임이 존재한다.

 

+ 추가 공부

자바스크립트 엔진

 ~> 자바스크립트 코드를 해석하고 실행하는 프로그램(실행기)

 ~> JS 문법으로 작성된 코드를 읽고, 이를 기계가 이해할 수 있는 저수준 명령어로 변환해서 실행해주는 역할

 ~> 주요 역할

  • 파싱: JS 코드를 분석해서 문법 트리로 바꿈

  • 컴파일: 문법 트리를 바탕으로 바이트코드 혹은 머신코드 생성

  • 실행: 생성된 코드로 실제 계산 수행

자바스크립트 런타임

 ~> 자바스크립트 엔진이 실제로 동작하는 실행 환경 전체

 ~> 즉, 자바스크립트 엔진 + 비동기 처리 + 외부 기능 지원 도구들을 모두 포함한 환경

 ~> 특징

  • JS 코드 실행 뿐 아니라 비동기 처리 전체를 담당

  • 실제로는 엔진보다 훨씬 복잡하고 풍부한 기능을 제공

  • 런타임이 있어야 JS가 실생활에서 쓸 수 있는 언어가 됨

 

📌 자바스크립트 런타임 구성 요소

출처: https://velog.io/@addiescode/Javascript-%EB%8F%99%EA%B8%B0%EB%B9%84%EB%8F%99%EA%B8%B0

 

✅ 구성 요소

• Call Stack: 현재 실행 중인 코드
• Web APIs: 브라우저에서 제공하는 비동기 기능 (setTimeout, fetch 등)
• Callback Queue: 나중에 실행할 작업들을 대기
• Event Loop: Call Stack이 비었는지 확인하고, Callbac Queue에서 Callback을 꺼내 실행

 

이들이 함께 동작하면서 비동기 처리를 가능하게 만든다. 즉, 자바스크립트 자체는 싱글 스레드지만, 비동기 작업을 효율적으로 분리해 처리할 수 있는 구조 덕분에 실제로는 "동시성처럼" 보이게 되는 것이다.

 

✅ 비동기 처리 흐름

1. 브라우저나 Node.js 환경에서 사용자가 setTimeout, fetch, 이벤트 리스너 등 비동기 작업을 요청
2. 해당 작업은 자바스크립트 엔진이 직접 처리하지 않고, Web API 영역으로 전달
3. Web API는 이 요청을 받아 처리 (이 과정은 자바스크립트의 실행 흐름과는 별도로 진행)
4. 비동기 작업이 완료되면, Web API는 해당 작업에 연결된 Callback을 Callback Queue 공간에 등록
5. Event Loop는 만약 Call Stack이 비어 있다면, Callback Queue에 대기 중인 작업을 Call Stack으로 이동시켜 실행
6. 이제 Callback이 Call Stack에 올라가 실행 (작업의 결과가 반영되며, 사용자에게 화면이 업데이트되거나 콘솔에 출력되는 등의 동작)

 

결국 여기서 중요한 점은, 자바스크립트 엔진은 그저 주어진 코드를 실행하는 역할만을 수행한다는 것이다. 이 엔진은 스스로 어떤 작업을 스케줄하거나, 대기 중인 작업을 알아서 실행하는 기능은 없다. 즉, 자바스크립트 엔진은 단순히 "요청이 들어왔을 때 실행하는(on demand) 계산기 같은 존재"일 뿐이다.

그렇다면 언제 어떤 코드를 실행할지 결정하는 건 누가 맡을까? 바로 자바스크립트가 동작하는 런타임 환경(예: 브라우저, Node.js)이 그 역할을 한다. 이 런타임은 setTimeout, fetch, event listener 같은 비동기 작업을 백그라운드에서 처리하고, 이벤트 루프(Event Loop) 를 통해 적절한 타이밍에 자바스크립트 엔진에 작업을 전달한다.

 

결과적으로, 우리가 보는 자바스크립트의 "동시성"은 자바스크립트 엔진 하나만으로는 설명할 수 없고, 그 엔진을 감싸고 있는 런타임 환경 전체 구조를 이해해야만 정확히 설명할 수 있다.

 

📌 Callback

Callback은 어떤 작업이 끝난 뒤에 실행되어야 하는 함수다. 자바스크립트에서는 함수가 일급 객체이기 때문에, 다른 함수의 인자로 전달될 수 있고, 이러한 특성을 활용해 특정 이벤트나 조건이 발생했을 때 호출되도록 핸들러로 사용된다. 자바스크립트는 싱글 스레드로 동작하므로, 오래 걸리는 작업(예: 서버 요청, 타이머 등)을 그대로 실행하면 전체 프로그램이 멈추게 된다. 그래서 자바스크립트는 비동기적으로 이런 작업을 백그라운드에 맡기고, 완료된 뒤 호출할 Callback 함수를 등록하는 방식으로 흐름을 제어한다. 대표적인 예시로는 setTimeout, addEventListener, 그리고 AJAX 요청 시 사용되는 콜백이 있다.

 

function getData(callback) {
  setTimeout(() => {
    callback("데이터 도착!");
  }, 1000);
}

getData((data) => {
  console.log(data);
});

위 예제에서 setTimeout은 백그라운드에서 1초를 기다리고, 그 이후에 우리가 넘긴 callback("데이터 도착!")을 실행한다. 이렇게 하면 프로그램은 멈추지 않고 다음 코드로 넘어가면서도, 나중에 데이터를 받아와서 처리할 수 있다.

 

📌 Callback 지옥

Callback은 간단한 상황에서는 유용하지만, 복잡한 비즈니스 로직에는 큰 문제를 일으킨다. 특히 비동기 작업이 연속적으로 이어질 때, Callback을 중첩해서 사용해야 하므로 코드가 점점 오른쪽으로 밀리며 구조가 무너지게 된다.

 

// 웹 로그인 테스트의 콜백 지옥 예시
function testLoginProcess(callback) {
  loadPage('/login', function(error) {
    if (error) return callback(error);

    enterUsername('tester', function(error) {
      if (error) return callback(error);

      enterPassword('pass123', function(error) {
        if (error) return callback(error);

        clickLoginButton(function(error, result) {
          if (error) return callback(error);

          verifyRedirect('/dashboard', function(error, isSuccess) {
            if (error) return callback(error);

            checkWelcomeMessage(function(error, message) {
              if (error) return callback(error);

              callback(null, {
                success: isSuccess,
                message: message
              });
            });
          });
        });
      });
    });
  });
}

이렇게 Callback이 Callback 안에 들어가는 형태를 흔히 "Callback 지옥"이라고 부른다.

✅ 그 이유는 다음과 같다:

• 코드 가독성 저하로 인한 유지보수 어려움
• 에러 처리 로직 중복 및 누락 위험
• 디버깅 복잡성 증가
• 실행 흐름 파악 어려움
• 코드 재사용성 저하

 

Callback 지옥은 초기에 비동기 처리를 할 수밖에 없었던 자바스크립트의 한계였고, 이 문제를 해결하기 위해 등장한 것이 Promise이다.

 

📌 Promise

Promise는 비동기 작업을 체계적이고 선언적으로 다루기 위한 객체다. 미래에 어떤 값이 도착할 것이라는 약속을 나타내며, 그 값이 오면 .then()으로 처리하고, 오지 않거나 실패하면 .catch()로 처리할 수 있다.

 

// Promise 생성
const loginPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  authenticateUser('testuser', 'password')
    .then(user => {
      if (user) {
        resolve(user); // 성공
      } else {
        reject(new Error('인증 실패')); // 실패
      }
    })
    .catch(error => reject(error));
});

// Promise 사용
loginPromise
  .then(user => console.log('로그인 성공:', user))
  .catch(error => console.error('로그인 실패:', error));

// 테스트에서의 Promise 체이닝
function testCheckout() {
  return addToCart('product1')
    .then(cart => {
      expect(cart.items.length).toBe(1);
      return proceedToCheckout(cart);
    })
    .then(checkout => {
      expect(checkout.total).toBeGreaterThan(0);
      return completePayment(checkout, 'credit-card');
    })
    .then(order => {
      expect(order.status).toBe('confirmed');
      return order;
    })
    .catch(error => {
      console.error('테스트 실패:', error);
      throw error;
    });
}

 

✅ Promise는 3가지 상태를 가진다:

• pending: 초기 상태, 작업 진행 중
• fulfilled: 작업 성공 (resolve)
• rejected: 작업 실패 (reject)

 

✅ Promise 주요 메서드

• Promise.all(): 모든 Promise 완료 대기
• Promise.race(): 가장 먼저 완료되는 Promise 반환
• Promise.allSettled(): 모든 Promise의 결과(성공/실패) 반환
• Promise.any(): 첫 번째 성공한 Promise 반환

 

✅ 왜 Promise가 중요한가?

1. Callback Chain을 깔끔하게 연결할 수 있다
   → .then().then().then() 으로 단계별 처리 가능
2. 에러를 통합적으로 처리할 수 있다
   → .catch() 하나로 전체 흐름의 오류 잡기 가능
3. 비즈니스 로직을 더 명확하게 표현할 수 있다

 

하지만 .then().then() 구조도 길어지면 가독성이 다시 나빠질 수 있고, 동기 코드처럼 읽히지는 않기 때문에, 이를 해결하기 위해 등장한 것이 async/await이다.

 

📌 async, await

async/await는 Promise를 더 동기식처럼 보이게 만들어주는 문법이다. 눈에 보이는 구조는 마치 위에서 아래로 흐르는 일반 코드 같지만, 내부적으로는 여전히 비동기로 작동한다.

async는 함수 앞에 붙여서 그 함수가 항상 Promise를 반환하도록 만드는 키워드고, await는 Promise가 처리될 때까지 기다린 뒤, 그 결과값을 반환하는 키워드다. await는 반드시 async 함수 안에서만 사용할 수 있으며, 이를 활용하면 복잡한 .then() 체인을 피하고 코드를 더 간결하게 작성할 수 있다.

 

// async 함수 선언
async function fetchUserData(userId) {
  // await 키워드는 async 함수 내부에서만 사용 가능
  const response = await fetch(`/api/users/${userId}`);

  if (!response.ok) {
    throw new Error('사용자 정보를 가져오는데 실패했습니다');
  }

  return await response.json();
}

// 화살표 함수와 함께 사용
const verifyUser = async (username) => {
  const user = await getUserByName(username);
  return user.isVerified;
};

 

✅ async/await의 장점:

• 코드가 훨씬 간결하고 직관적이다
• 동기 코드처럼 보이기 때문에 디버깅이 쉬움
• try-catch로 에러 핸들링이 일관되고 명확함

 

✅ Promise와의 관계

• async 함수는 항상 Promise를 반환
• await는 Promise가 처리될 때까지 함수 실행을 일시 중지
• 내부적으로 Promise 기반으로 동작하는 문법적 간소화
• Promise 메서드(then/catch) 대체 역할

 

🔥 코드 가독성 향상 예시

// Promise 체인
function testUserFlow() {
  return loginUser('testuser', 'password')
    .then(token => {
      return fetchUserProfile(token);
    })
    .then(profile => {
      return updateUserPreferences(profile.id, { theme: 'dark' });
    })
    .then(result => {
      expect(result.success).toBe(true);
    });
}

// async/await 버전
async function testUserFlow() {
  const token = await loginUser('testuser', 'password');
  const profile = await fetchUserProfile(token);
  const result = await updateUserPreferences(profile.id, { theme: 'dark' });
  expect(result.success).toBe(true);
}

 

🔥 try/catch를 이용한 오류 처리

// async/await + try-catch-finally 예제
async function secureLogin() {
  try {
    const user = await authenticateUser('test', 'pass');
    const permissions = await fetchPermissions(user.id);
    const isAdmin = await checkAdminRole(permissions);
    return isAdmin; // 성공 시 결과 반환
  } catch (error) {
    console.error('로그인 절차 실패:', error);
    throw new Error('인증 처리 중 오류가 발생했습니다'); // 에러 다시 던지기
  } finally {
    // 성공/실패 관계없이 반드시 실행됨
    await logAttempt('test', new Date());
  }
}