콜백... 이벤트... 뭐가 뭔데..

소프트폰 개발 도중 다음과 같이 콜백 함수를 등록(?)하는 sdk의 함수를 마주했다.

 this.agent.addOnActivatedCallback(function (agent) {
            console.log('===== Activated =====', agent);
        });

        this.agent.addOnDeactivatedCallback(function (agent) {
            console.log('===== Deactivated ===== ', agent);
        });

사실 마주한지 6개월이 넘었지만 지금까지 얼레벌레 써왔답니다~^^
알고 싶지 않았으니까요~^^
하지만 언제까지 이렇게 대충 살 수는 없기에 이참에 내가 헷갈리는 부분을 좀 정리해두려고 한다.

내가 이벤트와 콜백이 헷갈리는 이유는,

어떤 일이 발생하면 -> 이벤트 또는 콜백이 실행된다.

는 매커니즘이 똑같다고 여겨져서다. 물론 이 매커니즘도 내가 얼레벌레 알아서 잘못 이해하고 있는 것임..

이벤트

• 브라우저는 처리해야 할 특정 사건(이벤트)이 발생하면 특정 행동을 발생 시킴.
  ex) 클릭(이벤트)하면 이동하기 등
• 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(event handler)라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다.
  머릿속에 깎 집어넣어. 호출될 함수 = 이벤트 핸들러 / 브라우저에에 이벤트 핸들러의 호출을 위임하는게 이벤트 핸들러 '등록'
  ex) 사용자가 버튼을 클릭했을 때 어떤 함수를 호출해서 페이지 이동을 해야한다고 가정하면, 중요한 건 "언제 함수를 호출해야 하는가"가 중요하다. 왜냐면, 개발자 입장에서는 사용자가 언제 버튼을 클릭할 지 알 수 없지 않겠어요? ㅎㅅㅎ 다행히 브라우저는 버튼 클릭을 감지!할 수 있고 클릭 이벤트를 발생할 수 있다. 그렇기 때문에 이벤트 핸들로의 호출을 위임(등록)하는 것.

function onclick(event) {
	sayHi('Lee'); 
}

콜백 (Callback)

챗총각이 알려줌..
콜백은 함수를 다른 함수의 인자로 전달하고, 필요한 시점에 실행하는 것을 의미.
콜백은 비동기 작업에서 주로 사용되며, 특정 작업이 완료되었을 때 그 결과를 처리하거나 다음 단계의 작업을 수행할 수 있다.
(이 비동기 작업의 의미를 모르겠다.)

// 콜백 함수
function callbackFunction() {
    // 콜백 함수가 실행될 때 수행할 코드
}

// 다른 함수의 인자로 콜백 함수 전달
someFunction(callbackFunction);```

> 요약하자면, 이벤트 핸들러는 주로 DOM 요소와 관련하여 사용되며 특정 이벤트가 발생했을 때 실행됩니다. 반면에, 콜백은 함수를 다른 함수의 인자로 전달하여 필요한 시점에 실행되는 함수를 지칭하며, 비동기 작업에서 자주 사용됩니다.



```javascript
 this.agent.addOnActivatedCallback(function (agent) {
            console.log('===== Activated =====', agent);
        });

        this.agent.addOnDeactivatedCallback(function (agent) {
            console.log('===== Deactivated ===== ', agent);
        });

activated 이벤트가 발생 -> OnActivated에 등록된 함수(이벤트핸들러 또는 콜백 함수) 실행
agent는 sdk에서 agent를 알아서 세팅해서 파라미터로 전달해주겠다는 뜻인듯..

이벤트핸들러와 콜백은 큰 차이가 없는 것이.. 맞았다!