728x90
콜백을 왜 사용할까요?
비동기 작업을 순차적으로 처리하기 위해서 입니다.
비동기 처리에서 작업이 완료되기를 기다리지 않고 다른 작업이 실행 될 수 있기 때문에 작업순서를 보장하고 후속작업을 실행하려면 콜백 함수가 필요합니다.
- 비동기 작업에서 순차적 흐름을 만들기 위해:
- 비동기 작업은 시간이 걸리는 작업입니다. 예를 들어, 네트워크 요청, 파일 읽기/쓰기, 애니메이션 등 여러 작업이 있을 수 있습니다.
- 콜백 함수는 한 작업이 끝나면 다음 작업을 처리하도록 보장합니다.
- 콜백을 사용하지 않으면, 비동기 작업이 끝나기 전에 다음 작업이 실행될 수 있기 때문에, 작업 순서가 뒤죽박죽이 될 수 있습니다.
- 시간이 걸리는 작업을 기다리게 만들기 위해:
- 예를 들어, 타이머나 네트워크 요청과 같은 비동기 작업에서 결과가 반환되기까지 시간이 걸리죠.
- 그동안 다른 코드는 계속 실행되지만, 결과를 받으면 그때 콜백 함수가 실행되어 결과를 처리합니다.
- 콜백 함수는 결과를 언제 실행할지 지정할 수 있기 때문에 비동기적인 작업이 끝난 후의 처리를 깔끔하게 할 수 있습니다.
- UI 처리나 사용자 상호작용에서 효과적:
- 예를 들어, 버튼 클릭 시 비동기 작업이 실행되거나, 화면을 업데이트하는 작업에서 콜백을 사용하면, 각 작업이 끝날 때마다 사용자에게 상태를 알려주는 등의 동기화된 UI 업데이트를 할 수 있습니다.
콜백의 장점:
- 작업 순서를 보장: 비동기적으로 작업을 처리할 때, 각 작업이 끝나고 순차적으로 다음 작업을 실행할 수 있게 도와줍니다.
- 코드 흐름 제어: 특정 작업이 끝나면 그에 대한 후속 작업을 처리할 수 있어 동기적인 흐름을 유지할 수 있습니다.
- 효율성: 비동기적으로 작업을 처리하므로, CPU가 작업을 기다리는 동안 다른 작업을 처리할 수 있게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>콜백 함수 예제</title>
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#message {
font-size: 24px;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>콜백 함수를 활용한 비동기 처리</h1>
<!-- 버튼: 클릭하면 작업이 시작됨 -->
<button id="startButton">시작</button>
<!-- 메시지를 표시할 요소 -->
<p id="message">버튼을 눌러 작업을 시작하세요.</p>
<script>
// 첫 번째 작업을 정의한 함수
function step1(callback) {
setTimeout(() => { // setTimeout을 사용하여 비동기적으로 작업 수행
document.getElementById("message").textContent = "Step 1 완료"; // 1초 후 "Step 1 완료" 표시
callback(); // 콜백 함수 실행 (다음 단계로 넘어가게 함)
}, 1000); // 1초 딜레이
}
// 두 번째 작업을 정의한 함수
function step2(callback) {
setTimeout(() => { // setTimeout을 사용하여 비동기적으로 작업 수행
document.getElementById("message").textContent = "Step 2 완료"; // 1초 후 "Step 2 완료" 표시
callback(); // 콜백 함수 실행 (다음 단계로 넘어가게 함)
}, 1000); // 1초 딜레이
}
// 세 번째 작업을 정의한 함수
function step3(callback) {
setTimeout(() => { // setTimeout을 사용하여 비동기적으로 작업 수행
document.getElementById("message").textContent = "Step 3 완료"; // 1초 후 "Step 3 완료" 표시
callback(); // 콜백 함수 실행 (모든 작업이 완료된 후 최종 메시지를 표시)
}, 1000); // 1초 딜레이
}
// 버튼 클릭 이벤트 리스너: 사용자가 버튼을 클릭하면 작업이 순차적으로 시작됨
document.getElementById("startButton").addEventListener("click", function() {
document.getElementById("message").textContent = "작업 시작..."; // 버튼 클릭 시 "작업 시작..." 표시
// 각 단계가 완료된 후 다음 단계로 넘어가기 위해 콜백 함수 사용
step1(() => { // 첫 번째 단계 시작
step2(() => { // 첫 번째 단계 완료 후 두 번째 단계 시작
step3(() => { // 두 번째 단계 완료 후 세 번째 단계 시작
document.getElementById("message").textContent = "모든 작업 완료!"; // 세 번째 단계 완료 후 "모든 작업 완료!" 표시
});
});
});
});
</script>
</body>
</html>
시연영상
'JavaScript' 카테고리의 다른 글
| [JavaScript] Debounce와 Throttle: 차이점과 활용 방법 (2) | 2025.03.10 |
|---|---|
| [JavaScript] 싱글톤 패턴 사용하기 (0) | 2025.02.17 |
| [JavaScript] 로컬 이미지 업로드 및 이미지 확대하여 모달창에 띄우기 (0) | 2025.02.12 |
| [JavaScript] 다중 Progress Bar와 전체 진행률 구현하기 (2) - 일시중지 및 삭제버튼 추가 (0) | 2025.02.05 |
| [JavaScript]TensorFlow.js로 고양이 이미지 판별 앱 만들기 (0) | 2025.02.04 |