[개발 공부 10일차] 콜백함수, 개인 프로젝트 시작

 

 

JS 문법 기초 강의는 어느 정도 들었다. 다 들은 건 아니지만 다른 분들 얘기 들어보니 개인 프로젝트부터 시작하는 게 맞을 것 같아서 이제 슬슬 시작하려고 한다. 아마 주말 내내 해야 하지 않을까... 싶다. 뭔가 이해도 다 안 된 상태에서 냅다 쫓기는 기분이긴 한데 최선을 다해보겠따..!

 

 

< 목차  >

1. 코드카타

   ㆍ 지금껏 C언어로 코딩 문제를 풀어온 건에 대하여..

 

2. 콜백함수

   ㆍ 콜백함수가 갖는 제어권

        1) 호출 시점

        2) 인자에 대한 제어권

        3) return에 대한 제어권

 

3. 금일 소감 및 내일 해야 할 일

 

 

 

1. 코드카타

지금껏 C언어로 코딩 문제를 풀어온 건에 대하여..

 

 

코드카타 첫날부터 문제가 너무 어려워서 혼자 백준Hub(프로그래머스 문제 풀면 자동으로 코드가 push됨)로 하지 않고 내 개인 GitHub로 push해서 답안 제출했다. 수, 목 2일간 그래왔다.. 오늘도 혼자 '와 오늘도 어렵네. 어떻게 강의 내용으로 풀 수가 없지?' 하며 다른 사람들은 20문제 정도까지도 푼 사람 있길래 내 머리를 탓하던 중 위 사진과 같이 오른쪽에 작게 C.........라고 적혀있는 것이다... 순간 '아.... 설마...' 했는데 지금까지 C언어로 풀고 있었던 것이다........

 

 

 

 

심지어 어렵사리 문제 풀고 나니 점수 많이 주길래 도파민에 취하기도 했다... 왜 혼자 배우지도 않은 C언어로 문제 풀면서 기뻐하는 건데..

 

C언어 몫 구하기 답안

 

 

자바스크립트 답안으로는 어떻게 해도 정답이 안 나와서 자바스크립트 답안을 보고 C언어를 예측해서 계속 풀고 있었다.. 이상, 3일간의 삽질이었다.

 

 

 

2. 콜백함수

오늘은 콜백함수에 대해 좀 더 깊이 있게 배우는 시간을 가졌다. 사실 깊게 들어갈수록 점점 난해해서 이해가 안 된다. 완강 후, 최소 3~5번은 더 봐야 할 듯하다. 오이오이.. 너무 어려운 거 아니냐구-! .. 하,,,,,,

 

 

콜백함수

: 다른 코드의 인자로 넘겨주는 함수
"너한테 제어권을 넘겨줄 테니 너가 알고 있는 그 로직으로 처리해서 보여줘"

제어권이 개발자가 아닌 콜백함수에게 있다. "아 멀라 너가 알아서 해"처럼 그냥 컴퓨터가 알아서 처리해서 보여준다고 생각하면 편할 듯하다.

 

▼  예문

setTimeout(function () {
    console.log("Hello");
}, 1000);

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function (number) {
    console.log(number);
});

 

 

 

 

그렇다면, '음 뭔 말인진 알겠는데 그래서 어떤 제어권을 갖는 건데?' 라는 의문이 들 수 있다.

 

 콜백함수가 갖는 제어권!

 1. 호출 시점 

 

setInterval

: '반복'해서 매개변수로 받은 콜백함수의 로직 수행

 

▼  예문

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

var timer = setInterval(cbFunc, 300); // setInterval에게 제어권, 호출주체가 있음

 

 

 

 2. 인자에 대한 제어권  

map

: 기존 배열은 그대로 두고 새로운 배열을 생성

 

▼  예문

var newArr = [10, 20, 30].map(function (currentValue, index) {
    console.log(currentValue, index);
    return currentValue + 5;
});

// 결과는 뭐가 될까?
console.log(newArr); // 결과값: [ 15, 25, 35 ]

 

 

 

 3. return에 대한 제어권  

▼  예문

Array.prototype.map123 = function (callback, thisArg) {
    // map 함수에서 return할 결과 배열
    var mappedArr = [];

    for (var i = 0; i < this.length; i++) {
        var mappedValue = callback.call(thisArg || global, this[i]);
        mappedArr[i] = mappedValue;
    }
    return mappedArr;
};

var newArr = [1, 2, 3].map123(function (number) {
    return number * 2;
});

console.log(newArr);

 

 

 

 

3. 금일 소감 및 내일 해야 할 일

일단 그래도 어느 정도 강의를 완강해가긴 해서 그나마 마음의 짐이 좀 덜어졌다. 하지만 개인 프로젝트가 기다리고 있었으니,,,, 월요일 14시 제출인데 09~12시까지 알고리즘 관련 프로그램 진행돼서 아마 월요일은 거의 수정이 어려울 듯하다. 그래서 주말에 어느 정도 완성하고 월요일에 특강 끝나자마자 튜터님들께 달려가서 질문 다발로 해야 할 듯,,, 물론 나 말고도 다른 사람들이 이미 질문하고 있어서 그냥 과제 제출하게 될 최악의 상황도 그려지긴 한다. 

 

아무튼 오늘은 개인 프로젝트 API 연결하고 HTML 수정 작업 가능한 만큼 하고 자야겠다. 피로가 쌓여서 8시간은 자고 싶다,,, 낼은 좀 자야징

 

주말엔 개인 프로젝트 내가 구현할 수 있는 선까지 최대한 빨리 완성하고, 남은 강의 완강한 뒤 재청강 할 수 있으면 하고, 주간 목표로 세운 세부적인 개발 공부 보충해야겠다.. 예상하기엔 주말에 개인 프로젝트 구현까지만 할 수 있을 것 같긴 하다. 달려보잣 으자잣!!!!! 파이팅