01 - 25 일지

오전 : 문제풀이

특이사항

내장함수를 사용하는 범위폭을 늘리는 연습을 시행했다. 1시간 조금 넘는 시간 사이에 8개 문제를 풀었다. 대부분 내장함수 활용하는 문제들이라 딱히 기술할만한 특징은 없다.

 

오후 : 매니저 면담 및 인강 청취

특이사항

매니저와의 면담에서 지난 풀스택 미니프로젝트에 대한 불만을 언급했다. 팀원들과의 급이 너무 차이가 나서 작업에 큰 이바지를 못 했다고. 그러자 매니저께서 그때 같이했던 다른 팀원들의 나에 대한 평가를 열람해서 말씀해주셨는데, 모든 팀원들이 나에 대해 끝까지 집중한 것을 고평가하는 내용이었다. 조금이라도 도움이 될까 오랜 시간 자리를 지키고 있던 것이 팀원들 보기에 기특했던 것 같다. 다행이네...

인강에서는 this를 마저 마무리했다. 콜백은 또 언제 하냐....

왠만한 내용은 어제 정리를 했으니 기억나는 키워드만 정리하겠다.

apply()	call()
call과 비슷하지만 매개 변수로 배열을 받는다. 값을 받아오고 배열로 활용해야 하는 상황에서 쓰면 된다.	모든 함수에서 사용가능, 객체를 this로 정확히 고정 가능, 매개변수로 받아냄

저녁 : 콜백 함수에 대해 공부

특이사항

시작하자마자 '콜백지옥이란 무엇일까'하는 이름이 보이는 것이 섬짓하다. 강의에서는 '다른 코드의 인자로 넘겨주는 함수'라고 하는데, 구글링해보면 '파라미터로 함수를 전달받고, 함수 안에서 실행하는 함수'라고 하는 것을 보니 이런 식으로 이해하면 되지 싶다. 콜백 함수를 위임받은 코드는 내부 로직을 돌리며 콜백 함수를 적절한 시점에 실행에 옮긴다.

 
var count = 0;
var cbFunc = function () {
    console.log(count);
    if (++count > 4) clearInterval(timer);
};
var timer = setInterval(cbFunc, 300);
 

여기서 setInterval(cbFunc, 300);가 바로 콜백함수라고 할 수 있다. 호출된 cbFunc를 내부 로직(0.3초 만큼 기다림)에 따라 수행하는 것이다.

콜백 함수는 익명 사용이 원칙이라고 한다. forEach(function(){});에서 function(){}이 바로 익명 함수인데, 콜백 함수는 이를 사용하거나 함수의 이름만, ()없이 불러온다고 한다.

 

그리고 대망의 콜백 지옥, 동기적으로 작동하는 자바스크립트에서 비동기 프로그래밍 방식을 자주 사용할 때 발생하며, 함수의 매개변수로 넘기는 콜백 함수가 쌓이고 쌓이면 코드의 들여쓰기 수준이 끝장나게 깊어지는 상황을 말한다. 유니티에서 겪어봤던지라 낯설지만 익숙한 향기가 풍겨온다...

 이를 해결하기 위해서는 Promise를 사용하는 것이 좋다고 한다. Promise는 정상 수행 후 resolve를, 실패하면 reject가 실행된다고 한다. Promise를 쓰면 연속된 비동기 처리 작업을 관리하기 편해지며 유지 보수가 쉬워진다고 한다. 

//Promise 선언
var _promise = function (param) {
 
    return new Promise(function (resolve, reject) {
 
        // 비동기를 표현하기 위해 setTimeout 함수를 사용 
        window.setTimeout(function () {
 
            // 파라메터가 참이면, 
            if (param) {
 
                // 해결됨 
                resolve("해결 완료");
            }
 
            // 파라메터가 거짓이면, 
            else {
 
                // 실패 
                reject(Error("실패!!"));
            }
        }, 3000);
    });
};
 
//Promise 실행
_promise(true)
.then(function (text) {
    // 성공시
    console.log(text);
}, function (error) {
    // 실패시 
    console.error(error);
});

자세한 개념 이해를 위해 구글링 하던 중 가장 이해가 쉬운 구조를 긁어왔다.