모듈 패턴이란?

모듈이란 전제 어플리케이션의 일부를 독립된 코드로 분리하여 만들어 놓은 것이다.

모듈화를 했을 때 장점

• 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 활용할 수 있다.
• 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
• 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
• 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
• 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드할 때 시간과 네트워크 트래픽을 절약할 수 있다.(브라우저에서만 해당)

객체 리터럴을 사용한 모듈 패턴

자바스크립트에서 모듈을 구현하는 가장 쉬운 방법은 객체 리터럴을 사용하는 방법이다.

var module = {
    key: 'data',
    publicMethod: function() {
        return this.key;
    }
}

console.log(module.key); // data
console.log(module.publicMethod()); // data

객체 리터럴은 모듈 패턴이기도 하며, 하나의 객체라는 점에서 싱글톤 패턴이라고도 할 수 있다. 동일한 코드를 어떠한 관점에서 보느냐에 따라 다양한 패턴이 될 수 있다. 객체 리터럴은 간단하지만 모든 속성이 공개되어있다는 단점이 있다. 독립된 모듈은 자체적으로 필요한 내부 변수 및 내부 함수를 모두 갖고 있어야 하므로 클로저를 이용해야 한다.

아래는 클로저를 활용한 모듈패턴이다.

클로저를 활용한 모듈 패턴

var module = (function() {

    /**
        * -----------------------
        * 모듈 패턴을 구현할 클로저 코드
        * -----------------------
        */

    // 은닉될 멤버 정의
    var privateKey = 0;
    function privateMethod() {
        return privateKey++;
    }

    // 공개될 멤버(특권 메서드) 정의
    return {
        publicKey: privateKey,
        publicMethod: function() {
            return privateMethod();
        }
    }

})();

console.log(module.publicMethod()); // 0
console.log(module.publicMethod()); // 1

모듈 패턴의 반환값은 함수가 아닌 객체이다. 위의 코드를 순서대로 보면 익명함수가 자동으로 실행되고 반환된 객체를 module 변수에 할당한다. 따라서 module.publicMethod()처럼 메서드를 호출할 수 있다. 자동 호출되는점을 제외하고 클로저와 유사하다.

클로저 경우

function func() {
    var private = 0;
    return function() {
        private++;
        return private;
    }
}
var val = func();
console.log(val()); // 1
console.log(val()); // 2

그리고 인스턴스를 여러개 만들어 낼 수 있는 구조라는 점에서 싱글톤 패턴과 차이가 있다.

싱글톤 패턴 경우

var singleton = (function() {

    var instance;
    var private = 0;
    function init() {
        return {
            publicKey: private,
            publicMethod: function() {
                return publicKey;
            }
        }
    }
    return function() {

        // 싱글톤 패턴은 아래 조건문에서 처음 인스턴스가 선언되면 다시 인스턴스를 만들지 않고 기존의 인스턴스를 리턴한다.
        if (!instance) {
            instance = init();
        }
        return instance;
    }
})()

var singleton1 = singleton();
var singleton2 = singleton();
console.log(singleton1 === singleton2); // true

하나의 인스턴스를 선언하지 않고 여러개의 인스턴스를 생성하려면 익명함수를 사용하지 않고 생성자 함수 방식으로 만들면 된다.

var Module = function() {

    var privateKey = 0;
    function privateMethod() {
        return privateKey++;
    }

    return {
        publicKey: privateKey,
        publicMethod: function() {
            return privateMethod();
        }
    }

}

var obj1 = Module();
console.log(obj1.publicMethod()); // 1
console.log(obj1.publicMethod()); // 2

var obj2 = Module();
console.log(obj2.publicMethod()); // 1
console.log(obj2.publicMethod()); // 2

위처럼 Module 함수를 정의하여 함수를 호출하면 여러개의 인스턴스를 생성할 수 있다. 클로저 인스턴스와 유사하지만, 한가지 차이점은 내부의 익명함수에서 반환값이 함수가 아니라 객체를 반환한다는 점이다.

모듈 패턴과 네임 스페이스 패턴을 함께 사용하면 더욱 깔끔한 코드가 완성된다.

var app = app || {};
app.module = (function() {

    var privateKey = 0;
    function privateMethod() {
        return privateKey++;
    }

    return {
        publicKey: privateKey,
        publicMethod: function() {
            return privateMethod();
        }
    }
})();

console.log(app.module.publicMethod()); // 0
console.log(app.module.publicMethod()); // 1

References

module pattern (모듈패턴) #1
[JS_Design Pattern] 2. 모듈 패턴 (Module Pattern)

정의

중첩함수에서 내부함수가 외부함수의 환경을 기억하는것을 클로저라고 한다.

function func() {
    var foo = 'data';
    return function() {
        return foo;
    }
}

func라는 함수를 선언하고 foo변수에 ‘data’문자열을 추가한 뒤 foo변수를 리턴하는 익명함수를 선언하였다.

var closure = func();
console.log(closure());
// 'data'

func함수의 리턴값을 closure변수에 할당한 뒤 closure를 실행한 값을 콘솔로 찍어보았다. 결과는 ‘data’라는 문자열이 출력되었다. func의 지역변수로 있는 foo는 func함수가 끝나면서 소멸되어야하지만 값을 잃지 않고 ‘data’값을 가지고 있다. 이 현상을 클로저라 한다. 다른 구문도 살펴보겠다.

function count() {
    var num = 0;
    return function() {
        num++;
        return num;
    }
}

var closure = count();
console.log(closure());
console.log(closure());
console.log(closure());
// 1
// 2
// 3

count함수의 지역변수인 num값이 소멸되지 않고 계속 카운트되는 것을 확인해 볼 수 있다.

특징

변수의 은닉화

자바스크립트에서는 인스턴스를 생성할때 Private Variables에 대한 접근 권한 문제가 있다.

function Create(name) {
    this._name = name;
}

var obj = new Create('민수');
console.log(obj._name);
// 민수

위에서 생성된 obj객체의 _name프로퍼티는 변수명 앞에 _를 포함하였기 때문에 Private Variables로 쓰고싶다는 의도를 알 수 있다. 하지만 _name프로퍼티는 동적으로 변경될 수 있다.

obj._name = '인성';
console.log(obj._name);
// 인성

이 경우 클로저를 사용하여 외부에서 내부변수에 접근하는것을 제한할 수 있다.

function create(name) {
    var _name = name;
    return function() {
        console.log(_name);
    }
}

var hello = create('민수');
hello();
// 민수

여기서는 외부에서 _name에 접근할 방법이 전혀 없다. 이렇게 클로저를 활용하여 은닉화를 해결할 수 있다.

고유한 환경

클로저는 고유한 환경을 가지고 있다.

function func(name) {
    var txt = name;
    return function() {
        return txt;
    }
}

var closure01 = func('민수');
var closure02 = func('인성');
var closure03 = func('한나');

console.log(closure01()) // 민수
console.log(closure02()) // 인성
console.log(closure03()) // 한나

위의 구문을 보면 txt변수가 동적으로 변화하는 것처럼 보이지만, 실제로는 txt변수 자체가 여러번 생성된 것이다. 즉, closure01(), closure02(), closure03()은 서로 다른 환경을 가지고 있다. 서로 다른 환경을 가지고 있다는것은 그만큼 메모리면에서 큰 비효율을 낳는다.

function Func(input) {
    this.name = input;
    this.get = function() {
        return this.name;
    }
    this.set = function (rename) {
        this.name = rename;
    }
}

var obj = new Func('민수');
console.log(obj.get());

위 코드는 생성자함수를 사용하여 인스턴스를 생성하는 구문인데, 클로저가 두번(get, set)이나 생성되었다. 이 상태에서 인스턴스를 계속 만들면 같은일을 하는 클로저가 중복으로 생성되고 메모리낭비가 심해질 것이다.
따라서 클로저는 객체의 prototype안에 저장함으로써 같은 기능을 모든 인스턴스가 공유하는 형태로 코드를 만들어야한다.

function Func(input) {
    this.name = input;
}
Func.prototype.get = function() {
    return this.name;
};
Func.prototype.set = function(rename) {
    this.name = rename;
};

var obj = new Func('민수');
console.log(obj.get());

이렇게 prototype안에 클로저를 넣으면, 인스턴스가 생성되더라도 중복으로 메모리를 낭비하지 않고, 생성자 내부의 prototype안의 클로저를 참조하기 때문에 메모리낭비를 방지할 수 있다.

정리

• 클로저는 독립적인(자유) 변수를 가리키는 함수 또는 클로저 안에 정의된 내부함수는 만들어진 환경을 기억한다.
• 클로저는 외부함수의 스코프 영역에 접근할 수 있고, 그것을 기억하고 있어야 한다.
• 외부함수가 종료된 후에도 내부함수는 외부함수를 계속 참조하고 있어야 한다.
• 데이터의 캡슐화 및 정보은닉에도 사용 가능하다.

References

JavaScript 클로저(Closure)

크롬 개발자 도구의 Sources패널로 디버깅을 할 수 있다.

예제

function hello() {
    return 'hello';
}

function world() {
    return 'world';
}

function greetinf() {
    var h = hello();
    var w = world();
    document.getElementById('msg').setAttribute('value', h + w);
}

<input type="text" id="msg" />
<button type="button" onclick="greetinf()">click</button>

버튼을 클릭하면 greetinf함수가 실행되며, h, w변수에 차례대로 값이 할당된 후 인풋 태그에 결과 값(helloworld)이 출력되는 구문이다.

결과

디버깅

크롬 개발자 도구의 소스탭을 들어가면 아래 처럼 확인할 수 있다.

개발자 도구는 특정 라인이 아닌 글로벌한 이벤트에 대해 중단점을 만들 수 있다. 좌측 하단의 Event Listener Breakpoints탭으로 들어가 Mouse > click를 체크해준다. 화면으로 넘어가 버튼을 클릭하면 이벤트가 실행되면서 이벤트가 실행된 코드를 소스탭에서 확인할 수 있다.

1. Breakpoints

중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다.

2. Pretty Print

압축 파일(min)을 보기 좋게 정렬하여 볼 수 있다.

3. Resume Script Execution(단축키: F8)

스크립트 실행을 다시 시작한다. 추가 중단점이 없는 경우, 실행이 쭉 이어지고 디버거는 동작하지 않는다.

4. Step (단축키 F9)

다음 명령어를 실행한다. Step버튼을 계속 누르면 스크립트 전체를 문 단위로 하나하나 실행할 수 있다.

5. Step over next function call(단축키 F10)

다음 명령어를 실행하되, 함수 안으로 들어가진 않는다. Step과 유사하지만, 다음 문이 함수 호출일 때 Step과는 다르게 동작한다.(alert 같은 내장함수에는 해당하지 않고, 직접 작성한 함수일 때만 동작이 다르다.) Step은 함수 내부로 들어가 함수 본문 첫 번째 줄에서 실행을 멈춘다. 반면 Step over next function call은 보이지 않는 곳에서 중첩 함수를 실행하긴 하지만 함수 내로 진입하지 않는다. 함수 호출 시 내부에서 어떤 일이 일어나는지 궁금하지 않을 때 유용하다. 실행은 함수 실행이 끝난 후에 즉시 멈춘다.

6. Step into next function call(단축키 F11)

Step과 유사한데, 비동기 함수 호출에서 Step과는 다르게 동작한다. Step은 setTimeout(함수 호출 스케줄링에 쓰이는 내장 메서드)같은 비동기 동작은 무시한다. 반면 Step into next function call는 비동기 동작을 담당하는 코드로 진입하고, 필요하다면 비동기 동작이 완료될 때까지 대기한다.

7. Step out of current function(단축키 shift + F11)

현재 실행 중인 함수의 실행을 계속 이어가다가 함수 본문 마지막 줄에서 실행을 멈춘다. 실수로 Step을 눌러 내부 동작을 알고 싶지 않은 중첩 함수로 진입했거나 가능한 한 빨리 함수 실행을 끝내고 싶은 경우 유용하다.

8. Deactivate breakpoints

모든 중단점을 일시적으로 활성화/비활성화한다.(실행에는 영향이 없음)

9. Pause on excepoints

활성화되어 있고, 개발자 도구가 열려있는 상태에서 스크립트 실행 중에 에러가 발생하면 실행이 자동으로 멈춘다. 실행이 중단되었기 때문에 변수 등을 조사해 어디서 에러가 발생했는지 찾을 수 있게 된다. 개발하다가 에러와 함께 스크립트가 죽었다면 디버거를 열고 이 옵션을 활성화한 후, 페이지를 새로고침하면 에러가 발생한 곳과 에러 발생 시점의 컨텍스트를 확인할 수 있다.

10. Scope

현재 정의된 모든 변수를 출력한다. Local은 함수의 지역변수를 보여준다. 지역 변수 정보는 소스 코드 영역에서도 확인(강조 표시)할 수 있다. Global은 함수 바깥에 정의된 전역 변수를 보여준다. Local 하위 항목으로 this에 대한 정보도 출력된다.

11. Watch

표현식을 평가하고 결과를 보여준다. Add watch expression 버튼을 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여준다. 입력한 표현식은 실행 과정 중에 계속해서 재평가된다.

Call Stack

코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시한다.

References

Chrome으로 디버깅하기
Chrome DevTools에서 자바스크립트 디버깅 시작하기
크롬 개발자 도구를 이용한 자바스크립트 디버깅
생활코딩 – Sources

윈도우에서는 Putty라는 프로그램으로 ssh접속을 하였지만 맥에서는 터미널로 바로 접속이 가능하다.

$ ssh [ID]@[HOST]

예를들어 webapp이 아이디이고 127.0.0.1가 호스트 번호 라면

$ ssh webapp@127.0.0.1

라고 입력한 뒤 패스워드를 입력하면 된다.

전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체 생성패턴을 의미한다. 대표적으로 $를 활용해서 DOM을 조작하고 이벤트도 다루는 jQuery가 있으며, 객체 리터럴도 싱글톤 패턴이라고 할수 있다.(자바스크립트에서 객체 리터럴로 생성한 객체는 다른 객체와 같을 수 없다. 객체 내부의 내용이 같더라도 참조하는 객체가 다르기 때문이다.) 객체 리터럴은 한계가 있는데 비공개 프로퍼티 및 함수를 선언할 수 없다.

var obj = {
    name: 'myName',
    get: function() {
        return this.name;
    }
}
console.log(obj.get()); // myName

비공개 프로퍼티 및 함수를 정의하려면 클로저(closure)를 활용해야 한다. 즉 제대로 된 싱글톤 패턴은 객체 리터럴 + 클로저의 조합이 필요하다고 할 수 있다. 아래 코드를 확인해보면

var singleton = (function() {

    // 비공개 프로퍼티 정의
    var instance;

    // 비공개 메서드 정의
    function init() {

        // singleton 인스턴스 정의
        return {

            // 공개 프로퍼티 정의
            prop: 'value',

            // 공개 메서드 정의
            method: function() {
                return 'hello'
            }

        };

    }

    // 공개 메서드인 getInstance를 정의한 객체, 비공개 프로퍼티 및 메서드에 접근 가능(클로저)
    return {

        getInstance: function() {

            // 인스턴스가 선언이 안되있는경우 인스턴스 생성
            if (!instance) {
                instance = init();
            }

            // 인스턴스가 선언이 되있는 경우 인스턴스 반환
            return instance;

        }
    }
})()

var singleton1 = singleton.getInstance();
console.log(singleton1.method());
var singleton2 = singleton.getInstance();
console.log(singleton1 === singleton2); // true

위 코드는 비공개 메서드인 init()의 return문에서 객체 리터럴로 정의되는 인스턴스가 싱글톤 객체이며, 전체 시스템에서 하나만 존재하게 된다. 순서대로 보면 익명함수의 return문에는 싱글톤 객체를 구하는 공개 메서드(getInstance)를 포함한 객체를 반환하며, getInstance메서드는 instance값을 확인해 인스턴스가 선언이 안되있는 경우 비공개 메서드인 init를 호출하여 singleton인스턴스를 생성하여 instance에 할당하게 된다.

이렇게 일반적으로 싱글톤 패턴에서는 이미 객체가 생성되었는지 여부를 알려주는 instance와 같은 내부 변수가 필요하다. 그리고 싱글톤 패턴에서는 내부 변수에 접근할 수 있는 객체를 반환하는 클로저를 이용해야 한다.

정리를 하면 내부의 getInstance메서드에서 비공개 프로퍼티인 instance에 접근할 수 있다는 것과, getInstance메서드의 호출이 끝나더라도 instance의 값은 계속 유지되는 특성(클로저)를 이용해 prop, method()이 포함된 객체를 유일하게 생성하게 된다. 그래서 singleton.getInstance()를 몇번이나 호출하더라도 얻는 객체는 모두 동일한 싱글톤 객체를 가리키게 된다.

References

싱글톤(singleton) 패턴