# 콜백

## 개요
JavaScript에서 **콜백**(Callback)은 다른 함수의 인수로 전달되어 나중에 실행되는 함수를 의미합니다. 이는 비동기 처리, 이벤트 리스너, 고차 함수 등 다양한 상황에서 활용되는 핵심 개념입니다. 단일 스레드 기반의 JavaScript에서 비동기 작업을 효과적으로 관리하기 위해 콜백이 필수적입니다.

---

## 콜백 함수의 개념

### 기본 구조
```javascript
function mainFunction(callback) {
  // 작업 수행
  callback(); // 콜백 실행
}

mainFunction(() => {
  console.log("콜백 실행됨");
});
```

### 특징
- **매개변수로 전달**: 콜백 함수는 일반적으로 다른 함수의 인수로 전달됩니다.
- **실행 시점 유연성**: 호출되는 시점을 부모 함수가 결정합니다.
- **비동기 작업 처리**: 네트워크 요청, 타이머, 사용자 입력 등을 처리할 때 주로 사용됩니다.

---

## 동기와 비동기 콜백

### 동기 콜백 (Synchronous Callback)
작업이 순차적으로 완료되는 경우 사용됩니다. 예: 배열 메서드
```javascript
const numbers = [1, 2, 3];
numbers.map(num => num * 2); // [2, 4, 6]
```

### 비동기 콜백 (Asynchronous Callback)
작업 완료 후 특정 시점에 실행됩니다. 예: `setTimeout`, `addEventListener`
```javascript
setTimeout(() => {
  console.log("1초 후 실행");
}, 1000);
```

| 유형       | 실행 시점       | 예시                |
|------------|----------------|---------------------|
| 동기 콜백   | 즉시 실행       | `Array.map()`, `filter()` |
| 비동기 콜백 | 조건 충족 시    | `fetch()`, `addEventListener()` |

---

## 콜백 헬 (Callback Hell)

### 문제점
중첩된 콜백으로 인해 가독성과 유지보수가 어려워지는 현상입니다.
```javascript
firstFunction(args, () => {
  secondFunction(args, () => {
    thirdFunction(args, () => {
      // 복잡한 로직
    });
  });
});
```

### 해결 방안
1. **이름이 있는 함수 분리**
   ```javascript
   function stepThree() { /* ... */ }
   function stepTwo() { thirdFunction(args, stepThree); }
   function stepOne() { secondFunction(args, stepTwo); }
   firstFunction(args, stepOne);
   ```

2. **프라미스(Promise) 사용**
   ```javascript
   firstFunction(args)
     .then(() => secondFunction(args))
     .then(() => thirdFunction(args));
   ```

3. **async/await 구문**
   ```javascript
   async function execute() {
     await firstFunction(args);
     await secondFunction(args);
   }
   ```

---

## 콜백과 에러 처리

### 전통적 방식
비동기 콜백에서는 에러를 직접 처리해야 합니다.
```javascript
fs.readFile('file.txt', (err, data) => {
  if (err) {
    console.error("파일 읽기 실패", err);
    return;
  }
  console.log(data);
});
```

### 프라미스 기반 처리
```javascript
fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => console.error("에러 발생:", error));
```

---

## 관련 문서
- [MDN Web Docs - Callback](https://developer.mozilla.org/ko/docs/Glossary/Callback_function)
- [JavaScript 비동기 프로그래밍](https://ko.javascript.info/async)
- [async/await 심화 학습](https://ko.javascript.info/async-await)

---

## 결론
콜백은 JavaScript의 핵심 패러다임 중 하나로, 비동기 처리와 함수형 프로그래밍을 가능하게 합니다. 하지만 과도한 중첩은 코드 복잡도를 증가시키므로 **프라미스**나 **async/await**과 같은 현대적인 방법을 적극 활용하는 것이 좋습니다.