이번 글에서는 JavaScript에서 꼭 알아야 하는 콜백 함수와 비동기 처리 개념을 쉽게 설명해 드릴게요.
웹 개발에서 데이터 통신, 파일 로딩 같은 작업은 시간이 걸리기 때문에 비동기 처리가 중요합니다.
함께 실습하며 개념을 확실하게 익혀봐요! 😊
🔍 동기(Synchronous)와 비동기(Asynchronous)란?
프로그램은 일반적으로 위에서 아래로 차례대로 실행되죠.
이렇게 순차적으로 실행되는 방식을 동기 처리라고 해요.
하지만 웹 페이지에서는 서버 통신이나 이미지 로딩처럼 시간이 걸리는 작업이 많습니다.
이런 작업은 순차적으로 처리하면 화면이 멈추거나 사용자 경험이 나빠지겠죠.
그래서 등장한 게 비동기 처리!
시간이 걸리는 작업을 먼저 요청하고, 나머지 코드를 먼저 실행한 뒤 작업이 끝나면 결과를 받아 처리하는 방식이에요.
🔗 콜백 함수란?
콜백 함수란 다른 함수에 인자로 전달되는 함수를 말합니다.
특정 작업이 끝난 뒤 실행할 함수를 미리 등록해두는 거예요.
✔️ 콜백 함수 예제
function greeting(name) {
console.log(`안녕하세요, ${name}님!`);
}
function processUserInput(callback) {
const name = prompt("이름을 입력하세요:");
callback(name);
}
processUserInput(greeting);
📌 위 코드는 사용자 입력을 받은 뒤 greeting 함수를 실행하는 구조입니다.
⚙️ 비동기 처리의 문제점
콜백 함수를 중첩해서 사용하다 보면 코드가 점점 복잡해지는 콜백 지옥(Callback Hell) 문제가 생겨요.
setTimeout(() => {
console.log("첫 번째 작업 완료");
setTimeout(() => {
console.log("두 번째 작업 완료");
setTimeout(() => {
console.log("세 번째 작업 완료");
}, 1000);
}, 1000);
}, 1000);
위 코드는 보기만 해도 어지럽죠? 😅
이 문제를 해결하기 위해 등장한 것이 Promise와 async/await입니다.
다음 강좌에서 자세히 알려드릴게요!
📑 요약
- 동기 처리 : 순차 실행
- 비동기 처리 : 요청 → 다음 코드 실행 → 작업 완료 후 처리
- 콜백 함수 : 함수에 전달되어 특정 시점에 실행되는 함수
- 콜백 지옥 : 콜백 중첩으로 복잡해진 코드
이제 콜백 함수와 비동기 처리 개념을 이해하셨나요?
다음 글에서는 Promise와 async/await로 이 문제를 어떻게 해결하는지 알려드릴게요. 기대해 주세요! 😃
⏳ 다음 강좌 예고
비동기 처리의 진화 : Promise와 async/await 완전 정복!
더 깔끔하고 보기 좋은 비동기 코드로 웹 페이지를 멋지게 만들어보세요 💪