- 학습일 : 2024.02.07
- 참고 URL
학습 내용
- 콜백 함수 = 나중에 호출할 함수
- 자바스크립트 호스트 환경이 제공하는 여러 함수를 사용하면 비동기(asynchronous) 동작을 스케줄링 할 수 있음
- 원하는 때에 동작이 시작하도록 할 수 있음
- 문제 → 비동기 함수여서 이게 실행된다고 하더라도, 실행이 왼료됐는지를 파악할 수 없음
- 이를 예방하기 위해 콜백 함수를 사용
- 콜백 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Callback HTML</title>
</head>
<body>
<script>
function loadScript(src, callback) {
let script = document.createElement('script');
script.src = src;
script.onload = () => callback(script);
document.head.append(script);
}
// loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {
// alert(`${script.src}가 로드되었습니다.`);
// alert( _ ); // 스크립트에 정의된 함수
// });
loadScript('11-1-0-callbacks.js', script => {
alert(`${script.src }가 로드되었습니다.`);
alert( sayPCY() ); // 스크립트에 정의된 함수
});
</script>
</body>
</html>- 무언가를 비동기적으로 수행하는 함수는 함수 내 동작이 모두 처리된 후 실행되어야 하는 함수가 들어갈
콜백을 인수로 반드시 제공해야 함 - 에러 핸들링
- 단독 콜백이든, 콜백 속 콜백이든 에러를 늘 고려해야 함
- 콜백 안에서 먼저 에러를 처리하는 패턴을 오류 우선 콜백(error-first callback)이라 하며, 아례는 오류 우선 콜백의 관례임
callback의 첫 번째 인수는 에러를 위해 남겨둡니다. 에러가 발생하면 이 인수를 이용해callback(err)이 호출됩니다.- 두 번째 인수(필요하면 인수를 더 추가할 수 있음)는 에러가 발생하지 않았을 때를 위해 남겨둡니다. 원하는 동작이 성공한 경우엔
callback(null, result1, result2...)이 호출됩니다.
- 멸망 피라미드
- 콜백 기반 비동기 처리는 좋지만…
- 여러 중첩 호출이 이뤄진다면?(즉, 꼬꼬무식의 비동기 동작이 많아진다면?) ⇒ 안좋지…
- 따라서, 이럴 경우를 대비하여
- 각 동작을 독립적인 함수로 만들어라!
- 콜백 기반 비동기 처리는 좋지만…
느낀점
비동기 함수는 자주 사용되며, 이를 load시 실행이 되더라도 어느 타이밍에 실행이 되어 완료가 됐는지 모를 수도 있다. 이것을 하기 위해 콜백이 존재한다.
현재, 내가 사용하는 실무 프로젝트에서도 비동기 함수가 많이 존재한다. 비록 내가 실무에서 사용해 본 적은 없다. 다른 실무자가 사용한 것을 참고해야 겠다.
#Software Engineer #IRISH