W' page

출처 : http://www.nextree.co.kr/p4150/

자바스크립트에서 함수는 first-class object다.

  first-class object는 변수에 저장할 수 있어야 합니다.

  first-class object는 함수의 파라미터로 전달할 수 있어야 합니다.

  first-class object는 함수의 반환값으로 사용할 수 있어야 합니다.

  first-class object는 자료 구조에 저장할 수 있어야 합니다.

// 기명 함수표현식(named function expression)

var company = function company() {

    // 실행코드

};

// 익명 함수표현식(anonymous function expression)

var company = function() {

    // 실행코드

};

// 기명 즉시실행함수(named immediately-invoked function expression)

(function company() {

    // 실행코드

}());

// 익명 즉시실행함수(immediately-invoked function expression)

// Javascript 대가이신 더글라스 클락포트의 권장 표기법

(function() {

    // 실행코드

}());

// 익명 즉시실행함수(immediately-invoked function expression)

(function() {

    // 실행코드

})();

즉시 실행 함수

var buyCar = function(carName) {

    // "내가 구매한 차는 sonata입니다." 출력

    console.log('내가 구매한 차는 ' + carName + '입니다.');

};

buyCar('sonata');

(function(carName) {

    // "내가 구매한 차는 sonata입니다." 출력

    console.log('내가 구매한 차는 ' + carName + '입니다.');

}('sonata'));

/**

ex) at JQuery

(function($) {

    // 함수 스코프 내에서 $는 jQuery Object임.

    console.log($);

}(jQuery));

*/

모듈 패턴 (Module Pattern)

즉시실행함수를 위와 같이 사용하여 언어레벨에서 제공하지 못하는 모듈화 지원도구를 극복할 수 있으며,

이렇게 작성된 코드를 분리된 파일로 구성하면 재사용성을 높일 수 있습니다.

var clerk = (function() {

    var name = 'Teo';

    var sex = '남자';

    var position = '수석 엔지니어';

    // salary private

    var salary = 2000;

    var taxSalary = 200;

    var totalBonus = 100;

    var taxBonus = 10;

    var payBonus = function() {

        totalBonus = totalBonus - taxBonus;

        return totalBonus;

    };

    var paySalary = function() {

        return salary - taxSalary;

    };

    // Public 속성, 메소드

    return {

        name : name,

        sex : sex,

        position : position,

        paySalary : paySalary,

        payBonus : payBonus

    };

}());

// name 속성은 public

console.log(clerk.name); // 'Teo' 출력

// salary 변수는 즉시실행함수 내부 변수이므로 private

console.log(clerk.salary); // undefined 출력

// paySalary 메소드는 public

console.log(clerk.paySalary()); // 1800 출력

// payBonus 메소드는 public

console.log(clerk.payBonus()); // 90 출력

console.log(clerk.payBonus()); // 80 출력

자바스크립트 모듈 작성시 코드 순서

  Javascript로 SPA를 구현할  때, 다음과 같은 순서의 코드로 모듈을 작성하게 되면 협업하는 개발자들에게 집약되고 일관된 코드를 제공하여 많은 도움이 될 것입니다. 이렇게 코드의 순서를 정하는 이유는 집약되고 일관된 코드를 제공하는데 있으므로 코드의 순서는 개발상황과 모듈용도에 맞춰가며 조정하고 추가 및 삭제될 수도 있습니다. 아래 순서는 단지 코드작성 순서의 예일뿐입니다.

    - 모듈 스코프 내에서 사용할 변수 작성

    - 유틸리티 메소드 작성

    - DOM 조작 메소드 작성

    - 이벤트 핸들러 작성

    - Public 메소드 작성

// SPA 모듈 작성 순서 예시

var app = (function() {

    // 1. 모듈 스코프 내에서 사용할 변수 작성

    var scopeVar = {};

    var utilMethod;

    var manipulateDom;

    var eventHandle;

    var initModule;

    // 2. 유틸리티 메소드 작성

    utilMethod = function() {

        // 실행코드

    };

    // 3. DOM 조작 메소드 작성

    manipulateDom = function() {

        // 실행코드

    };

    // 4. 이벤트 핸들러 작성

    eventHandle = function() {

        // 실행코드

    };

    // Public 메소드 작성

    initModule = function() {

        // 실행코드

    };

    return {

        init : initModule

    };

}());

모듈화 하는 코딩 기법 정리

/**

 * Library 모듈화를 위한 코딩기법 1

 * call 함수 이용

 */

(function() {

    'use strict';

    var root = this;

    var version = '1.0';

    var Module1;

    if(typeof exports !== 'undefined') {

        Module1 = exports;

    } else {

        Module1 = root.Module1 = {};

    }

    Module1.getVersion = function() {

        return version;

    }

}).call(this);

// console.log(Module1.getVersion());

/**

 * Library 모듈화를 위한 코딩기법 2

 * 글로벌 객체를 파라미터로 전달

 */

(function(global) {

    var root = global;

    var version = '1.0';

    var Module2;

    if(typeof exports !== 'undefined') {

        Module2 = exports;

    } else {

        Module2 = root.Module2 = {};

    }

    Module2.getVersion = function() {

        return version;

    }

}(this));

// console.log(Module2.getVersion());

/**

 * Library 모듈화를 위한 코딩기법 3

 * 즉시실행함수 내부에서 글로벌 객체를 내부 변수에 할당

 */

(function() {

    var root = this;

    var version = '1.0';

    var Module3;

    if(typeof exports !== 'undefined') {

        Module3 = exports;

    } else {

        Module3 = root.Module3 = {};

    }

    Module3.getVersion = function() {

        return version;

    }

}());

// console.log(Module3.getVersion());

/**

 * Library 모듈화를 위한 코딩기법 4

 * apply 함수 이용

 */

(function() {

    var root = this;

    var version = '1.0';

    var Module4;

    if(typeof exports !== 'undefined') {

        Module4 = exports;

    } else {

        Module4 = root.Module4 = {};

    }

    Module4.getVersion = function() {

        return version;

    }

}).apply(this) ;

// console.log(Module4.getVersion());

/**

 * Library 모듈화를 위한 코딩기법 5

 * 기명 즉시실행함수 이용

 */

var Module5 = (function() {

    var root = this;

    var version = '1.0';

    var Module;

    if(typeof exports !== 'undefined') {

        Module = exports;

    } else {

        Module = root.Module = {};

    }

    Module.getVersion = function() {

        return version;

    }

    return Module;

}());

console.log(Module5.getVersion());

출처

http://blog.aliencube.org/ko/2014/01/02/reasons-behind-using-strict-mode-while-coding-javascript/

Strict Mode는 ECMAScript 5 버전에 있는 새로운 기능으로써,

당신의 프로그램 또는 함수를 엄격한 운용 콘텍스트 안에서 실행시킬 수 있게끔 합니다.

이 엄격한 콘텍스트는 몇가지 액션들을 실행할 수 없도록 하며, 좀 더 많은 예외를 발생시킵니다.

Strict Mode는 몇가지 면에서 도움이 되는데:

  흔히 발생하는 코딩 실수를 잡아내서 예외를 발생시킵니다.

  상대적으로 안전하지 않은 액션이 발생하는 것을 방지하거나 그럴 때 예외를 발생시킵니다.

  예를 들자면 전역객체들에 접근하려 한다거나 하는 것들이겠지요.

  혼란스럽거나 제대로 고려되지 않은 기능들을 비활성화시킵니다.

이 strict mode는 파일 전체에 적용시킬 수도 있고,

아니면 특정한 함수 안에서만 적용시킬 수도 있습니다.

따라서, 기존의 자바스크립트 코드에 대해 좀 더 엄격한 검사를 실행시키고 싶다면 문서의 첫 줄에 "use strict";를 추가한다.

기존의 것은 그대로 놔두고, 새로운 코드에 대해서만 추가하고 싶다면 각각의 함수 블록 처음에 추가하는 것이 좋겠다.

// 출처 : http://programmingsummaries.tistory.com/

// 추천 링크

// https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

// 재귀함수와 arguments.callee

// arguments.callee는 스스로의 함수를 호출

function factorial(x) {

    if(x<=1) {

        return 1;

    }

    else {

        return x*arguments.callee(x-1);

    }

}

console.log(factorial(5))

// 멤버 관리 구조와 prototype

function Person(name) {

    var firstName = "홍";

    this.name = name;

    this.speak = function(){ console.log(firstName + this.name); }

}

console.log(Person.firstName); //undefined 접근할 수 없다.

var p = new Person("길동"); //객체 생성

console.log(p.firstName); //undefined 역시 접근할 수 없다.

console.log(p.name); //"길동" 접근 가능하다.

Person.prototype.tellme = function(){ console.log('zzz'); }; //메서드 추가!!

console.log(p.tellme()); //zzz라는 팝업이 뜬다!! 즉 객체 프로토타입 변경 가능!!

console.log(p["firstName"]); //undefined 마찬가지로 접근할 수 없다.

console.log(p["name"]); //"길동" 접근 가능하다.

// 멤버 확장

Object.prototype.extend = function(parent) {

    for(var property in parent) {

        this[property] = parent[property];

    }

};

// Max & min

var test = [0, 77, 33, 11, 99, 88, 55];

console.log(Math.max.apply(null, test)); //결과값은 99

console.log(Math.min.apply(null, test)); //결과값은 0

var max = test.reduce( function (previous, current) {

    return previous > current ? previous:current;

});

//최소값

var min = test.reduce( function (previous, current) {

    return previous > current ? current:previous;

});

console.log("max :", max, "| min :", min)

// 배열 복사, 객체를 가진 경우엔 조심해야 함

var aaa = [0, 1, 2, 3, 4, 5];

var bbb = JSON.parse(JSON.stringify( aaa )); //참조없는 복사

var aaaa = [0, 1, 2, 3, 4, 5];

var bbbb = aaaa.slice(); //indexOf 혹은 contains로 검색 가능

// 배열 함수 : http://programmingsummaries.tistory.com/357

// Array.forEach

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 모든 요소에 EDIT라는 문자열을 더하기

//메서드 수행 후 리턴값은 undefined

testArray.forEach(function (item, index, array) {

    array[index] = item + "EDIT";

});

console.log(testArray);

// Array.some

var testArraySome = ["aaa", "bbb", "ccc", "ddd"];

//배열의 중에서 "bbb"가 있으면 true를 리턴

//메서드 수행 중 true가 리턴되면 메서드 수행을 중단하고 true를 리턴

console.log(testArraySome.some(function (item, index, array) {

    console.log(index + "번째 요소 : " + item);

    return !!~item.search("bbb");

}));

//true를 리턴하는 콜백이 있었으므로 리턴값은 true

// Array.every

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 모든 요소에 "aaa"가 있으면 true를 리턴

//메서드 수행 중 false가 리턴되면 메서드 수행을 중단하고 false를 리턴

console.log(testArray.every(function (item, index, array) {

    console.log(index + "번째 요소 : " + item);

    return !!~item.search("aaa");

    // return !!~item.search(/[a-z]+/);  -> true

}));

//false를 리턴하는 콜백이 있었으므로 리턴값은 false

// Array.filter

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 요소가 a 또는 b로 이루어져 있으면 추출

//메서드가 종료되면 추출된 요소로만 이루어진 새로운 배열을 리턴

var newArray = testArray.filter(function (item, index, array) {

    return !!~item.search(/[ab]+/);

});

console.log(testArray);

console.log(newArray);

// Array.reduce

var testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

//각 콜백마다의 리턴값을 previousItem 으로 넘겨받아 어떤 작업을 수행

//메서드가 종료되면 마지막 콜백의 리턴값을 리턴

var result = testArray.reduce(function (previousItem, currentItem, index, array) {

    //반환된 결과는 다음번 콜백의 첫번째 파라메터로 다시 전달된다.

    return previousItem + currentItem;

}, 0);

console.log(testArray);

console.log(result);

// setTimeout function

setTimeout(console.log("setTimeoutTest - Start"), 1000);

console.log("setTImeoutTest - End")

/**

1초 후에 "setTImeoutTest - End" 이 뜰 것 같지만 그렇지 않다.

*/

// 모듈, module

var circle = require('./node.circle.js');

console.log( 'The area of a circle of radius 4 is ' + circle.area(4));

// 정규표현식, regular expression

// 시각화 해주는 사이트 : http://regexper.com/

// 정규표현식 실습 : http://www.regexr.com/

var pattern = /a/

// var pattern = new RegExp('a');

console.log(pattern.exec('abcdef')); // ["a"]

console.log(pattern.exec('bcdefg')); // null

console.log(pattern.test('abcdef')); // true

console.log(pattern.test('bcdefg')); // false

console.log('abcdef'.match(pattern)); // ["a"]

console.log('bcdefg'.match(pattern)); // null

console.log('abcdef'.replace(pattern, 'A'));  // Abcdef

var xi = /a/;

console.log("Abcde".match(xi)); // null

var oi = /a/i;

console.log("Abcde".match(oi)); // ["A"];

var xg = /a/;

console.log("abcdea".match(xg));

var og = /a/g;

console.log("abcdea".match(og));

var pattern = /(\w+)\s(\w+)/;

var str = "coding everybody";

var result = str.replace(pattern, "$2, $1");

console.log(result);

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;

var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';

var result = content.replace(urlPattern, function(url){

    return '<a href="'+url+'">'+url+'</a>';

});

console.log(result);

// 함수, function, 유효 범위

for(var i = 0; i < 1; i++){

    var name = 'coding everybody';

}

console.log(name);

var i = 5;

function a(){

    var i = 10;

    b();

}

function b(){

    console.log(i);

}

a();

// function, value, 값으로서의 함수, 콜백, callback

function cal(func, num){

    return func(num)

}

function increase(num){

    return num+1

}

function decrease(num){

    return num-1

}

console.log(cal(increase, 1));

console.log(cal(decrease, 1));

function cal(mode){

    var funcs = {

        'plus' : function(left, right){return left + right},

        'minus' : function(left, right){return left - right}

    }

    return funcs[mode];

}

console.log(cal('plus')(2,1));

console.log(cal('minus')(2,1));

var process = [

    function(input){ return input + 10;},

    function(input){ return input * input;},

    function(input){ return input / 2;}

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

console.log(input);

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];

console.log(numbers.sort(function (a, b){

    return b-a;

})); // array, [20,10,9,8,7,6,5,4,3,2,1]

// 클로저, closure

function outter(){

    var title = 'coding everybody';

    return function(){

        console.log(title);

    }

}

inner = outter();

inner();

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

console.log(ghost.get_title());     // Ghost in the shell

console.log(matrix.get_title());    // Matrix

ghost.set_title('공각기동대');

console.log(ghost.get_title());     // 공각기동대

console.log(matrix.get_title());    // Matrix

var movies = {

    'title' : null,

    'get_title' : function (){

        return this.title;

    },

    'set_title' : function(title){

        this.title = title;

    }

}

m1 = movies;

m1.set_title("m1")

console.log(m1.get_title())

console.log(movies.get_title())

var arr = []

for(var i = 0; i < 5; i++){

    arr[i] = function(id) {

        return function(){

            return id;

        }

    }(i);

}

for(var index in arr) {

    console.log(arr[index]());

}

// arguments, 아규먼트

function sum(){

    var _sum = 0;

    for(var i = 0; i < arguments.length; i++){

        // console.log(i+' : '+arguments[i]);

        _sum += arguments[i];

    }

    return _sum;

}

console.log('result : ' + sum(1,2,3,4));

// 매개변수

function zero(){

    console.log(

        'zero.length', zero.length,

        'arguments', arguments.length

    );

}

function one(arg1){

    console.log(

        'one.length', one.length,

        'arguments', arguments.length

    );

}

function two(arg1, arg2){

    console.log(

        'two.length', two.length,

        'arguments', arguments.length

    );

    return arg1 + arg2

}

zero(); // zero.length 0 arguments 0

one('val1', 'val2');  // one.length 1 arguments 2

two('val1');  // two.length 2 arguments 1

// 함수의 호출, call function

o1 = {val1:1, val2:2, val3:3}

o2 = {v1:10, v2:50, v3:100, v4:25}

function sum2(){

    var _sum = 0;

    for(name in this){

        _sum += this[name];

    }

    return _sum;

}

console.log(sum2.apply(o1)) // 6

console.log(sum2.apply(o2)) // 185

o1.sum2 = sum2;

console.log(o1.sum2()); // sum 중간에 객체의 타입을 검사하는 과정이 필요

// 변수, variable

var aaa = 2; //숫자

var bbb = "2"; //문자

var bbb = '2'; //얘도 문자

var ccc = true; //얘는 불린

var ddd = [1, 2, 3, 4]; //얘는 배열

var eee = { p1 : 2, p2 : '2' }; //얘는 객체

var fff = null; //null

var ggg = undefined; //undefined

var hhh = function(){ console.log('ㅋㅋㅋ'); } //얘는 함수!!

hhh()

// 수학, 정수, math

console.log(

    Math.pow(3,2),       // 9,   3의 2승

    Math.round(10.6),    // 11,  10.6을 반올림

    Math.ceil(10.2),     // 11,  10.2를 올림

    Math.floor(10.6),    // 10,  10.6을 내림

    Math.sqrt(9),        // 3,   3의 제곱근

    Math.random()       // 0부터 1.0 사이의 랜덤한 숫자

);

// 속성, type, typedef

console.log(

    typeof 1,

    typeof "1"

);

// 문자열, string

console.log(

    'kanziw\'s javascript\n',

    "javascript\nworld\n",

    "have a " + "nice day\n",

    'hihello'.length

);

// 비교, equal

console.log(

    1 == 1,             // true

    1 == "1",           // true

    1 === "1",          // false

    null == undefined,  // true

    null === undefined, // false

    true == 1,          // true

    true === 1,         // false

    true == '1',        // true

    true === '1',       // false

    0 === -0,           // true

    NaN === NaN        // false

);

// if, while, for

var a;

if(!'' && !undefined && !a && !null && !NaN){

    console.log('조건문의 경우가 모두 false임');

}

var i = 0;

var sum = 0;

while(i < 10){

    sum += ++i;

}

console.log(sum);

sum = 0;

for(i = 1; i <= 10; i++){

    if(i == 2) continue;

    sum += i;

    if(i == 5) break;

}

console.log(sum);

// function numbering(){

var numbering = function (){

    i = 0;

    while(i < 10){

        console.log(i);

        i += 1;

    }

}

numbering();

// list, 배열

var li = ['a', 'c', 'z'];

li.push('d');

li.concat('e', 'f');

li.unshift('-a');

console.log(li);

li.splice(2, 1, 'B');   // 2번째부터 1개를 삭제 후 'B'를 삽입

console.log(li);

console.log(

    li.shift(),

    li.pop(),

    li.sort()

);

console.log(li.reverse());

// 객체, object

var grades = {};

grades['egoing'] = 10;

grades['k8805'] = 6;

grades['sorialgi'] = 80;

// var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}

for(key in grades) {

    console.log("key : "+key+" | value : "+grades[key]);

}

grades = {

    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},

    'show' : function(){

        for(var name in this.list){

            console.log(name+':'+this.list[name]);

        }

    }

};

grades.show();

아래의 언어들에 대해 자동 완성을 해준다고 한다.

JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP

공식 홈페이지 : http://sublimecodeintel.github.io/SublimeCodeIntel/

설치 방법

Command + Shift + P  -  Install Package  -  SublimeCodeIntel

사용 방법

Sublime Text 를 재실행 후 자동완성이 필요한 곳에서 Control + Shift + Space 하면 된다.

변수가 선언 된 곳을 찾고자 할 땐 Control + Alt + Command + Up 하면 되며

다시 작업 중이던 곳으로 내려올 땐 Control + Alt + Command + Left 하면 된다.

Tools - Build System - New Build System...

아래와 같이 적고 node라는 이름으로 저장 후 해당 빌드시스템 선택

{

  "cmd": ["node", "$file"],

  "selector": "*.js"

}

나의 경우 nvm으로 node version을 관리하고 있기 때문에 

{

  "cmd": ["/Users/kanziw/.nvm/versions/node/v4.2.0/bin/node", "$file"],

  "selector": "*.js"

}

으로 적었으며 일반적인 경우는 첫번째로 가능하다.

node 명령어를 찾을 수 없다고 한다면 node를 설치 했는지 확인 해봐야 하며

설치 했고 cli 환경에서 정상 작동 한다면 which node 명령어로 node 명령어의 전체 경로확인 후 해당 경로를 적어야 한다.

설정 파일 위치

/Users/kanziw/Library/Application Support/Sublime Text 3/Packages/User/node.sublime-build

Windows의 공유폴더를 Linux에서 마운트하여 사용하면 여러모로 편리하다.

Windows-Linux 간 파일 이동이 편하다.

나의 경우엔 로컬 Windows에서 작업한 결과물을 저장과 동시에 VMware의 Linux에서 확인할 때 자주 사용한다.

Windows의 작업 폴더를 /var/www/html 에 마운트 시키면 되는 것이다.

1. Windows 설정

Windows에서 공유할 폴더에서 공유를 설정한다.

특히 고급공유 - 권한 에 들어가 로그인할 계정을 선택해야 하는데

이 때 사용되는 계정은 비밀번호를 사용중이어야 한다.

(no password 옵션이 있긴 하던데 나는 어차피 계정에 비밀번호를 항상 걸어놓는다.)

2. Linux 설정

Linux에서 Windows 공유폴더를 사용하려면 특정 패키지들이 설치되어 있어야 한다.

# yum install -y samba samba-client cifs-utils

아래 명령어로 Windows의 공유폴더 상황 확인

# smbclient -L WINDOWS_SERVER_IP -U USERNAME -W WORKGROUP

아래 명령어로 마운트

# mount -t cifs //WINDOWS_SERVE_IP/FOLDER_NAME -o username=USERNAME@WORKGROUP MountPoint

-o username=kanziw,uid=kanziw,gid=kanziw 등 옵션을 다양하게 줄 수도 있다.

출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_function&wr_id=412766&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%3C%3Fphp+%BE%F8%C0%CC&sop=and

기본적으로 <?php ?>과<? ?>은 같다.

하지만 <? ?>으로는 되지 않는 경우가 있다.

이 경우엔 <?=$var?> 와 같이 변수를 간략하게 출력하는 것도 되지 않는다.

해결 방법

short_open_tag 옵션을 켜주면 된다.

# vi /etc/php.ini

    229 short_open_tag = On

Local의 VM 에선 잘 되는 session을 이용한 로그인이 AWS에만 올리면 안되는 증상이 발생했다.

구글링을 해보니 php.ini의 설정과 httpd 안의 php 설정이 부딪혀서 나타나는 증상인 듯하다.

$ sudo vi /etc/httpd/conf.d/php.conf

     32 #php_value session.save_path    "/var/lib/php/session"

$ sudo service httpd restart

맨 아래에 있는 session.save_path 설정을 주석처리 하니 된다.