배움 __IL/addtionalFrontEnd

비동기적프로그래밍 정리해보기

Mo_bi!e 2023. 1. 19. 22:36

I. 작성취지

목적 : 이번에 만든 게임프로젝트에서 이벤트리스너핸들러 방식으로 만들지 않은 것이 무엇인지 찾고, 리팩토링 해보기

 

 

II. 비동기적 자바스크립트

1. 비동기적 프로그래밍

What (정의) : 기존의 작업이 끝나지않고 실행되는 동안에도, 다른 이벤트에 응답할 수있게 하는 기술

Why (존재이유) : 동기적 프로그래밍에서는 작업량이 큰 작업(장기실행 동기함수)이 있는 경우 다른 작업을 하기위해서는 이전 작업이 끝나고 난 뒤에 가능하다.

How (방법) : 이벤트리스너이벤트 핸들러를 이용한다. 그리고 콜백함수

e.g. (예) :

 

2. 이벤트 처리기 (이벤트핸들러 / 함수)

What (정의) : 이벤트가 발생한 경우 이벤트리스너가 호출하는 함수를 의미한다. 즉 비동기호출함수이다.

Why (존재이유) : 비동기프로그래밍을 하기 위해

How (방법) : 이벤트 발생을 이벤트리스너로 듣고, 호출한다.

e.g. (예) : 

 

3. 이벤트 기반 프로그래밍 : EDP (Event Driven Programing)

What (정의) : 이벤트 감지 후 이를 대응하기 위한 처리(함수)를 호출해야하는데 이 함수를 미리 등록하는 것.

Why (존재이유) : 이벤트 감지와 대응 위해서

How (방법) : 이벤트 리스너 콜백함수등록(즉 이벤트 리스너에 등록된 콜백함수)을 이벤트 핸들러라고한다.

e.g. (예) : 일본은 지진이 많은나라이다. 지진을 미리 예측할수는 없는데, 지진(이벤트)이 일어난 경우 지진을 감지(이벤트리스너)하면, 미리 작성한 메뉴얼(이벤트핸들러 <= 콜백함수)이 있다. 

 

4. 이벤트 핸들러 등록(처리방식)

예...

우선 이벤트란 유저, 브라우저가 취하는 동작을 의미한다.

이러한 이벤트에 핸들러를 등록할 경우에 'on'으로 시작해야한다 (e.g. onclick...)

 

함수호출하는 형태 , 함수 자체를 전달하는 형태

두가지의 가장 큰 차이는 인자 여부에 따라서 차이가있다

 

인자가 있다면() 콜백함수를 이용하고, 인자가 없다면() 함수자체를 전달하면된다

 그 이유는 인자()가 있는데 함수 자체를 전달하게 되면 함수 호출이 된다. 결국 이러한 호출은 상태 값등이 변할 수있다.