자바스크립트(Javascript) 디자인패턴 - 전략 패턴 (strategy pattern)

디자인패턴 중 하나인 전략 패턴은 런타임에 직접 수행할 알고리즘(기능)들을 선택할 수 있게 해주는 패턴이다. 자세한 예시와 설명은 예전에 디자인패턴 공부할 때 쓴 글이 있으니 참고 바란다. 디자인패턴 - 스트레티지 패턴

이번엔 자바스크립트로 전략 패턴을 구현하는 방법에 대해서 알아본다. 자바스크립트 디자인패턴 책을 공부하면서 간략히 정리한 글이다. 데이터 유효성 검사를 하는 기능을 가지고 전략 패턴을 자바스크립트로 구현해 보겠다. 일단 검사기(validator)를 만들기 위해 필요한 개념적인 것들 부터 알아보자.

• 검증할 데이터
• 유효성 검사 설정 (configuration)
• 검사기에 대한 세부 알고리즘

하나의 추상적인 검사기에 설정에 따라 수행되는 디테일한 검사기를 런타임에 변경할 수 있다. 전략 패턴에 적용하기 좋은 예시이다. 일단 검증할 데이터는 아래와 같다.

검증할 데이터 정의

var data = {
    first_name: "jm",
    last_name: "Lee",
    age: 15,
    username: "test"
}

어떤 데이터를 받아들일지 유효성 검사기를 아래와 같이 설정할 수 있다. 각 필드별로 검사기를 정하면 각 필드별 검사를 실시할 것이다.

유효성 검사 설정 정의

validator.config = {
    first_name: 'isNonEmpty',
    age: 'isNumber',
    username: 'isAlphaNum'
};

유효성 검사기(validator) 구현, 설정에 정의한 이름의 인터페이스를 구현한다. 이는 각 타입별 검사기에 대한 상세 알고리즘 목록이 있다.

validator.types.isNonEmpty = {
    validate: function(value) {
        return value !== "";
    },
    instructions: "이 값은 필수"
};

validator.types.isNumber = ...
validator.types.isAlphaNum = ...

검사기 (validator) 구현

이제 하나의 유효성 검사기(validator)를 구현해보면 아래와 같다.

var validator = {
    // 검증 알고리즘 인터페이스 들
    types: {},

    // 에러 메시지들
    messages: [],

    // 검사 설정
    config: {},

    validate: function(data) {
        var i, msg, type, checker, result_ok;
        ...

        // 데이터 필드를 순회하면서 데이터가 i 프로퍼티를 가지고 있다면
        for (i in data) {
            if (data.hasOwnProperty(i)) {
                type = this.config[i];
                checker = this.types[type];

                // 예외처리
                if (!type) {
                    ...
                }
                ...

                // 데이터의 각 프로퍼티 별로 검증
                result_ok = checker.validate(data[i]);
            }
        }
    },

    hasErrors: function() {
        return this.messages.length !== 0;
    }
};

이는 자바스크립트 뿐만 아니라 다양하게 사용할 수 있다. 데이터를 다루는 곳에는 항상 validation이 필요한데 이를 추상화된 모듈로 구현하고 세부 알고리즘을 만들어서 런타임에 사용하면 좋을듯 하다.