해커와 화가를 읽다.

책을 하나 읽게 되었습니다. 해커와 화가라는 책입니다. 2003년에 집필된 꽤 오래된 책 입니다. 15개의 저자의 에세이를 책으로 만들어 집필한 것으로 알고 있는데, 가장 영향을 많이 받은 챕터는 "02 / 해커와 화가 : 해커는 화가, 소설과 건축가와 같은 예술 창조자다" 와 "05 / 또 하나의 길 : 웹 기반 소프트웨어가 준 두번째 기회" 였습니다.

02 해커와 화가 - 재미있어 보였다.

챕터 2 해커와 화가에서 저자가 말하는 것은 프로그래머도 결국 예술가와 같다는 것이었습니다. 예술가와 과학자는 차이점이 있습니다. 과학자는 무언가 만들기전에 철저하게 과정을 설계하고 준비하고 시작합니다. 반면에 예술가가 어떤 그림을 그릴 때에는 완벽한 무언가를 설계하고 시작하기 보다는 우선 그림 그리기를 시작하고 봅니다. 그리고 마음에 들지 않는 부분은 조금씩 지우고 새로 그리고 이렇게 다듬고 발전시키며 예술을 완성시킵니다.

프로그래머가 완벽한 설계를 하고 그에 따라 프로그래밍을 하는 것이 맞는지, 아니면 예술가처럼 일단 코딩을 시작하고 고쳐가는게 맞는지. 옳다 그르다는 잘 모르겠습니다. 하지만 분명한 건, 후자(예술가처럼)로 코딩을 하면 매우 재밌다고 생각합니다. 내가 생각한대로 짰는데 그대로 동작하면 그대로 재밌고, 그렇게 동작 안하면 왜 동작안하는지 찾고, 이해하고, 디버깅에 성공해서 원하는 동작대로 만들면 성취감이 있습니다.

경우에 따라 다르겠지만 매우 신뢰성 높고, 엄청 많은 사람이 협력해야 하는 프로그램을 작성해야 할 때, 예술가처럼 프로그래밍하면 문제가 있을 순 있어 보입니다. 이런 상황에서는 완벽한 설계를 하고 코딩하는게 좋아 보입니다. 반대로 스타트업이나 빠르게 무언가를 만들어내야하는 상황에서는, 시간이 생명인 스타트업에서 완벽한 설계를 하다가 망해버리고 말 겁니다. 여기선 예술가처럼 프로그래밍 해야겠죠.

책을 읽고 전 예술가적인 프로그래머를 지향하기로 했습니다. 이유는 무엇보다 재미있기 때문입니다. 예술가적인 프로그래머가 되려면 Front-End가 적합하다고 생각합니다. Back-End는 빠른 Develop보다 훨씬 중요한 게 신뢰성입니다. 이 분야에선 완벽한 설계가 더 중요할 것 같습니다. 반면에 Front-End는 내가 개발한 것을 확인하기가 비교적 쉽고 문제가 잘 보입니다. 그래서 예술가처럼 조금씩 다듬어 더 좋은 프로그램을 만들어 내는 방식이 가능합니다.

05 또 하나의 길 - 비전 있어 보였다.

다시 한번 강조하고 싶은데, 이 책은 2003년에 집필되었습니다. 저자는 이 챕터에서 웹 기반 소프트웨어의 비전을 예측했습니다. 웹 기반 소프트웨어는 웹 브라우저를 실행할 수 있는 Device이기만 하면 어디서든 구동 가능하다는 장점이 있습니다. 한번 Develop하면 PC, 스마트폰(Android, IOS)등등 한번에 배포할 수 있습니다. 이런 엄청난 강력함이 있지만 겉으로 보기에는 매우 큰 제약이 있어 보입니다. Desktop App(Excel, Word 등등) 같은 무거워보이는 프로그램은 웹 기반에서 돌린다는 건 예전에는 상상도 못할 일이었습니다.

지금은 구글에서 무려 무료로 스프레드시트나 문서작성도구를 웹 기반으로 작성할 수 있도록 합니다. 이 도구들은 심지어 한 문서에 여러사람이 접속해서 문서를 동시에 수정하는 것도 가능하게 해줍니다. 웹 기반의 프로그램이기 때문에 비교적 쉽게 구현할 수 있었다고 생각합니다.

앞으로 10년 뒤에 세상은 또 어떻게 바뀌어 있을까요. 저는 네이티브로 남아있을 수 밖에 없는 몇 안되는 앱을 제외하고는 모두 웹 기반 앱으로 이주하거나 새로운 웹 앱이 생겨날 것 같습니다. 웹 기반 앱의 가장 큰 단점은 성능인데, 크롬브라우저의 성능이 계속 향상되면 일반 PC만큼 성능을 낼 수 있도록 빠르게 동작할 것이라 예상합니다. 그러면 굳이 네이티브로 만들 필요 없이 웹 기반으로 개발하는 것이 당연하게 될 것 같습니다.

이런 웹 기반 세상에서 가장 필요한 기술은 무엇 일까요? 저는 Front-End 개발이라고 생각합니다. 단순히 사용자의 눈에 보이는 것만 디자인 하는 것을 넘어, 크롬 브라우저 기반으로 예를들어 Excel작업을 할 수 있도록 복잡한 기능들을 구현할 수 있는 실력있는 개발자가 많이 필요해 질 것입니다. 그리고 이런 역할을 할 수 있는 사람은 Front-End 개발자라고 생각합니다. Desktop App 개발자들이 각 타겟 OS와 PC 성능에 맞추어 개발하듯이 웹 기반 앱 개발자들은 구글 크롬 브라우저의 성능을 최대한으로 사용해 빠르게 동작하는 앱을 만들어 내야 합니다. 실력있는 웹 Front-End 개발자는 지금보다도 훨씬 많이 필요할 것입니다.

성공을 위한 가장 강력한 도구

내가 어떤 좋은 아이디어가 있는데 이를 서비스하기 위해 가장 좋은 도구중 하나는 웹 앱 개발하는 능력이라고 생각합니다. 멋진 아이디어가 생각났을 때 빠르게 개발해서 시험해보고, 또 다른 아이디어를 시험해보고 반복한다면 어느 순간 세상을 바꾸는 멋진 앱을 만들어 낼 수 있다고 생각합니다. 가장 중요한 건 우선 서비스가 가능한 무언가를 만들 수 있는 능력이 있어야 한다는 것이고, 그 다음으로는 빠르게 개발할 수 있어야 한다는 게 중요한 것 같습니다. Front-End 기반 웹 앱 개발능력은 이 두 가지를 모두 충족하는 강력한 도구라고 생각합니다. 열심히 공부해서 실력있는 개발자가 되어 세상을 바꾸는 멋진 웹 앱을 개발하고 싶습니다.

#include <string>
#include <vector>

using namespace std;

int dp[510][510];
vector<vector<int> > *arr;

void init() {
    for(int i=0;i<510;++i) {
        for(int j=0;j<510;++j) {
            dp[i][j] = 0;
        }
    }
}

int dfs(int depth, int idx) {
    if(depth == arr->size()) {
        return 0;
    }    
    if(dp[depth][idx] != 0) {
        return dp[depth][idx];
    }
    
    dp[depth][idx] = max((*arr)[depth][idx] + dfs(depth + 1, idx), 
    			(*arr)[depth][idx] + dfs(depth + 1, idx + 1));    
 
   
    return dp[depth][idx];
}

int solution(vector<vector<int>> triangle) {
    arr = &triangle;
    init();
    int answer = 0;
    answer = dfs(0,0);
    return answer;
}

Javascript Function

한 번 정의하면 몇번이든 실행할 수 있고 호출할 수있는 자바스크립트 코드 블럭

        function printprops(o) {
            for(var p in o) {
                console.log(p + " : " + o[p] + "\n");
            }
        }
        var arr = [1,2,3,4,5];
        printprops(arr);

Output :

함수 이름은 옵션

함수 정의 표현식에서 함수 이름은 옵션이다.
한 번 사용되고 마는 함수에서 특히 유용.

        var ten = (function(x) {return 10});
        console.log(ten);
        console.log(ten(100));

Output :

함수 선언문은 hoisted 된다.

어디에 함수 선언문이 있든 맨 위로 끌어올려(hoisted) 진다.
하지만 표현식으로 정의된 함수는 변수에 할당되기 전 까지는 참조할 수 없다.

리턴 값이 없는 함수를 procedure라고도 함.

중첩 함수

        function hypotenuse(a, b) {
            function square(x) {return x * x};
            return Math.sqrt(square(a). square(b));
        }

문장으로 선언되는 함수는

함수 내에 함수 중첩가능
but 반복문 내부, 조건문, try / catch / finally 또는 with문 안에 들어갈 수 없다.

표현식은

코드 어디든 위치 가능

함수 호출

1. 일반적인 함수형태
2. 메서드 형태
3. 생성자
4. call() 과 apply() 메서드를 통한 간접 호출

일반적인 함수 형태

호출 표현식

• 함수 객체로 평가되는 함수 표현식
• 여는 괄호
• 콤마로 구분된 0개 이상의 전달인자 표현식
• 닫는 괄호

함수 내의 this

• 일반적인 함수 형태로 사용하려 했으면 this 쓰지 않음
• strict mode 가 적용되었는지 판단 여부를 위해 사용 가능
  • 엄격모드 X -> global 객체
  • 엄격모드 O -> undefined

var strict = (function() {return !this;}());

메서드 호출

대부분 . 을 사용
[] 도 사용가능

        var calculator = {
            operand1: 1,
            operand2: 1,
            add: function() {
                this.result = this.operand1 + this.operand2;
            }
        }
        calculator.add();
        console.log(calculator.result);
        calculator["add"]();
        console.log(calculator.result);

Output :

메서드 사용 -> 해당 객체에 무언가를 한다는 사실을 나타내는 세련된 방법.

+a : this 키워드의 scope

        var o = {
            m: function() {
                var self = this;
                console.log(this === o); // true
                f();
                function f() {
                    console.log(this === o); // false
                    console.log(self === o);
                }
            }
        }
        o["m"]();

Output :

생성자 호출

new keyword -> 생성자 호출

인자가 없으면 두 문장은 완전히 같은 것.

        var o = new Object();
        var o = new Object;

생성자 함수는 보통 return 사용하지 않음.
함수의 마지막에서 객체를 반환, 혹은 return만 명시 되어있으면 거기서 객체 반환
기본 자료형 값(primitive value)을 반환하면 무시되고 새로생성된 객체가 호출 표현식 값.

간접 호출

call() -> 자신에게 주어진 전달인자를 호출할 함수의 전달인자로 사용
apply() -> 값 배열을 전달인자로 사용.

두 메서드 모두 호출 때 this 값을 명시적으로 지정 가능. -> 어떤 함수든지 특정 객체의 메서드로 호출할 수 있다는 의미

함수 전달인자와 매개변수

Javascript는 함수 매개변수타입, 전달인자 개수, 전달하는 인자의 타입 모두 검사하지 않음.
이를 프로그래머가 관리하는 방법들.

생략 가능한 매개변수

본래 정의된 것 보다 적으면 -> 나머지는 undefined
이렇게 두지 말고 생략된 매개변수에는 기본값을 주는 코드를 쓰자.

        function getPropertyNames(o, /*optional*/ a) {
            if(a == undefined) a = [];
            //or a = a || []
            // || -> 첫번째가 true나 true로 반환되는 값이면 그 값 return, 그렇지 않으면 뒤에 것 return
            for(var property in o) {
                a.push(property);
            }
            return a;
        }

가변길이 전달인자 목록 : Arguments객체

본래 정의된 것 보다 많을 때.

        function f(x, y, z) {
            if(arguments.length != 3) {
                throw new Error("인자개수가 3이 아닙니다.")
            }
        }

이렇게 해도 좋지만 javascript의 기본동작인

• 빠진 인자는 undefined
• 추가된 인자는 무시
  로도 잘 동작하게 구현 가능.

argument 객체를 직접 수정시

        function g(x) {
            console.log(x);
            arguments[0] = null;
            console.log(x);
        }

엄격모드가 아니면 값 변경, 엄격모드 시 값 변경되지 않음.

callee와 caller 속성

엄격모드에서는 사용 못함.
callee -> 프로퍼티가 현재 실행되고 있는 함수를 참조, 이름없는 함수를 재귀적으로 호출하는데 유용
caller -> 비표준. 이 함수를 호출한 함수를 참조. 호출 스택에 접근할 수 있도록 해줌.

객체의 프로퍼티를 전달인자로 사용하기

easycopy({from : a, to : b, length : 4});

값으로서의 함수

        function square(x) {return x * x};
        var s = square;
        square(4);
        s(4);

        var o = {square: function(x) {return x * x}};
        var y = o.square(16);

        var a = [function(x) {return x*x; }, 20];
        a[0](a[1]);

자신만의 함수 프로퍼티 정의하기

C 에서의 static 지역변수 역할

uniqueInteger.counter = 0;
function uniqueInteger() {
    return uniqueInteger.counter++;
}

함수 이름을 배열처럼 다룸

        function factorial(n) {
            if(isFinite(n) && n>0 && n == Math.round(n)) {
                if(!(n in factorial)) {
                    factorial[n] = n * factorial(n - 1);
                }
                return factorial[n];
            }
            else return NaN;
        }
        factorial[1] = 1;

네임스페이스로서의 함수

javascript 는 단위 block 내에 유효한 변수를 정의하는 방법을 제공하지 않음.
간단한 임시 네임스페이스 처럼 작동하는 함수를 정의하는 기법 사용.

        function mymodule() {
            // 모듈의 지역변수로 사용해서 전역을 어지럽히지 않음
        }
        mymodule(); // 함수 실행 필수

        // 하나의 프로퍼티 선언도 과하다면
        (function() {
            // 모듈 코드가 위치
        }()) // 바로 호출하고 끝냄. function앞 뒤 괄호는 반드시 필요 -> 표현식임을 알림

클로저

함수 객체, 함수의 변수가 해석되는 유효범위(변수 바인딩의 집합) 을 아울러 클로저라고 함
모든 자바스크립트 함수는 클로저.
-> 함수는 객체이고 함수 자신과 관련된 유효범위 체인을 가지고 있기 때문.

클로저는 자신을 정의한 바깥쪽 함수에 바인딩된 지역변수를 포착한다.

        var scope = "global";
        function checkscope() {
            var scope = "local";
            function f() {return scope;};
            return f;
        }
        checkscope()() // local 출력

EX) Counter

내부변수는 private. 오직 count와 reset을 통해서만 제어가능

        function counter() {
            var n = 0;
            return {
                count: function() {return n++;}, 
                reset: function() { n = 0; }
            }
        }

        var c = counter(), d = counter();
        console.log("c : ", c.count());
        console.log("d : ",d.count());
        c.reset()
        console.log("c : ",c.count());
        console.log("d : ",d.count());

Output:

Function 생성자

• 동적으로 자바스크립트 함수를 생성하고 실행 시간에 컴파일 되는 것을 가능하게 한다.
• 이걸로 생성하는 함수는 언제나 최상위 레벨 함수로, lexical scoping을 사용하지 않는다.

   

  var f = new function("x", "y", "return x*y);
  // 마지막 인자는 함수의 몸체 텍스트