4. 콜백함수 (2024. 4. 30.)
0. 기본정보
#스파르타코딩클럽 #부트캠프 #경과훈련일_12일/94일
- 학습주제: 「자바스크립트 종합반」 (4주차)
- 학습내용: 콜백함수
- 특별사항: [재제출] 자바스크립트 개인과제
- 학습일: 2024. 4. 30.
1. 배운 배용 요약 - 콜백함수 기초
1) 콜백 함수 개요
- 콜백 함수는 다른 함수의 인자로 전달되어, 특정 이벤트가 발생했을 때 호출되는 함수
- 즉, 제어권을 가지고 있는 함수가 콜백 함수를 호출하는 것
- 이를 통해 비동기 처리, 이벤트 핸들링, 고차 함수 등 다양한 프로그래밍 기법을 구현할 수 있습니다.
2) 콜백 함수의 기본 개념
- 함수 전달: 콜백 함수는 다른 함수의 인자로 전달됨. 이때 함수 자체가 전달되는 것이지, 함수의 실행 결과가 전달되는 것은 아님.
- 제어권 위임: 콜백 함수를 호출하는 권한은 콜백 함수를 전달받은 함수가 가지고 있음. 따라서 콜백 함수의 실행 시점과 방식을 제어할 수 있음
- 비동기 처리: 콜백 함수는 주로 비동기 처리에 사용됨. 비동기 작업이 완료되면 콜백 함수가 호출되어 결과를 처리할 수 있음
3) 제어권
(1) 호출시점 - 제어권을 넘겨받음
#함수 내부에서의 콜백함수 예시
var count = 0;
// timer : 콜백 내부에서 사용할 수 있는 '어떤 게 돌고있는지'
// 알려주는 id값
var timer = setInterval(function() {
console.log(count);
if(++count > 4) clearInterval(timer);
}, 300);
#변수선언으로 활용한 콜백함수 예시
var count = 0;
var cbFunc = function () {
console.log(count);
if (++count > 4) clearInterval(timer);
};
var timer = setInterval(cbFunc, 300);
// 실행 결과
// 0 (0.3sec)
// 1 (0.6sec)
// 2 (0.9sec)
// 3 (1.2sec)
// 4 (1.5sec)
<두 예시 정리>
| code | 호출 주체 | 제어권 |
| cbFunc(): | 사용자 | 사용자 |
| setInterval(cbFunc, 300); | setInterval | setInterval |
(2) 인자
(3) this
2. 오류일지 & 해결방법 : 없음
3. 오늘의 회고
- 칭찬: 자바스크립트 개인과제 해설 강의를 조각조각 분석하며 파먹은 것 🧐
그토록 바라던 해설 강의가 올라왔다. 완성본(예시) 코드도 살펴봤다.
'잉...? 내가 이런 코드를 짤 실력이 된다고...? 이거 강의만 듣고서 바로 따라칠 수 있는 과제 맞아...?'
왜 이런 코드를 짰는지 이해하려 해봐도 이해가 되지 않았다. 그래서 해설 강의를 뜯어먹다싶이 돌려봤다. 이해가 안 돼서 워드로 타이핑 치면서 하나씩 정리해갔다. 그렇게 8시간이 흘렀고, 결국 과제는 빈페이지로 제출했다.
하루 일과가 마무리 되어갈 즈음, 팀에서 미니발표회를 열었다. 각자의 개인 프로젝트를 설명하는 시간이었는데, 내 프로젝트가 제일 형편없었다. 너무 창피했지만 이 부정적인 감정을 기억하고 싶어 글을 남긴다.
언젠가 오늘의 치욕(?)을 웃으며 회상할 수 있는 날이 올거다. 더디고 모자르더라도... 버티자, 버티면 되는 거야.!
- 반성: '나에게 일주일의 시간만 있었으면..' 이런 희망사항은 그만..!
현재 내가 할 수 있는 최선을 생각하고, 실천하는 일에 집중하자.
- 보충: JS문법 종합 + 개인프로젝트 + 팀프로젝트 = 3가지 병행