[Javascript] 커스텀 이벤트, 비동기 처리 Promise

비동기프로그래밍 관련한 설명을 잘 풀어서쓴 유투브영상 주소 첨부드립니다~ 

(https://www.youtube.com/watch?v=m0icCqHY39U&feature=youtu.be)

 

[모던자바스크립트] 15.7 커스텀 이벤트(사용자 정의 이벤트)

: 객체 지향 프로그래밍에서 객체와 객체 사이의 관계를 느슨하게 연결하는 수단으로 사용되고 있습니다.

 

15.7.1 커스텀 이벤트를 생성하는 방법 

: 독자적인 이벤트를 생성해서 원하는 타이밍에 발생시킬 수 있습니다.

 

1. createEvent()로 이벤트 객체 생성 

2. 초기화 함수 안에서 이벤트 객체를 초기화

3. 이벤트를 받을 요소 객체에 대해 dispatchEvent() 호출 후 이벤트를 보냅니다 (dispatch)

//객체 생성
var event = document.createEvent(type);

// 생성된 이벤트 객체는 해당 이벤트의 타입에 따라 별도의 초기화 메서드로 초기화 작업을 해야합니다.
event.initEvent(type, bubbles, cancelable)


//버블링을 하면서 취소할 수 없는 클릭 이벤트 객체를 생성 후 초기화하는 코드 작성 예
var event = document.createEvent("HTMLEvents");
event.initEvent("click", true, false);

//이벤트 보내기 : 이벤트 객체 생성하고 초기화 작업을 끝낸 후에는 이벤트 타깃 요소를 상대로 이벤트를 보냅니다. 
//        	   이벤트는 요소 객체의 dispatchEvent메서드로 보냅니다.
      
target.dispatchEvent(event);

• type          : 이벤트 유형을 뜻하는 문자열 ("click","mouseup" 등)
• bubbles     : 버블링할지를 나타내는 논리값
• cancelable : 취소할 수 있는 이벤트로 만들지를 나타내는 논리값

type으로 사용할 수 있는 주요 값 표

type	설명	이벤트 객체의 초기화 메서드
"UIEvents"	사용자 인터페이스 이벤트	event.initUIEvnet
"MouseEvents"	마우스 이벤트	event.initMouseEvnet
"TextEvent"	텍스트 이벤트	event.initTextEvent
"KeyboardEvent"	키보드 이벤트	event.initKeyboardEvent
"MutationEvents"	변이 이벤트	event.initMutationEvents
"HTMLEvents"	HTML 이벤트	event.initHTMLEvents
"CustomEvent"	사용자 지정 이벤트	event.initCustomEvent

 

Chrome, firefox 예제

// 이벤트 생성
var event = document.createEvent('Event');
event.initEvent('test', true, true); // 이벤트 이름은 'test'
 
// 이벤트 리스너 등록
document.addEventListener('test', function (e) {
    alert('test 이벤트 발생');
}, false);
 
// 이벤트 호출
document.dispatchEvent(event);

 

IE 예제 (IE 구버전에서는 createEventObject 라는 함수를 사용합니다.)

// 이벤트 생성
var event = document.createEventObject();
 
// 이벤트 리스너 등록
document.attachEvent('test', function (e) {
    alert('test 이벤트 발생');
});
 
// 이벤트 호출
document.fireEvent('test', event);

 

 

See the Pen qBbQyyd by jeongahlee (@jeongahlee) on CodePen.

 

 

 

 

 

 

15.7.4 커스텀 이벤트와 표준 이벤트의 차이점

: 사용자가 클릭 등의 행위로 발생시킨 표준 이벤트와 자바스크립트 코드로 보낸 커스텀 이벤트는 이벤트 객체의 isTrusted 프로퍼티로 구별할 수 있습니다. isTrusted 값이 True 면 표준 이벤트. false 커스텀 이벤트 입니다.

 

15.7.5 커스텀 이벤트 용도

: dispatchEvent() 이벤트를 보내면 동기적으로 실행 됩니다. 

객체 지향 브로그래밍에서는 프로그램을 객체단위로 작성합니다. 객체와 객체는 상호 간의 통신 결과를 바탕으로 프로그램을 동작시킵니다.

객체와 객체가 통신하는 주요 수단은 인수로 콜백 함수를 넘기는 것이며 또 다른 통신 방법이 바로 커스텀 이벤트를 보내는 것입니다.

즉, 한쪽 객체에서는 이벤트를 발생시키고 다른 객체에서는 그 이벤트를 처리하는 이벤트 리스너를 등록해서 처리하는 식입니다.

이 방법을 사용하면 객체와 객체 사이의 통신 수단을 크게 고민하지 않아도 되며, DOM이 제공하는 표준적인 방법을 사용해서 객체와 객체가 통신하도록 만들 수 있습니다. 

 

 

출처: https://includestdio.tistory.com/41 [includestdio]

 

 

 

15.8 비동기 처리를 간결하게 작성하는 Promise

: ECMAScript6부터 추가된 Promise

: 복잡하게 중첩된 코드를 알아보기 쉽게 작성할 수 있습니다.

 

15.8.1 비동기 처리의 예

//setTimeout, addEventListener

console.log("a");
setTimeout(function(){ console.log("b"); }, 0);
console.log("c")

// a > c > b
// setTimeout함수로는 인수로 받은 함수를 일정 시간이 흐른 후에 실행하도록 예약하는 처리만 하고,
// 그 다음에는 곧장 다음 코드가 실행되기 때문입니다. 
// 앞 코드는 0초 후에 실행하도록 성정이 되어 있지만 실제로는 0초 후에 실행되지 않습니다.
// 호출 스택에 실행 문맥이 남아 있을때는 
// 그 작업이 끝날 때까지 기다렸다가 0초 후에 가능한 빨리 실행 되기 때문입니다.


//이러한 상황해서 코드를 싱행 순서에 따라 실행하고자 할때는 주로 콜백 함수를 중첩하는 방법을 사용합니다.

function sleep(callback){
	setTimeout(function(){
		callback();
	}, 1000);
}

sleep(function(){
	console.log("A");  //1초후 A
	sleep(function(){
		console.log("B"); //그다음 1초후 B
		sleep(function(){
			console.log("C"); //그다음 1초후 C
		})
	})
	
})

// A > B > C
// 이 예를 볼 수 있듯이 여러개 중첩하면 작업 내용을 이해하기 어려워집니다. 
// 이를 가리켜 '콜백 지옥(callback Hell)' 이라고도 부릅니다.

 

15.8.2 Promise 기본

: 비동기 처리를 실행하고 끝난 후 다음 처리를 실행하기 위한 용도로 사용합니다.

//Promise 객체 생성 (생성자 사용법)
var promise = new Promise(function(resolve, reject) {...});



var promise = new Promise(function(resolve, reject){
	setTimeout(function(){
		console.log("Promise_A");
		resolve();  //함수가 실행되면 then 메서드에 등록한 함수가 호출됩니다.
	}, 1000)
})
promise.then(function(){
	console.log("Promise_B");
})

// Promise_A > Promise_B


//promise 종로시키는 resolve 함수와 then 메서드

//resolve 함수는 Promise를 종료 시킵니다.
//resolve 함수에 인수로 넘긴 값은 then메서드에 인수로 넘긴 함수에 전달되어
// 다음 처리를 위해 사용됩니다.

promise.then(onFullfilled);

var promiseR = new Promise(function(resolve, reject){
	setTimeout(function(){
		var name = prompt("이름을 입력하세요");
		resolve(name);
	}, 1000);
});
promiseR.then(function(name){
	console.log("안녕하세요." + name + "님");
})


//Promise 를 싱패로 처리하는 reject함수와 catch메서드
//reject함수는 Promise를 종료시킵니다.
//resolve 함수와 마찬가지로 값을 넘길 수 있습니다.
//reject함수가 실행되면 THEn메서드에 넘긴 함수는 실행되지 않습니다.
//그대신 catch메서드에 넘긴 함수가 실행됩니다.

promise.catch(onRejected);



var promiseT = new Promise(function(resolve, reject){
	setTimeout(function(){
		var n = parseInt(prompt("10미만의 숫자를 입력하십시오")); //1초후에 입력 대화상자 표시
		if(n <= 10){
			resolve(n);
		} else {
			reject(`오류 : ${n}은 10이상입니다. `)
		}
	}, 1000);
})
promiseT.then(function(num){  // 10미만이면 then 실행
	console.log(`2^${num} = ${Math.pow(2,num)}`);
})
.catch(function(error){  //10이상이면 catch 실행
	console.log(error);
})



//then의 두번째 인수 : 두 번째 인수로 실패 콜백 함수를 지정할 수 있습니다.
promise.then(onFullfilled, onRejected);



var promiseN =  new Promise(function(resolve, reject){
	setTimeout(function(){
		var number = prompt("10미만의 숫자를 입력하십시오") 
		if(number <= 10){
			resolve(number);
		} else {
			reject(`오류 : ${number}은 10 이상입니다.`);
		}
	}, 1000);
})

promiseN.then(
	//처리가 성공적으로 끝났을 때 호출되는 콜백 함수
	function(num){
		console.log(`2^${num} = ${Math.pow(2, num)}`);
	},
	function(error){
		console.log(error)
	}
)

• resolve : 함수 안의 처리가 끝났을 때 호출해야하는 콜백 함수. 어떠한 값도 인수로 넘길 수 있음. 이 값은 다음 처리를 실행하는 함수에 전달 됩니다.
• reject : 함수 안의 처리가 실패했을 때 호출해야하는 콜백 함수. 어떠한 값도 인수로 넘길 수 이음. 대부분의 경우 오류 메시지 문자열을 인수로 사용합니다.
• onFullfilled함수 : 성공 콜백 함수 라고 하며 promise 안의 처리가 정상적으로 끝났을 때 호출 되는 함수 입니다. 인수로듣 response를 받습니다. 

예시 코드펜 : https://codepen.io/jeongahlee/pen/NWxE

 

See the Pen [Javasccript] Promise 비동기 처리 연결 계산 예시 by jeongahlee (@jeongahlee) on CodePen.

 

 

 

 

Promise.all() :  비동기 처리 여러 개를 병렬로 실행 할 수 있습니다. 모든 처리가 성공적으로 끝났을 때만 다음 작업을 실행하도록 만들수 있습니다. 

Promise.all(iterable);

iterable :  Promise 객체가 요소로 들어 있는 반복 가능한 객체입니다. (객체를 병렬로 실행) 

 

 

Promise.race() : 가장 먼저 종료한 Promise 객체의 결과만 다음 작업으로 보냅니다. 

먼저 종료한 작업이 성공했을 때는 성공 콜백 호출, 실패시에는 실패 콜백 호출 합니다. 

가장 먼저 종료한 작업의 결괏값만을 반환합니다.

Promise.race(iterable);