[TIL] 2024.01.03

1. 콜백함수

• 콜백함수 (forEach, setTimeout)등은 제어권이 이들한테 있음.
• call - back = 제어권을 넘겨줄테니까 너가 알고 있는 그 로직으로 처리해 !!
• setTimeout = 1 초후 console.log()를 찍어줘
• forEach = 반복하는 로직을 알아서 처리해.
• 인자를 넘겨서 제어권을 위임한 함수.
• 즉 제어권이 있는 위임받은 코드가 알아서 하는 거다.

// 근데 어떤 제어권을 가질까?

// 1. 호출 시점에 대한 제어권을 갖는다.

// setInterval 함수는 반복해서

let count = 0;

let timer = setInterval(function(){         // 얘가 제어권을 가지고 있음.

    console.log(count);

    if(++count>4) clearInterval(timer);     // 5가 돼서 4보다 커지니까 clearInterval이 실행 됨.

},300);         // 0.3초 간격으로

// 이 timer를 멈추려면 클리어 인터벌을 해줘야됨.

 

let count = 0;

let cbFunc = function () {

    console.log(count);

    if (++count > 4) {

        clearInterval(timer);

    }

}

let timer = setInterval((cbFunc), 300);   // 콜백함수로 넣었을때는 이렇게 된다.

 

code 호출 주체 제어권

cbFunc();	사용자	사용자
setInterval(cbFunc, 300);	setInterval	setInterval

 

- map

// 제어권 2번째

// 인자에 대한 제어권을 갖는다.

// map 함수. 배열에 대한 메서드. 배열의 하나하나를 순회하면서

// 가공해서 새로운 배열을 나타내는게 map(새로운 배열을 생성하는것)

let newArr = [10, 20, 30].map(function(currentValue, idx){

    console.log(currentValue,idx);      // 첫번째 인자는 하나씩 순회하는거고 idx는 0,1,2로 들어옴

    return currentValue +5;

})

console.log(newArr);                    // return 값을 currentValue + 5 시켜서 15, 25, 35 가 들어온다.

 

// 이렇게 찍으면

// idx : 사람이 이해할 수 있는 변수명일 뿐

// currentValue : 사람이 이해할 수 있는 변수명일 뿐

let newArr = [10, 20, 30].map(function(idx, currentValue){

    console.log(idx, currentValue);      // idx가 첫번째에 있어도 currentValue로 인식하게 된다.

    return currentValue +5;              

})

console.log(newArr);                     // return 값을 currentValue + 5 시키면 idx 가 더해져 5,6,7 이 들어온다.

// 즉, 명세서에 나와있는데로 그대로 써야한다.

// 인자에 대해 제어하려고해도 함수를 만든 map만이 콜백함수에 대한 인자의 제어권을 가지고 있는것.

// 인자의 순서까지 코드에게 귀속되어 있음. 즉,map의 규칙에 맞게 호출해야함.

 

- 콜백 함수 내부의 this에 바인딩하기

var obj1 = {

    name: 'obj1',

    func: function () {

        console.log(this.name);

    }

};

//함수 자체를 obj1에 바인딩

//obj1.func를 실행할 때 무조건 this는 obj1로 고정해줘!

setTimeout(obj1.func.bind(obj1), 1000);

var obj2 = { name: 'obj2' };

//함수 자체를 obj2에 바인딩

//obj1.func를 실행할 때 무조건 this는 obj2로 고정해줘!

setTimeout(obj1.func.bind(obj2), 2000);

 

- 콜백 지옥이란?

콜백은 익명함수에 익명함수 매개변수 자리에 익명함수가 계속 들어가면 들여쓰기가 들어감.

그 깊이가 깊어지면 깊어질수록 지옥이라한다. (수정이 어려워짐 즉, 유지보수 어려움 ㅜㅜ)

 

- 동기(sync) vs 비동기(async)

동기와 비동기의 개념은 동기가 아닌 것이 비동기다.

• 동기 : 현재 실행중인 코드가 끝나야 다음 코드로 실행하는 방식
• 비동기 : 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
  (별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드)
  (setTimeout, addEventListner)
• 통신이 들어간 것들은 대부분 비동기적 코드
• 복잡도가 올라갈 수록 비동기적 코드의 비중이 늘어난다

// 비동기적 코드의 이해!

setTimeout(function() {

    console.log("여기가 먼저 실행될가!?!?!");

}, 1000)                                   // 1초가 지난 후에 실행 됨

console.log("여기 좀 봐주세요 !!! ")        // 여기를 먼저 받아두고

 

- Promis란?

비동기 처리에 대해, 처리가 끝나면  알려달라는 '약속' 이다.

• new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행됨
• ()안에 resolve(성공) 혹은 reject(실패) 함수를 호출하는 구문이 있을 경우 resolve 혹은 reject가
  실행되기 전까지는 then(다음), catch(오류)로 넘어가지 않게됨. 즉, 약속을 하듯이 넘어가는거임
• 따라서, 비동기작업이 완료될 때 비로소 resolve, reject 호출함

 

new Promise(function(resolve){      // 내부에서 실행하기때문에 실패할 일 없어 resolve

    setTimeout(function(){          // 콜백함수 선언

        let name = "에스프레소";

        console.log(name);

        resolve(name);                  // resolve를 실행해줌으로써 다음 약속으로 가게 해줌.

                                        // resolve를 했단 얘기는 다음 .then으로 넘겨 받을 수 있다는 얘기.

    }, 500)

}).then(function(prevName){             // prevName == 이전 이름

                                        // 이 안에서 새롭게 Promise를 만든다!!

    return new Promise(function(resolve){      

        setTimeout(function(){        

            let name = prevName + ", 아메리카노";

            console.log(name);

            resolve(name);                

        }, 500)

    })

})

 

위 코드 처럼 작성된 .then을 그대로 아래에 복붙

}).then(function (prevName) {        

    return new Promise(function (resolve) {

        setTimeout(function () {

            let name = prevName +  ", 카페모카";

            console.log(name);

            resolve(name);

        }, 500)

    })

}).then(function (prevName) {          

    return new Promise(function (resolve) {

        setTimeout(function () {

            let name = prevName + ", 카페라떼";

            console.log(name);

            resolve(name);

        }, 500)

    })

})

 

- refactoring

// refactoring

// re : 다시

// 바뀌는 부분만 변수 받기 그걸 name 인자로 받는거임

// 결국엔 로직 하나를 리턴하고 바뀌는 부분을 바꿔주는 방식

let addCoffee = function (name) {

    return function (prevName) {

        return new Promise(function (resolve) {

            setTimeout(function () {

                 // 백틱 `` 사용하기

                let newName = prevName ? `${prevName}, ${name}` : name;

                console.log(newName);

                resolve(newName);

            }, 500);

        })

    };

};

addCoffee("에스프레소")()

    .then(addCoffee("아메리카노"))

    .then(addCoffee("카페모카"))

    .then(addCoffee("카페라떼"));

 

 

오늘 느낀점

오늘 시작은 알고리즘을 필두로 4주차 문법 강의를 듣는데 집중했다.

알고리즘은 기초적인건 금방금방 풀어 나갔는데, 배열의 평균값 부터는

알고있던 내용을 까먹어 풀어내는데 시간이 좀 걸렸다.

 

복습이 필요하다.

 

4주차 강의를 들으면서 느낀점은 기본적인 문법을 웹개발 종합반에서는

엄청 쉽게 접했었는데? 생각했다.  웹종반에선 숙숙 쓰던 코드들을

이론적으로 파해치면서 분석하다보니 훨씬 더 어렵게 느껴진다.

내일부턴 개인과제를 진행하며 기존에 배웠던 함수와 문법들을 적용해보도록 하자.