콜백 함수
2025. 3. 30. 22:43ㆍWeb 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);
// 더 많은 중첩된 콜백이 올 수 있음...
});
});
});
콜백 패턴의 한계
- 가독성과 유지보수성: 중첩된 콜백은 코드 이해를 어렵게 만듭니다.
- 오류 처리: 각 콜백마다 오류 처리 로직이 필요하며, 일관된 오류 처리가 어렵습니다.
- 제어 흐름: 조건부 실행, 병렬 실행, 순차 실행 등 복잡한 흐름 제어가 어렵습니다.
- 제어의 역전: 콜백 함수의 실행을 외부 코드에 위임하여 예상치 못한 동작이 발생할 수 있습니다.
'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 |