콜백 함수

2025. 3. 30. 22:43Web Development/JavaScript

콜백 함수의 이해와 한계

콜백 함수 기본

콜백 함수는 다른 함수의 인자로 전달되어 나중에 실행되는 함수입니다. JavaScript에서 비동기 처리를 위한 전통적인 방법입니다.

// 기본 콜백 예제
function greeting(name, callback) {
  console.log(`안녕하세요, ${name}님!`);
  callback();
}

greeting("홍길동", function() {
  console.log("콜백 함수가 실행되었습니다.");
});

// 비동기 콜백 예제
setTimeout(function() {
  console.log("3초 후에 실행됩니다.");
}, 3000);

// DOM 이벤트 콜백
document.getElementById("myButton").addEventListener("click", function() {
  console.log("버튼이 클릭되었습니다.");
});

비동기 작업에서의 콜백 활용

// 파일 읽기 예제 (Node.js)
const fs = require('fs');

fs.readFile('example.txt', 'utf8', function(err, data) {
  if (err) {
    console.error('읽기 오류:', err);
    return;
  }
  console.log('파일 내용:', data);
});

// AJAX 요청 예제 (브라우저)
function fetchData(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(null, JSON.parse(xhr.responseText));
    } else {
      callback(new Error(`${xhr.status}: ${xhr.statusText}`));
    }
  };
  xhr.onerror = function() {
    callback(new Error('네트워크 오류'));
  };
  xhr.send();
}

fetchData('https://api.example.com/data', function(error, data) {
  if (error) {
    console.error('오류 발생:', error);
    return;
  }
  console.log('데이터:', data);
});

콜백 지옥(Callback Hell)

중첩된 콜백 함수는 코드의 가독성과 유지보수성을 저하시키는 "콜백 지옥"을 유발할 수 있습니다.

// 콜백 지옥 예제
fetchData('https://api.example.com/users', function(error, users) {
  if (error) {
    console.error('사용자 데이터 가져오기 실패:', error);
    return;
  }
  
  fetchData(`https://api.example.com/users/${users[0].id}/posts`, function(error, posts) {
    if (error) {
      console.error('포스트 가져오기 실패:', error);
      return;
    }
    
    fetchData(`https://api.example.com/posts/${posts[0].id}/comments`, function(error, comments) {
      if (error) {
        console.error('댓글 가져오기 실패:', error);
        return;
      }
      
      console.log('첫 번째 사용자의 첫 번째 포스트의 댓글:', comments);
      
      // 더 많은 중첩된 콜백이 올 수 있음...
    });
  });
});

콜백 패턴의 한계

  1. 가독성과 유지보수성: 중첩된 콜백은 코드 이해를 어렵게 만듭니다.
  2. 오류 처리: 각 콜백마다 오류 처리 로직이 필요하며, 일관된 오류 처리가 어렵습니다.
  3. 제어 흐름: 조건부 실행, 병렬 실행, 순차 실행 등 복잡한 흐름 제어가 어렵습니다.
  4. 제어의 역전: 콜백 함수의 실행을 외부 코드에 위임하여 예상치 못한 동작이 발생할 수 있습니다.

'Web Development > JavaScript' 카테고리의 다른 글

async/await  (0) 2025.03.30
Promise  (0) 2025.03.30
비동기 프로그래밍  (0) 2025.03.30
실전 DOM 조작 예제  (0) 2025.03.30
이벤트 처리  (0) 2025.03.30