콜백과 콜백 지옥
콜백 기반 비동기 처리를 이해하고, 콜백 지옥이라고 불리는 중첩 문제를 파악하며, 이를 해결하기 위해 Promise가 도입된 이유를 알아봅니다.
콜백과 콜백 지옥은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
콜백이란 무엇인가요
콜백은 어떤 작업이 완료되었을 때 나중에 호출하기 위해 다른 함수에 인수로 전달하는 함수입니다. 콜백은 JavaScript의 최초 비동기 패턴이며, 프라미스보다 먼저 등장했습니다.
// Synchronous callback:
[1, 2, 3].forEach(function(n) {
console.log(n);
});
// Async callback:
setTimeout(function() {
console.log('1 second later');
}, 1000);Node.js의 오류 우선 콜백
Node.js는 하나의 규칙을 표준화했습니다. 콜백은 첫 번째 인수로 오류를 받고 두 번째 인수로 결과를 받습니다. err가 null 또는 undefined이면 작업이 성공한 것입니다.
fs.readFile('data.json', 'utf8', function(err, data) {
if (err) {
console.error('Failed to read file:', err);
return;
}
console.log('File contents:', data);
});콜백을 사용한 비동기 단계
한 비동기 작업이 다른 작업의 결과에 의존한다면 콜백을 중첩합니다. 순차적으로 세 단계만 처리해도 코드가 복잡해지기 시작합니다.
getUser(userId, function(err, user) {
if (err) return handleError(err);
getOrders(user.id, function(err, orders) {
if (err) return handleError(err);
getInvoice(orders[0].id, function(err, invoice) {
if (err) return handleError(err);
// Finally use invoice
renderInvoice(invoice);
});
});
});콜백 지옥 — 파멸의 피라미드
깊게 중첩된 구조를 콜백 지옥 또는 파멸의 피라미드라고 합니다. 문제는 다음과 같습니다. 단계가 추가될 때마다 코드가 오른쪽으로 이동하고, 오류 처리가 반복되며, 흐름을 따라가기 어렵고, 리팩터링하기도 힘듭니다.
콜백 지옥의 문제
1) 각 단계에서 명시적으로 if(err)를 확인해야 오류를 처리할 수 있습니다. 2) 디버깅이 어렵습니다. 스택 추적에 논리적인 연결 관계가 나타나지 않기 때문입니다. 3) 코드를 가로 방향의 여러 계층으로 읽어야 하므로 이해하기 어렵습니다. 4) 실수로 오류를 놓치기 쉽습니다.
개선 방법: 이름이 있는 함수
중첩된 콜백을 이름이 있는 최상위 수준 함수로 분리하세요. 이렇게 하면 중첩 구조가 평평해지고 각 단계를 독립적으로 테스트할 수 있습니다. 하지만 근본적인 조정 문제까지 해결해 주는 것은 아닙니다.
function onInvoice(err, invoice) {
if (err) return handleError(err);
renderInvoice(invoice);
}
function onOrders(err, orders) {
if (err) return handleError(err);
getInvoice(orders[0].id, onInvoice);
}
function onUser(err, user) {
if (err) return handleError(err);
getOrders(user.id, onOrders);
}
getUser(userId, onUser);제어 흐름 라이브러리(역사적 배경)
async.js와 같은 라이브러리는 콜백 기반 흐름을 관리하는 도우미(async.waterfall, async.parallel)를 제공했습니다. 이러한 방식은 ES2015에 프라미스가 등장하기 전까지 최첨단 방법이었습니다.
콜백이 사라지지 않는 이유
콜백은 여전히 어디에서나 사용됩니다. 이벤트 리스너, 배열 메서드, setTimeout, 스트림 API가 모두 콜백을 사용합니다. 핵심은 비동기 순서 제어에는 프라미스와 async/await가 더 적합하다는 점입니다. 간단한 일회성 이벤트에는 콜백을 사용해도 괜찮습니다.
콜백에서 프라미스로: 프라미스화
Node.js의 util.promisify()는 오류 우선 콜백 함수를 프라미스를 반환하는 버전으로 감쌉니다. 이를 통해 기존 API와 최신 async/await 코드를 연결할 수 있습니다.
const { promisify } = require('util');
const readFile = promisify(require('fs').readFile);
async function readConfig() {
const data = await readFile('config.json', 'utf8');
return JSON.parse(data);
}콜백이 여전히 적합한 경우
이벤트 리스너(addEventListener)는 콜백을 요구하며, 이벤트가 여러 번 발생하므로 이는 적절합니다. 스트림 데이터 처리기도 콜백을 요구합니다. 프라미스는 한 번만 제공되는 비동기 결과이고, 콜백은 여러 이벤트를 구독하는 방식입니다.
앞으로의 방향: 프라미스와 async/await
ES2015에 도입된 프라미스와 ES2017에 도입된 async/await는 콜백 지옥 문제를 해결했습니다. 최신 JavaScript 코드에서는 순차적인 비동기 작업에 거의 항상 async/await를 사용합니다. 오래된 코드를 읽고 라이브러리 내부 동작을 이해하려면 콜백을 알아 두는 것이 여전히 중요합니다.
빠른 확인
'콜백 지옥'은 어떤 주요 문제를 가리키나요?
복습: 콜백
콜백은 나중에 호출하기 위해 다른 함수에 전달하는 함수입니다. 콜백은 최초의 비동기 패턴입니다. 오류 우선 콜백(err, result)은 Node.js의 규칙입니다. 깊은 중첩은 콜백 지옥을 만듭니다. 이름이 있는 함수를 분리해 중첩을 평평하게 만드세요. 순차적인 비동기 흐름에는 프라미스와 async/await를 사용하세요. 이벤트 리스너와 스트림에는 콜백이 여전히 적합합니다.
자주 묻는 질문
“콜백과 콜백 지옥” 강의는 무료인가요?
네 — “콜백과 콜백 지옥” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“콜백과 콜백 지옥”에서 뭘 배우나요?
콜백 기반 비동기 처리를 이해하고, 콜백 지옥이라고 불리는 중첩 문제를 파악하며, 이를 해결하기 위해 Promise가 도입된 이유를 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“콜백과 콜백 지옥” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.