Asynchronous Programming | callback hell | Improved Method Practice

모든 포스팅은 인프런 ECMAScript6: 빠르게 배우는 ES6 스킬과 비동기 프로그램 의 내용을 담고 있으며

출처는 아래의 주소로 "김형태"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

www.inflearn.com/course/es6-ecmascript-6

ECMAScript 6: 빠르게 배우는 ES6 스킬과 비동기 프로그래밍 - 인프런

---

 

1. callback hell

# 비동기 프로그래밍 

- 자바스크립트의 특징인 싱글스레드를 기반으로 함.

 

비동기란 특정 코드의 실행이 완료될 때까지 기다리지 않고, 다음 코드를 먼저 수행하는 것을 의미한다.

웹(web)용으로 작성된 언어로서 자바스크립트는 처음부터 클릭이나 키 입력과 같은 비동기 사용자 상호작용 이벤트에 응답할 수 있어야 했다. node.js는 이벤트 대신 callback을 사용하였다.

 

callback은 자바스크립트를 잘 지원하는 자바스크립트의 특징 때문에 가장 많이 사용되는 비동기 프로그래밍 양식이 되었다.

 

하지만 비동기 처리 로직을 위해 콜백함수를 연속해서 사용하면, 콜백 지옥이 발생되는 문제가 있다.

+ 예외를 처리하기 어려운 문제도 있음

 

ES6에서는 제너레이터와 프로미스를 제공하여 위와 같은 문제를 개선하고 있다.

 

- 비동기 프로그래밍을 위한 강력한 도구 제너레이트와 프로미스.

 

# 콜백 지옥

- 콜백 함수를 연속사용하여 발생.

- 콜백함수를 다른 함수로 전달하는 순간 그 콜백함수에 대해 제어권 상실

 

웹 서비스를 개발하다 보면 서버에서 데이터를 받아와 화면에 표시하기까지 인코딩, 사용자 인증 등을 처리해야 하는 경우가 있다.

만약 이 모든 과정을 비동기로 처리해야 한다고 하면 다음과 같이 콜백 함수를 연속으로 사용하는 방식을 사용하게 된다.

콜백함수를 다른 함수로 전달하는 순간 그 콜백함수에 대한 제어권을 잃게 된다.

이와 같은 코드 구조를 콜백지옥이라고 한다. 콜백지옥은 다음과 같은 문제점들이 있다.

- 가독성 떨어짐

- 에러 발생이 쉬움

- 디버깅이 어려워짐

 

콜백지옥을 벗어나려면 ?

# 각각의 함수로 구분

코딩 패턴으로 콜백함수 분리

- 싱글스레드인 자바스크립트지만, 앞에 콜백지옥의 예시를 개선해보기위해 중첩해서 선언했던 콜백 익명함수를 

각각의 함수로 구분해 받아와보자.

- validator 함수는 키 입력을 받은 데이터를 처리한다.

- 결과 값인 user가 전달되고 register 함수로 등록을 마친다.

- user를 가지고 display를 호출하면 결과가 출력된다.

 

하지만 자바스크립트에서 항상 이러한 방식으로 처리할 수는 없다. 앞서 학습했던 promise를 활용하여 바꿔 보자.

 

# Promise

- 프로미스로 비동기 처리

다음과 같이 프로미스는 웹 애플리케이션을 구현할 때 서버에서 받아온 데이터를 화면에 표시할 때 주로 사용된다.

하지만 화면에서 서버로 데이터를 요청했을 때, 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행하지 않고 대기할 수는 없다.

 

또한 이 코드보다 앞서 보았던 코드가 훨씬 직관적이고 이해하기 쉽다.

 

 

# Generator

- 제너레이터로 비동기 처리

제너레이터 함수로 만들면 훨씬 더 직관적이고 알아보기가 쉬워진다.

제너레이터 함수 호출로 생성된 이터레이터의 next 메서드를 호출하여 yield 구문에 validator가 완료되면

실행을 멈추고 제어권을 넘겨줄 것이다.

 

그런데 이후 실행이 계속되려면  validator함수 안에서  직접 next() 메서드를 호출 할 수 밖에 없게된다.

이것은 콜백 패턴과는 또 다른 의미의 제어권 상실이라고 볼 수 있다. 

 

그렇다면 두개를 함께 사용하면 어떨까?

 

# Generator와 Promise를 결합

이번에는 모든 함수가 프로미스를 반환하도록 하였다.

이제 next()메서드를 호출하면 yield구문의 validator 함수가 실행되어 프로미스가 리턴 될 것이다

이 프로미스가 이행이 되면 then 메서드가 실행이 된다.

 

이 과정을 외부에서 제너레이터가 끝날 때까지 반복해서 실행시켜주면, 각각의 함수가 제어권을 직접 다루지 않는 것이 가능해진다.

 

 

2. Improved Method Practice

 

마지막 예제코드 작성하기

const util = {};

util.logThunk = function(message){
	return message;
};

function procPromise(data,action){
	return new Promise(function (resolve, reject){
    	!!data ? resolve(data): reject(action);
    });
}

const userValidator = function(){
	let isValid = true;
    let validationError = {
    	error: {}
    };
    const user = {
    	id: "haeun",
        password: "abcd1234"
    };
    return{
    	userIsValid: function(){
        	if(user.id =='' || user.password =='' || user.password.length<10){
            	isValid = false;
                validationError.errors.message = 'userValidator fail';
            }
            if(!isValid){
            	return procPromise(isValid, util.logThunk(validationError.errors.massage));
            }
            else return procPromise(user);
     }
   }
}
           
const userRegister = function(user){
	let success = true;
    let massage = "";
    return {
    	registerUser: function(user){
        	if(res = false){
            	success = res;
                message = "registerUser fail!";
                return procPromise(success, util.logThunk(message));
                }
                else return proPromise(success);
            }
    };
};

const userDisplay = (user) => {
	let success = true;
    let message = "";
    return {
    	showRegistrationThankYou: function(user){
        	if(err = false){
            	success = err;
                message = "showRegistrationThankYou fail";
                return procPromise(success,util.logThunk(message));
            } else{
            	//document.getElementById("").innerHTML = "";
                message = `${user.id}님 안녕하세요.`;  
                return procPromise(message);
            }
        }
    };
};

const users = {};
users.registration = function (validator, register, display) {
	return {
    	validateAndRegisterUser: function* () {
        	const user = yield validator().userIsValid();
            yield register().registerUSer(user);
            yield display().showRegistrationThankYou(user);
        }
    };
};

const runner = (genFunc) => {
	try {
    	if (genFunc.constructor.name !=="GeneratorFunction") {
        	throw new Error(genFunc + "은 제너레이터가 아닙니다.");
        }
        let myIter = genFunc();
        let returnOfNext = {};
        const runNext = (genObj) => {
        	returnOfNext = myIter.next(genObj);
            console.log('myIter : ', returnOfNext);
        };
        (function run(genObj) {
        	runNext(genObj);
            if(!returnOfNext.done) {
            	returnOfNext.value.then(run)
                	.catch(function(err){
                    	console.log('then error : ', err);
                    });
            }else {
            	return console.log('end generator');
            }
        })();
    }
    catch (e) {
    	console.log("error : " + e.message);
        return;
    }
};
runner(users.registration(userValidator, userRegister, userDisplay).validateAndRegisterUser);
     
            

즉, next(), yield, then() 순서로 순환에 따라 실행되는 것이다.

 

 

# 정리하기

프로미스는 비동기 작업이 리턴할 수 있는 공통 인터페이스를 제공하며

제너레이터는 yield연산자를 사용하여 비동기 응답을 기다리고 적절하게 응답할 수 있다.

제너레이터와 프로미스를 결합할 때 비동기 프로그래밍에 더욱 유용한 도구가 되는 것을 확인할 수 있다.